Image on chart items data lables

[kiran]

Hi,

i want to put chart items data lables in a required graphical shape .(i.e., at data points i want to put data labels in some shape like in a rectangular box i want to keep the data label) .

               and

can we put any any image on data items plot?(i.e., i have to put a image on bar chart bars)

is there any way to achieve this? please provide sample code.

thanks in advance.

regards,
kiran

[Dwight]

Hi Kiran,

Here is a sample code that sets an image as a background of each bar:

this.radChart1.Series[0].Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
this.radChart1.Series[0].Appearance.FillStyle.FillSettings.BackgroundImage = @"C:\Images\SomeImage.jpg";

Note, that the BackgroundImage property is of type string, so you need to provide path to the respective image.

Hope that helps.

Sincerely yours,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[kiran]

Hi Evtim,

This is not what i am expecting.

i want to put chart items data lables(exactly the values which we are giving for DataLabels column)  in a required graphical shape or image.

like suppose in a line chart we are displaying the datalabel column values above the plotted value. instead of that can we show any image or the same value(22) in rectangular box?


               22
|               |
|               |
|               |
|               | 
--------------------------

is there any way to achieve this? please provide sample code.

thanks in advance.

regards,
kiran

[Jane]

Hi Telerik,

The same feature i am also looking for my project.

Do we have this in Telerik?

regards,
jane

[Dwight]

Hello Kirian and Jane,

You can set image to the labels by setting:

this.radChart1.Series[0].Items[0].Label.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
this.radChart1.Series[0].Items[0].Label.Appearance.FillStyle.FillSettings.BackgroundImage = @"SomeImage.jpg";

If you use data binding, I suggest changing the chart items' settings on the PrePaint event to ensure the items are already created.


Regards,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[kiran]

Hi Evtim,

Could you please share some sample application with DataBinding(XML)?

              22
|               |
|               |
|               |
|               | 
--------------------------


i want the image for 22.. This is for your information.

Help is highly appreciated.

regards,
kiran

[Ves]

Hi Kiran,

For scenarios which involve databinding you can use ItemDataBound event of RadChart. In the event handler you can access the ChartSeriesItem through e.SeriesItem. Then you can apply the approach shown by my colleague Evtim. Hope this helps.

Best regards,
Ves
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[kiran]

Hi Ves,

The following code i have used to implement the same but i am unable to get the desired out.

private

void radChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)

{

e.SeriesItem.Label.Appearance.FillStyle.FillType =

FillType.Image;

e.SeriesItem.Label.Appearance.FillStyle.FillSettings.BackgroundImage =

"C:\\Green.bmp";

}

the image is there in my C drive.


What is the problem with my code?.. Could you please share some sample application.?

Any help is highly appreciated.

Regards,
Kiran

[kiran]

Hi Ves,

The following code i have used to implement the same but i am unable to get the desired out.

private

void radChart1_ItemDataBound(object sender, ChartItemDataBoundEventArgs e)

{

e.SeriesItem.Label.Appearance.FillStyle.FillType =

FillType.Image;

e.SeriesItem.Label.Appearance.FillStyle.FillSettings.BackgroundImage =

"C:\\Green.bmp";

}

the image is there in my C drive.it isd


What is the problem with my code?.. Could you please share some sample application.?

Any help is highly appreciated.

Regards,
Kiran

[Dwight]

Hello kiran,

Please, find a demo project attached to this post.

Regards,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[kiran]

Hi Evtim,

I  added an image to the project and changed the code to see the changes. But it is not working. The sample project is working with the image which you have attached in this post.

what is the problem in the below code? i just changed the image name to new image name which i have added. Please help me out.


using

System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using Telerik.Charting;

namespace LabelImage
{
public partial class Form1 : Form
{
private List<int> seriesData = new List<int>();
public Form1()
{
seriesData.AddRange(new int[] { 10, 3, 12, 3, 7, 6, 4, 9 });
InitializeComponent();
radChart1.DefaultType = ChartSeriesType.Line;
this.radChart1.ItemDataBound += RadChartItemDataBound;
this.radChart1.DataSource = seriesData;
this.radChart1.DataBind();
}
private void RadChartItemDataBound(object sender, ChartItemDataBoundEventArgs e)
{
e.SeriesItem.Label.Appearance.FillStyle.FillType = Telerik.Charting.Styles.FillType.Image;
//e.SeriesItem.Label.Appearance.FillStyle.FillSettings.BackgroundImage = @"45.jpg";
e.SeriesItem.Label.Appearance.FillStyle.FillSettings.BackgroundImage = @"99.jpg";
}
}

}

Thanks in Advance,

Regards,
Kiran

[Dwight]

Hello kiran,

You need to ensure that the newly added image is copied to the project's output directory.
Check the following properties of the image:

• Build Action should be set to Content.
• Copy to Output Directory should be set to Copy if newer or Copy always.

Regards,
Evtim
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center