Add Images to Charts in Your Silverlight & WPF Apps

Adding images to charts in a Business application makes it more interesting. Lets discuss how to add images or pictures to convey business information more effortlessly.

Problem Statement

Lets take an example of a Manager portal for any project. Here we will take an example of our Community team where we will add images to highlight the 'Star' Engineers (based on the ratings) and the Engineers who need to be assigned more tasks (based on the how many Cases each is handling).

Things Required

The basic requirements for a manager portal is simple :

1. Engineer data (Dummy Data)
2. C1Chart (WPF/Silverlight) to display this data where we need to use some pictures :
   • 'Star' - Best Engineer
   • 'Exclaimation Mark' - Engineer handling less number of cases

The Implementation

We will use the ChartPanelObject to add the Images and then add this object in the ChartPanel. All this would be handled in the DataSeries's PlotElementLoaded event. The code looks pretty clean and understandable in itself :

private void DataSeries_PlotElementLoaded(object sender, EventArgs e)  
{  
PlotElement plot_ele = sender as PlotElement;  
if (plot_ele != null)  
{  
    // get datapoint which includes series and series index info  
    var dataPoint = plot_ele.DataPoint;  

    // create an instance of the ChartPanel  
    var panel = new ChartPanel();  

    // create an instance of the ChartPanelObject  
    var panel_obj = new ChartPanelObject()  
    {  
        HorizontalAlignment = HorizontalAlignment.Stretch,  
        VerticalAlignment = VerticalAlignment.Bottom  
    };  

    var border = new Border();  
    var stackpanel = new StackPanel();  
    Image image = new Image();  

    // Exclaimation mark for the engineers handling less than 20 cases  
    if (dataPoint.SeriesIndex == 0 && dataPoint.Value <= 20)  
    {  
        BitmapImage image_source = new BitmapImage(new Uri(@"pack://application:,,,/Images/needsAttention.jpeg"));  
        panel_obj.HorizontalAlignment = HorizontalAlignment.Right;  
        image.Source = image_source;  
        panel_obj.Height = 30;  
        panel_obj.Width = 25;  
        panel_obj.AxisY = "y1";  
    }  

    // Star Performer -> Engineer having Rating as 5  
    else if (dataPoint.SeriesIndex == 1 && dataPoint.Value == 5)  
    {  
        BitmapImage img = new BitmapImage(new Uri(@"pack://application:,,,/Images/StarPerformer.jpg"));  
        panel_obj.HorizontalAlignment = HorizontalAlignment.Left;  
        image.Source = img;  
        panel_obj.Height = 30;  
        panel_obj.Width = 25;  
        panel_obj.AxisY = "ay2";  
    }  

    stackpanel.Children.Add(image);  
    border.Child = stackpanel;  
    panel_obj.Content = border;  

    panel_obj.DataPoint = new Point(dataPoint.PointIndex, dataPoint.Value);  
    panel_obj.Attach = ChartPanelAttach.None;  

    // ChartPanelObject added to the ChartPanel  
    panel.Children.Add(panel_obj);  

    // ChartPanel finally included in the Layers Collection  
    c1Chart1.View.Layers.Add(panel);  

}  

Output

Here is how our Manager portal will look like: The Desired Information could be retrieved easily with the inclusion of images. Clearly, John and Eric would not be too happy to have this information but Rose is surely gonna party :D

Download Samples

Download samples here for the detailed implementation of the above code : Download SL_Sample Download WPF_Sample