How to create a pie chart programatically?

4 posts, 1 answers
  1. Uttam Dhakal
    Uttam Dhakal avatar
    29 posts
    Member since:
    Jan 2010

    Posted 22 Oct 2012 Link to this post

    is there a tutorial that explains how to create a pie chart programatically.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 23 Oct 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave
    Dave avatar
    2 posts
    Member since:
    Dec 2012

    Posted 03 Jan 2013 Link to this post

    Further to the programmatic pie chart question I would like to know, when using 'traversing your dataset' method of creation, if it is possible to create a custom ToolTip for each series item (like when Databinding a datasource we can use the 'mySeries.TooltipsAppearance.ClientTemplate')

    Also is it possible, when databinding make each segment of the piechart 'exploded'?

    Thanks
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 03 Jan 2013 Link to this post

    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
    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.
Back to Top