asp.net甜甜圈图telerik数据绑定

Question

I'm developing a web application on webforms. On the client's dashboard, I've used telerik charts (Donut). It works on default coding which I see on the telerik website but I need to know how to bind sql server data on that chart.

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-containers">
    <div class="demo-container">
        <telerik:RadHtmlChart runat="server" ID="DonutChart1" Width="520" Height="500" Transitions="true" Skin="Silk">
            <ChartTitle Text="OS Usage Statistics for December 2012">
                <Appearance Align="Center" Position="Top">
                </Appearance>
            </ChartTitle>
            <Legend>
                <Appearance Position="Right" Visible="true">
                </Appearance>
            </Legend>
            <PlotArea>
                <Series>
                    <telerik:DonutSeries StartAngle="90" HoleSize="65">
                        <LabelsAppearance Position="Center" DataFormatString="{0} %" Visible="true"></LabelsAppearance>
                        <TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
                        <SeriesItems>
                            <telerik:PieSeriesItem BackgroundColor="#00adcc" Exploded="false" Name="Win7" Y="55.6"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#cccccc" Exploded="false" Name="Win8" Y="2.5"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#999999" Exploded="false" Name="Vista" Y="2.8"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#888888" Exploded="false" Name="NT" Y="1.8"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#777777" Exploded="false" Name="WinXP" Y="21.1"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#666666" Exploded="false" Name="Linux" Y="4.7"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#555555" Exploded="false" Name="Mac" Y="8.7"></telerik:PieSeriesItem>
                            <telerik:PieSeriesItem BackgroundColor="#444444" Exploded="false" Name="Mobile" Y="2.2"></telerik:PieSeriesItem>
                        </SeriesItems>
                    </telerik:DonutSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    </div>
</div>

<telerik:RadAjaxManager runat="server" ID="theAjaxMaanger">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="demoConfigurator">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="demoConfigurator" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="DonutChart1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Skin="Silk">
</telerik:RadAjaxLoadingPanel>

Please see that reference website: http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/donutchart/defaultcs.aspx

public void donutfill()
{
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
    con.Open();
    SqlDataReader myReader = null;
    SqlCommand myCommand = new SqlCommand("select ( select sum([Budget Estimates 2017-18]) AS [FUNDWISE] from [dbo].[budgetbook-17-18] where Fund = '" + scnum.Text + "' ) , sum([Budget Estimates 2017-18]) as [costwise] from [dbo].[budgetbook-17-18] where Cost_ctr ='" + costcenter.Text + "'", con);

    myReader = myCommand.ExecuteReader();

    while (myReader.Read())
    {
        string totalfund;
        string totalcostbudget;
        totalfund = (myReader[0].ToString());
        totalcostbudget = (myReader[1].ToString());
        //Convert.ToDouble(totalcostbudget) / Convert.ToDouble(totalfund) * 360 = a;
        a = Convert.ToDouble(totalcostbudget);
        b = Convert.ToDouble(totalfund);
        piecostbudget = a / b * 100;
    }

    Double piefirst = pie100 - piecostbudget;
    Math.Round(piecostbudget);
    Math.Round(piefirst);
    con.Close();
} 

The 2 things that need to show on donut are:

1) piecostbudget

2) piefirst

Answer 1

there is two ways to approuch.

1. Client side

Looking at the link you provided I found this code :

    <%@ Page Language="C#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT [Year], [Value] FROM [Data] WHERE ([Subcategory_Id] = 1)"></asp:SqlDataSource>
    <div class="demo-container size-wide">
        <telerik:RadHtmlChart runat="server" Width="800px" Height="500px" ID="RadHtmlChart1"
            DataSourceID="SqlDataSource1">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries DataFieldY="Value" Name="Electricity Consumption">
                        <TooltipsAppearance Color="White" />
                    </telerik:ColumnSeries>
                </Series>
                <XAxis DataLabelsField="Year">
                    <LabelsAppearance RotationAngle="75">
                    </LabelsAppearance>
                    <TitleAppearance Text="Year">
                    </TitleAppearance>
                </XAxis>
                <YAxis>
                    <TitleAppearance Text="MWh">
                    </TitleAppearance>
                </YAxis>
            </PlotArea>
            <Legend>
                <Appearance Visible="false">
                </Appearance>
            </Legend>
            <ChartTitle Text="Electricity Consumption">
            </ChartTitle>
        </telerik:RadHtmlChart>
    </div>
    </form>
</body>
</html>

This Code is using a sql query to databind the chart. In this case they are creating a bar chart but the key things to take in are:

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
    SelectCommand="SELECT [Year], [Value] FROM [Data] WHERE ([Subcategory_Id] = 1)"></asp:SqlDataSource>

and then this :

<telerik:RadHtmlChart runat="server" Width="800px" Height="500px" ID="RadHtmlChart1"
            DataSourceID="SqlDataSource1">

2. Server side If you need to do this in the code behind you can use OnPreRender="DonutChart1_PreRender" inside of your <telerik:RadHtmlChart runat="server" ID="DonutChart1" Width="520" Height="500" Transitions="true" Skin="Silk">

then create a method where you can then do your sql and databinding like so :

protected void DonutChart1_PreRender(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString);
            con.Open();
            SqlDataReader myReader = null;
            SqlCommand myCommand = new SqlCommand("select ( select sum([Budget Estimates 2017-18]) AS [FUNDWISE] from [dbo].[budgetbook-17-18] where Fund = '" + scnum.Text + "' ) , sum([Budget Estimates 2017-18]) as [costwise] from [dbo].[budgetbook-17-18] where Cost_ctr ='" + costcenter.Text + "'", con);

            myReader = myCommand.ExecuteReader();

            while (myReader.Read())
            {
                string totalfund;
                string totalcostbudget;
                totalfund = (myReader[0].ToString());
                totalcostbudget = (myReader[1].ToString());
                //Convert.ToDouble(totalcostbudget) / Convert.ToDouble(totalfund) * 360 = a;
                a = Convert.ToDouble(totalcostbudget);
                b = Convert.ToDouble(totalfund);
                piecostbudget = a / b * 100;
            }

            Double piefirst = pie100 - piecostbudget;
            Math.Round(piecostbudget);
            Math.Round(piefirst);


            RadHtmlChart1.Datasource = //your values
            RadHtmlchart1.Databound();
            con.Close();
        }

I used this link to find this information : http://demos.telerik.com/aspnet-ajax/htmlchart/examples/databinding/entitydatasource/defaultcs.aspx