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

Pie Chart with SQL data source

4 Answers 488 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 20 Sep 2015, 06:15 PM

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>

4 Answers, 1 is accepted

Sort by
0
Niko
Telerik team
answered on 23 Sep 2015, 04:31 PM
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
0
Tomica
Top achievements
Rank 2
answered on 26 Sep 2015, 08:39 PM

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>

0
Accepted
Danail Vasilev
Telerik team
answered on 30 Sep 2015, 12:47 PM
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
0
Tomica
Top achievements
Rank 2
answered on 30 Sep 2015, 04:31 PM

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.

Tags
Chart (HTML5)
Asked by
Tomica
Top achievements
Rank 2
Answers by
Niko
Telerik team
Tomica
Top achievements
Rank 2
Danail Vasilev
Telerik team
Share this question
or