Value name Labels in a Legend Of a Pie Chartview

[Xavier Soares]

Hello,

I'd like to share with community a sample code that Telerik Support has send me to show the labels of each pie value.

I can't find nothing like it the RadChartView documentation. So, if someone will search for it ,  may use it.

Imports Telerik.WinControls.UI
Imports Telerik.Charting

Public Class Form1
Public Sub New()
InitializeComponent()
Dim table As New DataTable()
table.Columns.Add("Name")
table.Columns.Add("Value", GetType(Integer))
table.Rows.Add("Car", 100)
table.Rows.Add("Bicycle", 30)
table.Rows.Add("Truck", 53)
Dim series As New PieSeries()
series.Range = New AngleRange(270, 360)
series.ValueMember = "Value"
series.DataSource = table
series.ShowLabels = True
Me.RadChartView1.AreaType = ChartAreaType.Pie
Me.RadChartView1.Series.Add(series)
Me.RadChartView1.ShowLegend = True
End Sub

Protected Overrides Sub OnLoad(e As EventArgs)
MyBase.OnLoad(e)
For Each item As LegendItem In Me.RadChartView1.ChartElement.LegendElement.Provider.LegendInfos
Dim pointElement As PiePointElement = DirectCast(item.Element, PiePointElement)
Dim row As DataRowView = DirectCast(pointElement.DataPoint.DataItem, DataRowView)
item.Title = row("Name").ToString()
Next
End Sub
End Class

Best regards

[Ivan Petrov]

Hi Luis,

Thank you for sharing your code with the community, I am sure that someone will benefit from it.

 

Kind regards,
Ivan Petrov
the Telerik team

[Marco]

I'm not sure that's this solution is still working now (Q1 2013 SP1).

I have try to implement something like that's in my application and Provider.LegendInfos do not return anything.

Anyway I reach the same result by handling the VisualItemCreating event of the RadChartView.ChartElement.LegendElement.

I think that's Telerik could improve this feature by adding the two property "IsVisibleInLegend" and "LegendTitle" to PieDataPoint. We will have a more unified behaviour. It will be perfect if we could bind directly this property in PieSerie with something like a "LegendMember" property !

Last but not least... Telerik should update the Demo Application "First Look" of the "ChartViewGroup" because this sample is still using an old fashionned custom control for managing the legend.

Don't think your customer are interested in writing three dedicated class for displaying a piechart with a relevent legend. As long as Microsoft ChartControl could make it in three line of code :-)

Public Sub New()

    ' This call is required by the designer.
    InitializeComponent()

    ' Add any initialization after the InitializeComponent() call.
'...
'Handle the VisualItemCreating of the legend
    AddHandler Me.RadChartView1.ChartElement.LegendElement.VisualItemCreating, AddressOf LegendElement_VisualItemCreating
End Sub

 

Private Sub LegendElement_VisualItemCreating(sender As Object, e As LegendItemElementCreatingEventArgs)

    e.LegendItem.Title = CType(CType(e.LegendItem.Element, PiePointElement).DataPoint.DataItem, BoundObject).PropertyMember


End Sub

[Ivan Petrov]

Hi Marco,

Thank you for writing.

I have logged your suggestion for improving the pie chart legend into our Public Issue Tracking System - PITS. You can track the progress of this feature, subscribe for status changes and add your vote/comment to it on the following link - PITS Feature.

The changes in the chart example will be available in the upcoming release which is due in a few days.

I have updated your Telerik Points for the valuable feedback.

Regards,
Ivan Petrov
Telerik

[Michael]

I have tried to set the ChartElement.LegendElement.Font several different ways and have not been able to change the elements presented within the legend. The LegendElement.TitleElement works perfectly. Am I missing something?

Thanks

[Ivan Petrov]

Hello Michael,

Thank you for writing.

You can set the font of the legend item elements by iterating through them. Here is a sample code which accomplishes this:

Font font = new Font("Arail", 16, FontStyle.Strikeout);

foreach (LegendItemElement element in this.radChartView1.ChartElement.LegendElement.StackElement.Children)
{
    element.Font = font;
}

You should note that this should be executed after the elements have been created. The OnLoad method of a form is a good place to use this code.

I hope this will be useful. Should you have further questions, I would be glad to help.

Regards,
Ivan Petrov
Telerik

[Michael]

Ivan,

Thanks for the reply. The code works great. I also have a question related to the chart when using it in bar chart mode, I display 3 data points which the chart displays as expected. The issue is that the chart displays the first and last data point as bars of the same size, while the middle data point is displayed as a bar approximately twice as wide as the other two data points. Is there a way in which each bar will be the same size, with the chart displaying the remaining of the chart area as white space, where more bars would be drawn as data points are added?

[Ivan Petrov]

Hello Micahel,

Thank you for writing back.

The chart default behavior is to draw all bars with the same size. The size of the bars can be affected if you have more than one data point with a given category. In this situation the chart combines the data points and alters the bars size so they can be shown side by side. You can try to clean all series and then all axes from the chart before you add your data and see if the behavior is still present. 

On your second question, if you are using categorical axis you can add empty data points and then update them when the real data comes. If you are using one of the continuous axes they have Minimum and Maximum properties. 

I hope this will help. Do not hesitate to write back with further questions.

Regards,
Ivan Petrov
Telerik