CODEWITHSUNDEEP
c#graphicschartsmicrosoft-chart-controls
Mister Black
Mister Black

Reputation: 31

Add images on chart control

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?

Upvotes: 1

Views: 2661

Answers (1)

TaW
TaW

Reputation: 54433

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.

enter image description here

Upvotes: 4

Related Questions