How to create pie chart in using chart control - ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

How to create pie chart in using chart control

In this article I am going to explain how to create pie chart in using chart control.

How to create pie chart in using chart control

I want to create a pie chart to show the state wise population in percentage. I am using chart control to create pie chart.

I have created table Tb_Population and insert some dummy records.

Add a webform to project. Drag and drop the chart control from toolbox to webform.

HTML Markup:

<html xmlns="">
<head runat="server">
    <form id="form1" runat="server">
       <asp:Chart ID="Chart1" runat="server" Width="800px">        
                <asp:Legend Alignment="Center" Docking="Left" IsTextAutoFit="true" Name="StateName" LegendStyle="Table"/>
                <asp:Series Name="Series1" ChartType="Pie"
                    CustomProperties="PieLineColor=Black, PieLabelStyle=Outside">                               
                <asp:ChartArea Name="ChartArea1">                 
                    <Area3DStyle Enable3D="True" Inclination="0" Rotation="0" />

Import the namespace:

C# Code:
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.DataVisualization.Charting; Code:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.UI.DataVisualization.Charting

Create a method to retrieve data from database and show in Chart control.

C# Code
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    public void BindChart()
            SqlDataAdapter adp = new SqlDataAdapter("Select StateName,TotalPopulation from Tb_Population", con);
            DataTable dt = new DataTable();
            string[] x = new string[dt.Rows.Count];
            int[] y = new int[dt.Rows.Count];
            for (int i = 0; i < dt.Rows.Count; i++)
                x[i] = dt.Rows[i][0].ToString();
                y[i] = Convert.ToInt32(dt.Rows[i][1]);
            foreach (Series s in Chart1.Series)
                s.ToolTip = "State: #VALX\nPopulation: #VALY\nPercentage: #PERCENT";
            Chart1.Series[0].Points.DataBindXY(x, y);
            Chart1.Series[0].Label = "#PERCENT";
            Chart1.Series[0].LegendText = "#AXISLABEL";        
        catch (Exception ex)
    } Code:
   Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
        End If
    End Sub
    Public Sub BindChart()
            Dim adp As New SqlDataAdapter("Select StateName,TotalPopulation from Tb_Population", con)
            Dim dt As New DataTable()
            Dim x As String() = New String(dt.Rows.Count - 1) {}
            Dim y As Integer() = New Integer(dt.Rows.Count - 1) {}
            For i As Integer = 0 To dt.Rows.Count - 1
                x(i) = dt.Rows(i)(0).ToString()
                y(i) = Convert.ToInt32(dt.Rows(i)(1))
            For Each s As Series In Chart1.Series
                s.ToolTip = "State: #VALX" & vbLf & "Population: #VALY" & vbLf & "Percentage: #PERCENT"
            Chart1.Series(0).Points.DataBindXY(x, y)
            Chart1.Series(0).Label = "#PERCENT"
            Chart1.Series(0).LegendText = "#AXISLABEL"
        Catch ex As Exception
        End Try
    End Sub

Build the application and run. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.


How to find chart control from Toolbox ?
Because i dont have any such tool .

On which framework you are working? Chart control is not a standard feature control of .NET 3.5, later version already has chart control.