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

Showing name instead of value on pie chart segments

6 Answers 99 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
Derek asked on 15 Aug 2013, 11:27 PM
Is it possible to show the name value instead of the data value on the pie chart segments? Basically, what we'd like to do is to show the data that is on the legend on the pie segment, instead of the number value. For example if I have a segment that shows Widgets, with a value of 30, currently the pie will show 30; I'd like to show the word 'Widget' instead.

Is this possible?

6 Answers, 1 is accepted

Sort by
0
Accepted
Barbaros Saglamtimur
Top achievements
Rank 1
answered on 19 Aug 2013, 10:35 AM
Yes, use ClientTemplate for LabelsAppearance eg;


          <PlotArea>
<Series>
 <telerik:PieSeries DataFieldY="DataFieldName" NameField="NameField">
 <LabelsAppearance ClientTemplate="#=dataItem.NameField#">
 </LabelsAppearance>
 </telerik:PieSeries>
 </Series>
</PlotArea>
0
Derek
Top achievements
Rank 1
answered on 20 Aug 2013, 06:24 PM
Thanks, this worked perfectly!
0
Bill
Top achievements
Rank 1
answered on 15 May 2014, 07:52 PM
Hi,

I'm trying to do a similar kind of thing with my label. But my template uses two dataitems with a <br /> in between. This approach seems to work for the tooltip client template but not with the labels client template. Any suggestions or workarounds?
0
Marin Bratanov
Telerik team
answered on 16 May 2014, 10:45 AM

Hi Bill,

This case is explained here: http://feedback.telerik.com/Project/108/Feedback/Details/38633-add-the-ability-to-handle-long-labels-and-titles-in-radhtmlchart. Put shortly - SVG (what RadHtmlChart uses to render the image) does not support line breaks. The tooltips are actually HTML elements, so they can work with the <br /> tag.


Regards,

Marin Bratanov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
John
Top achievements
Rank 1
Veteran
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.

0
Marin Bratanov
Telerik team
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.
Tags
Chart (HTML5)
Asked by
Derek
Top achievements
Rank 1
Answers by
Barbaros Saglamtimur
Top achievements
Rank 1
Derek
Top achievements
Rank 1
Bill
Top achievements
Rank 1
Marin Bratanov
Telerik team
John
Top achievements
Rank 1
Veteran
Share this question
or