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

How to create a pie chart programatically?

3 Answers 760 Views

Documentation and Tutorials

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

3 Answers, 1 is accepted

Accepted

answered on 23 Oct 2012, 12:42 PM

Hi,

The following demo and help article show how HtmlCharts can be created programmatically:
http://www.telerik.com/help/aspnet-ajax/htmlchart-use-explicit-items.html (see the second section)
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/serversideapi/programmaticcreation/defaultcs.aspx

The idea is to traverse the data you have and create series and items programmatically. The PieSeries items have the most properties of all series and their Name property is what is shown in the legend. They also use the color defined foreach item, unlike the other series that have common color for all items from a given series. More information on the pie charts is available here: http://www.telerik.com/help/aspnet-ajax/htmlchart-types-pie-chart.html.

All the best,
Marin Bratanov
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 03 Jan 2013, 03:33 PM

Hi Dave,

Tooltips are available only through ClientTemplates which require your chart to be databound. You cannot set custom ToolTip to a single Series item. This is explained in this help article.

Regarding your second question it is possible to set which segments will be exploded in a databound PieChart. You can simply create an additional boolean column in the datasource (e.g named IsExploded):

protected DataTable GetData()

{

DataTable tbl = new DataTable();

tbl.Columns.Add(new DataColumn("data"));

tbl.Columns.Add(new DataColumn("SecondColumn"));

tbl.Columns.Add(new DataColumn("ThirdColumn"));

tbl.Columns.Add(new DataColumn("IsExploded"));

tbl.Columns.Add(new DataColumn("ColorColumn"));

tbl.Rows.Add(new object[] { 11, "unknown", "first row, item 3", false, "Green" });

tbl.Rows.Add(new object[] { 22, "Apple OS X 10.1", "second row, item 3", true, "Blue" });

tbl.Rows.Add(new object[] { 33, "Windows NT 6.1", "third row, item 3", true, "Yellow" });

tbl.Rows.Add(new object[] { 25, "WinNTasd asd", "fourth row, item 3", true, "Orange"});

return tbl;

}

and after that refer the chart to that column through ExplodeField property in the markup:

...

<telerik:PieSeries StartAngle="45" DataFieldY="data" ExplodeField="IsExploded" Name="PieSeriesName"

NameField="SecondColumn" ColorField="ColorColumn">

<LabelsAppearance Position="Circle" ClientTemplate="#=dataItem.SecondColumn#" />

<TooltipsAppearance ClientTemplate="#=dataItem.ThirdColumn#" />

</telerik:PieSeries>

...

You can find the above example in this online demo. You may find useful the list of the server-side API as well.

Greetings,
Danail Vasilev
the Telerik team