Add & Animate Images in ChartLabels for C1Chart

In this blog, we will discuss on how one can show and animate Images on Top of each Bar in C1Chart for WinForms. At the end of this blog, our C1Chart will look like : Looks Interesting ;-) Now, lets start the implementation.

Step 1 : Show Images on Each Bar

Here, we will make use of the Chart's Paint event, to capture the DataIndices of each DataPoint plotted on C1Chart, using the DataIndexToCoord method of ChartGroup object.

private void c1Chart1_Paint(object sender, PaintEventArgs e)  
{  
 if (flag == true)   //Create the ChartLabels containing the Images just once  
 {  
   C1.Win.C1Chart.Label label;  
   int CoordX = 0, CoordY = 0;  
   Image happy = new Bitmap(@"..\\..\\happy.jpg");  
   Image sad = new Bitmap(@"..\\..\\sad.jpg");  
   for (int i = 0; i < c1Chart1.ChartGroups[0].ChartData.SeriesList.Count; i++)  
   {  
     for (int j = 0; j < c1Chart1.ChartGroups[0].ChartData.SeriesList[i].PointData.Length; j++)  
     {  
       c1Chart1.ChartGroups.Group0.DataIndexToCoord(i, j, ref CoordX, ref CoordY);  
       label = new C1.Win.C1Chart.Label();  
       label = c1Chart1.ChartLabels.LabelsCollection.AddNewLabel();  
       label.Visible = true;  
       //Display some random text in the label  
       //and set the Forecolor of the Text to Transparent  
       label.Style.ForeColor = Color.Transparent;  
       label.Text = "text1\\ntext2\\ntext3";  
       if (i == 0)  
         label.Image = new Bitmap(happy, new Size(25, 25));  
       else  
         label.Image = new Bitmap(sad, new Size(25, 25));  
       label.AttachMethod = C1.Win.C1Chart.AttachMethodEnum.DataIndex;  
       label.Compass = C1.Win.C1Chart.LabelCompassEnum.North;  
       label.AttachMethodData.GroupIndex = 0;  
       label.AttachMethodData.SeriesIndex = i;  
       label.AttachMethodData.PointIndex = j;  
       }  
   }  
   flag = false;  
 }  
}

Step 2 : Animate the Images

Here, we will make use of a Timer object to display and hide the corresponding ChartLabel's Text, so that the image will be visible and invisible for a certain interval of time.

void timer_Tick(object sender, EventArgs e)  
{  
  if (animate)  
  {  
    for (int i = 0; i < c1Chart1.ChartLabels.LabelsCollection.Count; i++)  
    {  
      if (c1Chart1.ChartLabels.LabelsCollection[ i ].AttachMethodData.SeriesIndex == 1)  
        c1Chart1.ChartLabels.LabelsCollection[ i ].Text = "text1\\ntext2\\ntext3";  
    }  
  }  
  else  
  {  
    for (int i = 0; i < c1Chart1.ChartLabels.LabelsCollection.Count; i++)  
    {  
      if (c1Chart1.ChartLabels.LabelsCollection[ i ].AttachMethodData.SeriesIndex == 1)  
        c1Chart1.ChartLabels.LabelsCollection[ i ].Text = "";  
    }  
  }  
  animate = !animate;  
}

Download Sample VB Download Sample CS