Pie Chart SQL Binding Example

4 posts, 1 answers
  1. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 13 Jun 2012 Link to this post


    I have been trying to implement the new RadHtmlChart as a pie chart, but I have not seen an example on how to get this to work.  The data being returned is in two columns, type and count.  I have tried serveral ways making this into a pie chart, but nothing seems to work correctly.  Is there any example of a pie chart with databinding to a sql datasource?  I want it to look like the pie chart sample that is in the demos with the legend showing the value for the type column and the pie chart showing the value for the count column.  The only exception is I would like the labels for each pie slice to show the percentage and value of the count field.

  2. Answer
    Marin Bratanov
    Marin Bratanov avatar
    5897 posts

    Posted 15 Jun 2012 Link to this post

    Hi Ron,

    Thank you for your report. I am logging the problem in our database for research and you can keep track of its progress in this PITS item. I have also updated your Telerik points. In the meantime what I can suggest is that you get the data in the code-behind and create the series programmatically by using the fields from the dataset, datatable (or whatever object you decide to use), much like it is done in this demo by creating objects dynamically. This will also allow you to set the Name property of the PieSeries Item, e.g.:
    SeriesItem item = new SeriesItem();
    item.Name = nameColumn;
    item.Exploded = explodedColumn;
    item.YValue = valueColumn;
    item.BackgroundColor = colorColumn;

    inside the loop that goes through the data (and, of course, add the items to the series).

    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. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 18 Jun 2012 Link to this post

    Thank you.  In the meantime I have tried implementing the use of code behind to add the series but I continue to get errors indicating "Specified cast is not valid".  Below is my HTML for the chart and the code behind that I have if you could please see where I am going wrong with this.  As a note, I have tried to DirectCast the YValue as a type of decimal and that did not help either.

    <telerik:RadHtmlChart runat="server" ID="QuickGlanceExchTrafficType"
        Width="320" Height="350" Transitions="true">
        <ChartTitle Text="Daily Message Traffic Breakdown">
            <Appearance Align="Center" Position="Top" />
            <Appearance Position="Right" />

    Protected Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init
        Dim chartData As New PieSeries
        chartData.StartAngle = "90"
        chartData.LabelsAppearance.Position = HtmlChart.PieLabelsPosition.Circle
        chartData.LabelsAppearance.DataFormatString = "{0} %"
        chartData.TooltipsAppearance.DataFormatString = "{0} %"
        Dim sqlConn As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("asp_statistics").ConnectionString)
        Dim sqlCmd As SqlCommand = New SqlCommand("GetMetricsQuickGlanceExchTrafficType", sqlConn)
        sqlCmd.CommandType = CommandType.StoredProcedure
        Dim results As SqlDataReader = sqlCmd.ExecuteReader()
        While results.Read
            Dim item As New SeriesItem
            item.Name = results("item")
            item.YValue = results("value")
        End While
    End Sub
  4. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 18 Jun 2012 Link to this post

    I was able to resolve this by casting the field in the SQL storage procedure to a decimal.  Not sure why it would not work casting it in the code behind on the page instead.
Back to Top