I am attempting to create my first HTML Chart. This will be a simple pie chart based on a SQL query.
The query returns five rows with two columns of data: (1) language (English/French/etc) and (2) a count of each.
The intention is to display a pie chart showing the relative distribution of the top five languages used in my application.
I have copied an example and also looked at the data binding documentation but have not been able to connect my data with the pie slices.
I presume I need to add some type of template that is unique to a pie chart. All the examples I found refer to other chart types.
When I add this markup to my page I get no results unless I add a few series items directly. I see that Intellisense includes an item "db" (markup snippet for data-bind attribute). I don't know what to do from there, it appears to be non-functional or expecting me to do something unknown to me.
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" DataSourceID="Language_Chart_Data"> <PlotArea> <Series> <telerik:PieSeries StartAngle="90" DataFieldY="count" NameField="language"> <SeriesItems > <telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Safari" Y="4.5"></telerik:PieSeriesItem> <telerik:PieSeriesItem BackgroundColor="#333333" Exploded="false" Name="Opera" Y="2.3"></telerik:PieSeriesItem> </SeriesItems> <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %" /> <TooltipsAppearance DataFormatString="{0} %" /> </telerik:PieSeries> </Series> </PlotArea> <ChartTitle Text="Top Five Languages"> </ChartTitle></telerik:RadHtmlChart>4 Answers, 1 is accepted
The most important property for data-binding a Pie series is the DataFieldY. It should point to the property of a DataItem. Here is a sample chart setup and the respective code-behind:
<telerik:RadHtmlChart ID="pieChart" runat="server"> <PlotArea> <Series> <telerik:PieSeries DataFieldY="count" /> </Series> </PlotArea></telerik:RadHtmlChart>protected void Page_Load(object sender, EventArgs e){ pieChart.DataSource = GetData(); DataBind();}private IEnumerable GetData(){ return new[] { new { count = 3 }, new { count = 5 }, new { count = 10 } };}Hope this points you in the right direction.
Regards,
Niko
Telerik
Rank 2
I have progressed one step further on my quest. I have achieved data binding on the pie chart.
However I am now having a problem with formatting.
The output is included in an attachment, which also includes one of your sample pie charts for comparison.
According to the sample, there are options to control appearance of the labels and tooltips.
This does not work with my chart with an error "Element 'labelsappearance' is not supported". (lines 7 & 8)
The only difference I see is between <Series> and <SeriesItems> in the sample chart.
01.<telerik:RadHtmlChart runat="server" ID="Language_Chart" DataSourceID="Language_Chart_Data" Width="700px">02. <Legend>03. <Appearance Position="Right" Visible="True"></Appearance>04. </Legend>05. <PlotArea>06. <Series>07. <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %"></LabelsAppearance>08. <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>09. <telerik:PieSeries DataFieldY="percentage" NameField="language"/>10. </Series>11. </PlotArea>12. <ChartTitle Text="Top Ten Languages">13. <Appearance Visible="True"></Appearance>14. </ChartTitle>15. <Navigator>16. <SelectionHint Visible="False"></SelectionHint>17. </Navigator>18.</telerik:RadHtmlChart>19. 20.<telerik:RadHtmlChart runat="server" ID="PieChart1" Width="700" Height="500" Transitions="true" Skin="Silk">21. <ChartTitle Text="Browser Usage for April 2012">22. <Appearance Align="Center" Position="Top"></Appearance>23. </ChartTitle>24. <Legend>25. <Appearance Position="Right" Visible="true"></Appearance>26. </Legend>27. <PlotArea>28. <Series>29. <telerik:PieSeries StartAngle="90">30. <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %"></LabelsAppearance>31. <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance>32. <SeriesItems>33. <telerik:PieSeriesItem BackgroundColor="#ff9900" Exploded="true" Name="Internet Explorer" Y="18.3"></telerik:PieSeriesItem>34. <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Firefox" Y="35.8"></telerik:PieSeriesItem>35. <telerik:PieSeriesItem BackgroundColor="#999999" Exploded="false" Name="Chrome" Y="38.3"></telerik:PieSeriesItem>36. <telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Safari" Y="4.5"></telerik:PieSeriesItem>37. <telerik:PieSeriesItem BackgroundColor="#333333" Exploded="false" Name="Opera" Y="2.3"></telerik:PieSeriesItem>38. </SeriesItems>39. </telerik:PieSeries>40. </Series>41. </PlotArea>42.</telerik:RadHtmlChart>You should place the LabelsAppearance Position and TooltipsAppearance tags inside the series declaration. For example:
<telerik:PieSeries DataFieldY="percentage" NameField="language"> <LabelsAppearance Position="OutsideEnd" DataFormatString="{0} %"></LabelsAppearance> <TooltipsAppearance Color="White" DataFormatString="{0} %"></TooltipsAppearance></telerik:PieSeries>Regards,
Danail Vasilev
Telerik
Rank 2
This works great. I can see now that I had missed the "/>" closing tag next to "language" on the PieSeries, which made the LabelsAppearance tag outside and therefore rejected.
I changed that to ">" inserted the appearance tag and then closed it with </Telerik:PieSeries>" closing tag.