Pie Chart

Thread is closed for posting
6 posts, 1 answers
  1. Kyle
    Kyle avatar
    10 posts
    Member since:
    Apr 2013

    Posted 09 Aug 2013 Link to this post

    Hi Telerik

    I have till now done 3 bar charts using your new HTML5 charts. All is going well and i have been following your examples which have helped me lots.  Though i am currently at a dead stop.

    Till now, the bar charts always had a series databound item (coming from a stored procedure) and also the x-axis.  They both have a column from the table that the SP is calling and it simply picks up the data and plots.

    Now, i am trying to do a pie chart and it only asks for the y (one column). And i cant understand or find an example whereby i need 2 columns in this chart (sort of like x/y axis).  Right now, it binds and it fills the pie chart but with just one column. I need to put another value in that same chart (from another column coming from a Stored procedure) that will also render both values on the same chart.

    Thanks.
    Kyle


    Update.
    I have eliminated the use of Stored Procedure and DataSourceID in the chart. Im now loading the data manually from the behind and created the object.  In the DataFieldY, i placed the property. So i basically have something like this:
    <Series>
              <telerik:PieSeries StartAngle="0" DataFieldY="NotPA">
                       <LabelsAppearance DataFormatString="no tPA {0}%" Position="Circle" />
                          <TooltipsAppearance BackgroundColor="Red" DataFormatString="no tPA {0}%"/>                        <Appearance FillStyle-BackgroundColor="Red" />
                        </telerik:PieSeries>
     
                        <telerik:PieSeries StartAngle="190" DataFieldY="TPA">
                            <LabelsAppearance DataFormatString="tPA {0}%" Position="Circle" />
                            <TooltipsAppearance BackgroundColor="Yellow" DataFormatString="tPA {0}%"/>
                            <Appearance FillStyle-BackgroundColor="Yellow" />
                        </telerik:PieSeries>
    </Series>

    Now the data is being loaded as is in the database. Though the problem is that it is showing one color. And its not even taking the first color, its just always staying Olive. (Please see attached).  Now, if i hard code values and change the color, all works. Its only on dynamic values.

    Can someone please explain to me how this works? I have thought myself and managed to work with bar charts and line charts. Managed from that point of view. Though for a simple pie chart, i cant understand what i am doing wrong.

    thanks.

    Kyle
  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 14 Aug 2013 Link to this post

    Hi Kyle,

    If you want to display data in a Line or Bar chart, it seems reasonable to have more than one series (even mix between them). However, the proper way to use a Pie chart is to create only one PieSeries and populate it with the necessary data items. This usage is demonstrated in both our Pie chart demo and our help article. Could you modify your example so that it uses one PieSeries and inform me if you need any further assistance on the case?

    Regards,
    Stamo Gochev
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kyle
    Kyle avatar
    10 posts
    Member since:
    Apr 2013

    Posted 14 Aug 2013 Link to this post

    Hi.

    Thanks for your reply I honestly concluded that i may be structuring the data wrongly.  I never created pie charts so i assumed that it would be the same way as the other charts.

    Though thanks for the link i will also look into it.

    regards,
    Kyle
  5. Kyle
    Kyle avatar
    10 posts
    Member since:
    Apr 2013

    Posted 16 Aug 2013 Link to this post

    Hi.  I have amended the data. I am now loading the chart.  I just have 2 more queries. 1 of them is more of an issue. The other would be a nice to have.

    1. Currently, I am loading 9 different values in the Pie Chart.  The control is specifying what colors to give it itself.  Is there an even or a way to override the default colors and define a set of colors to my 9 different values myself?

    2. (The nice to have).  I am picking up percentages right from a table.  I tried creating a property to return a string and the value and i gave the pie chart this string property though didnt work what so ever. It just displayed funny cause of some null value it was getting. Once i then gave it a property that only loads integers, it was fine.

    Thus, is there a way to also display strings (like in your hard coded example - I basically need something like this, though pickin up data dynamically from a stored procedure or from the code behind).

    thanks.

    Kyle
  6. Answer
    Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 20 Aug 2013 Link to this post

    Hello Kyle,

    If you want to set the color of an individual item created programmatically (in the code-behind), you can use the BackgroundColor property like this:
    PieSeriesItem pieItem = new PieSeriesItem();
    pieItem.Y = 10;
    pieItem.BackgroundColor = Color.Yellow;
    You can also use the Add method of the SeriesItems collection:
    PieSeries pie = new PieSeries();
    pie.SeriesItems.Add(10, Color.Blue);
    If your chart is data bound, you can take advantage of the ColorField property
    <telerik:PieSeries DataFieldY="yValue" ColorField="colorValue"></telerik:PieSeries>
    You can find more information about colors in our Custom Item Colorization article.

    Regarding your second question - the idea of the RadHtmlChart is to display numeric data, so a good place to display strings is in the PieSeries' labels or tooltips. This means that you could use the DataField property of the LabelsAppearance like this:
    <telerik:PieSeries DataFieldY="yValue" ColorField="colorValue">
        <LabelsAppearance DataField="colorValue"></LabelsAppearance>
    </telerik:PieSeries>
    I also attach a sample page where I demonstrate the above suggestions. Could you have a look at it and inform me if you could apply them in your case?

    Regards,
    Stamo Gochev
    Telerik
    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 the blog feed now.
  7. Kyle
    Kyle avatar
    10 posts
    Member since:
    Apr 2013

    Posted 20 Aug 2013 Link to this post

    Thank you so much.  I have achieved everything that i wanted :) :) 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017