Add images on chart control

Question

I'm not sure if I titled the question correctly so it would be better if I explained what I'm trying to do. I want to add some images on chart control and around their to draw graphics.

I want to display the layout of the sensors on the coordinate plane defined by coordinates, while noting the location of geographic objects (forest, river, etc.). These objects will be images which I want to add to the chart/

How can I do it? It is possible?

We need more info to answer your question correctly. For example what you're using to draw charts, what code have you tried and so on. :) See http://stackoverflow.com/help/how-to-ask — JonasMH, Oct 28 '16 at 06:35
A chart is not a container control like Panel or Form. Nevertheless, you can add pictureboxes with its Controls.Add() method and they'll show up on top of the chart. There is a chicken-and-egg problem however, you can't know what their Location property needs to be until after the chart paints itself. The smart thing to do here is to write an event handler for its PostPaint event and just draw whatever you need through its e.ChartGraphics property. Including the images, use DrawImage(). — Hans Passant, Oct 28 '16 at 07:25

TaW · Answer 1 · 2016-10-29T06:08:42.010

If you show us an example we may be able to help to find the best way.

There are several options.:

You can place image controls like PictureBox or Panel on the Chart by adding them to the chart's Controls collection
You can draw them in the Pre- or PostPaint event
You can assemble a BackImage that contains all the Images you want to place around the chart.
You can add ImageAnnotations to the chart. (Recommended)

The latter obviously is the one that is best integrated.

Here is an example:

We start by adding the images we want to use to the Chart's Images collection:

List<string> imgFiles = new List<string>()
{ yourImageFileName1, ...};

for (int i = 0; i  < imgFiles.Count; i++)
{
    Image img = Bitmap.FromFile(imgFiles[i]);
    chart1.Images.Add(new NamedImage("Image" + i, img));
}

Note the NamedImage class used here. It allows you to refer to the images by a string; pick better names! Maybe Path.GetFileNameWithoutExtension(imgFiles[i]) - Also note that you must not Dispose of the Images or else they will disappear!

Next make make a little room at the right side of the chart by reducing the ChartArea's size:

ChartArea ca = chart1.ChartAreas[0];
ca.Position = new ElementPosition(5,5,70,90);

Note the values are percentages of the Chart's ClientSize, so they will grow and shrink when resizing the Chart!

Finally we can add them all. You will want to add them at specific positions. I add them at some space to the right and also make them moveable:

foreach (NamedImage img in chart1.Images)
{
    ImageAnnotation ia = new ImageAnnotation();
    ia.Image = img.Name;
    ia.AllowMoving = true;
    ia.X = 77;
    ia.Y = 15 * chart1.Images.IndexOf(img) + 5;
    chart1.Annotations.Add(ia);
}

Now you should see the Annotions. And if you add this event:

private void chart1_AnnotationPositionChanging(object sender, 
                                               AnnotationPositionChangingEventArgs e)
{
    testLabel.Text = e.Annotation.X + " "  + e.Annotation.Y;
}

..you will see just what the numbers for the best position are. Eventually you will not keep them moveable, of course..

Note the the Annotations' position is also in percentages, so they will move along nicely, when the chart get resized! You may also scale the Images by setting the Width and Height; this is a little tricky, as it will also be in percent (and not as the docs falsely state in pixels). You would probably want to loop over the ImageAnnotations and rescale them in the Resize event..: ia.Height = ia.Width * chart1.Width / chart1.Height;

Also note that there are other ways to position annotations, like anchored to datapoints, but this seem the best for a static adornment.

Add images on chart control

1 Answers1