Pie Chart with SQL data source

5 posts, 1 answers
  1. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 20 Sep 2015 Link to this post

    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>

  2.
  3. Niko
    Admin
    Niko avatar
    404 posts

    Posted 23 Sep 2015 Link to this post

    Hello,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 26 Sep 2015 in reply to Niko Link to this post

    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>

  7. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 30 Sep 2015 Link to this post

    Hello Tomica,

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 30 Sep 2015 in reply to Danail Vasilev Link to this post

    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.

Back to Top