Ajax toolkit Pie Chart Demo Example in Asp.Net

Leave a Comment
In this tutorial, we have to learn how to add ASP.Net AJAX Pie Chart Control and also how to bind Data to Pie Chart from Database.

First add Ajax Control toolkit reference to your asp.net  project.

In next step you have to add pie chart control as shown below code -
<ajaxToolkit:PieChart ID="pieChart_Point" runat="server" ChartHeight="350" ChartWidth="750"
                ChartTitle="" BorderWidth="0" ChartTitleColor="#333">
                <PieChartValues>
               
                </PieChartValues>
            </ajaxToolkit:PieChart>

In next step how to bind Data from database.

Add below code to bind data from database to pie chart.
SqlConnection con = new SqlConnection();
            DataSet ds = new DataSet();
            SqlCommand com = new SqlCommand("Select * From CountryTable",con);
            SqlDataAdapter sdt = new SqlDataAdapter(com);
            sdt.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
            {
                pieChart_Point.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
                {
                    Category = "India Population",
                    Data = Convert.ToInt32(ds.Tables[0].Rows[0]["India"]),
                    PieChartValueColor = "#6C1E83",
                    PieChartValueStrokeColor = "#000"
                });
                pieChart_Point.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
                    {
                        Category = "US Population",
                        Data = Convert.ToInt32(ds.Tables[0].Rows[0]["US"]),
                        PieChartValueColor = "#D08AD9",
                        PieChartValueStrokeColor = "#000"
                    });
                pieChart_Point.PieChartValues.Add(new AjaxControlToolkit.PieChartValue
                {
                    Category = "UK Population",
                    Data = Convert.ToInt32(ds.Tables[0].Rows[0]["UK"]),
                    PieChartValueColor = "#09C",
                    PieChartValueStrokeColor = "#000"
                });
               
        }

Note - Must Bind three or more value otherwise Pie Chart doesn't render correctly. In this demo we have bind three values.

Done!

Demo
Ajax toolkit Pie Chart Demo Example in Asp.Net

0 comments:

Post a Comment