This is a migrated thread and some comments may be shown as answers.

Showing name instead of value on pie chart segments

6 Answers 492 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

Accepted

answered on 03 Jun 2019, 11:18 AM

I am attempting to do the same thing but instead of binding to the HTML chart I programmatically add the segments to the pie chart or donut chart. I have included the code I use

Part 1 - Setting the segment points

For Each dr As Data.DataRow In ds.Tables("Data").Rows
ai = New Telerik.Web.UI.AxisItem
ai.LabelText = dr.Item("XValue")

chart.PlotArea.XAxis.Items.Add(ai)
ai = Nothing
Next

Part 2 - Adding the Y Values

If m_useDoughnut Then
series = New Telerik.Web.UI.DonutSeries
Else
series = New Telerik.Web.UI.PieSeries
End If
series.name = seriesName
series.ToolTipsAppearance.color = Drawing.Color.Black
series.ToolTipsAppearance.BackgroundColor = Drawing.Color.White
series.VisibleInLegend = True
series.LabelsAppearance.Visible = True
series.LabelsAppearance.ClientTemplate = "#=name#"
chart.PlotArea.Series.Add(series)

For Each dr As Data.DataRow In ds.Tables("Data").Rows
si = New Telerik.Web.UI.SeriesItem
si.YValue = CType(dr.Item("YValue"), Single)
si.TooltipValue = dr.Item("XValue").ToString
si.Name = dr.Item("XValue").ToString
series.Items.Add(si)
si = Nothing
Next
series = Nothing

I am attempting to use the LabelsAppearace ClientTemplate attribute to ouput the segment name. The setting I have at the moment does not display anything; I have also tried #=dataItem.name# but this shows 'undefined' on the chart.

Can anyone help me with this; thanks.

answered on 03 Jun 2019, 02:23 PM

Hello John,

The name of the segment is under the "category" field, even when not data binding, like in this case. You can find a list of the fields you can use in the template in the following article (scroll down to the "Main Properties Used in a ClientTemplate" section): https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview.

Also, to use a pie or donut series, you must add PieSeriesItem instances to its SeriesItems collection.

On a side note, you don't need x-axis items for a donut or pie chart, as there is no x-axis.

Here's an example I made for you that shows how this works and how to set a custom tooltip since I see an attempt at that in the code - in this sample the labels, tooltips and legend will all show the same value - the name of the segment.

Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init

Dim chart As RadHtmlChart = New RadHtmlChart()

chart.ID = "myChart"

form1.Controls.Add(chart)

Dim series As DonutSeries = New DonutSeries()

series.LabelsAppearance.ClientTemplate = "#=category#"

series.TooltipsAppearance.ClientTemplate = "#=category#"

chart.PlotArea.Series.Add(series)

Dim si As PieSeriesItem

For Each dr As Data.DataRow In GetTestData().Rows

si = New PieSeriesItem()

si.Y = CType(dr.Item("YValue"), Single)

si.Name = dr.Item("XValue").ToString

series.SeriesItems.Add(si)

Next

End Sub

Protected Function GetTestData() As DataTable

Dim tbl As New DataTable()

tbl.Columns.Add(New DataColumn("XValue", GetType(String)))

tbl.Columns.Add(New DataColumn("otherField", GetType(String)))

tbl.Columns.Add(New DataColumn("YValue", GetType(Single)))

tbl.Columns.Add(New DataColumn("fourthField", GetType(String)))

tbl.Rows.Add(New Object() {"first", "firstRecord2", 1, "A"})

tbl.Rows.Add(New Object() {"first", "secondRecord2", 2, "B"})

tbl.Rows.Add(New Object() {"third", "thirdRecord2", 3, "C"})

Return tbl

End Function

Regards,
Marin Bratanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.