MS Chart Control in Asp .Net

 Hi in this post we are going to see "How to user Chart Control in asp.Net".For this tutorial I am using NorthWnd database "Orders" Table.To download NorthWnd database follow this link.


Html and Asp Tag:

The following code contains Html tag with Asp:Chart controls.I am going to display bar,pie and area chart.

<form id="form1" runat="server">
    <div class="w3-container w3-margin-left w3-margin-top">
        <div class="w3-row">
            <div class="w3-col m12">
                <h2 class="w3-center">Chart Control Example</h2>
                <hr />
            </div>
        </div>
        <br />
        <br />
        <div class="w3-row">
            <div class="w3-col m4 w3-center">
                <asp:Chart ID="Chart1" runat="server" CssClass="w3-card-4">
                    <Legends>
                        <asp:Legend Alignment="Center" Docking="Bottom" Name="Chart Example">
                        </asp:Legend>
                    </Legends>
                    <Series>
                        <asp:Series Name="Series1">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                        </asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
            </div>
            <div class="w3-col m4 w3-center">
                <asp:Chart ID="Chart2" runat="server" CssClass="w3-card-4">
                    <Series>
                        <asp:Series Name="Series1" ChartType="Pie">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                        </asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
            </div>
            <div class="w3-col m4">
                <asp:Chart ID="Chart3" runat="server" CssClass="w3-card-4">
                    <Series>
                        <asp:Series Name="Series1" ChartType="Area">
                        </asp:Series>
                    </Series>
                    <ChartAreas>
                        <asp:ChartArea Name="ChartArea1">
                        </asp:ChartArea>
                    </ChartAreas>
                </asp:Chart>
            </div>
        </div>
   
    </div>
    </form>

ConnectionString:

<connectionStrings>
    <add name="ConnectionString" connectionString="Data Source=(local);Initial Catalog=NORTHWND;Integrated Security=SSPI;"/>

  </connectionStrings>

Code Behind:

Following code contains method bar,pie and area chart.

protected void Page_Load(object sender, EventArgs e)
    {
        if((!IsPostBack))
        {
            BindChart();
            BindPieChart();
            BindAreaChart();
        }
    }

    private void BindChart()
    {
        string sConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        SqlConnection conn = new SqlConnection(sConnectionString);
        string sqlQuery = "SELECT Top 10 count(OrderID)as TotalOrder,ShipCity FROM Orders group by ShipCity";
        SqlCommand cmd = new SqlCommand(sqlQuery,conn);
        DataTable dt = new DataTable();
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        sda.Fill(dt);
        int[] yPoint = new int[dt.Rows.Count];
        string[] xPoint = new string[dt.Rows.Count];
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            yPoint[i] = Convert.ToInt32(dt.Rows[i][0]);
            xPoint[i] = dt.Rows[i][1].ToString();
        }
        Chart1.Series[0].Points.DataBindXY(xPoint, yPoint);
    }//End

    private void BindPieChart()
    {
        string sConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        SqlConnection conn = new SqlConnection(sConnectionString);
        string sqlQuery = "SELECT Top 10 count(OrderID)as TotalOrder,ShipCity FROM Orders group by ShipCity";
        SqlCommand cmd = new SqlCommand(sqlQuery, conn);
        DataTable dt = new DataTable();
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        sda.Fill(dt);
        int[] yPoint = new int[dt.Rows.Count];
        string[] xPoint = new string[dt.Rows.Count];
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            yPoint[i] = Convert.ToInt32(dt.Rows[i][0]);
            xPoint[i] = dt.Rows[i][1].ToString();
        }    
        Chart2.Series[0].Points.DataBindXY(xPoint, yPoint);  
    }

    private void BindAreaChart()
    {
        string sConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        SqlConnection conn = new SqlConnection(sConnectionString);
        string sqlQuery = "SELECT Top 10 count(OrderID)as TotalOrder,ShipCity FROM Orders group by ShipCity";
        SqlCommand cmd = new SqlCommand(sqlQuery, conn);
        DataTable dt = new DataTable();
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        sda.Fill(dt);
        int[] yPoint = new int[dt.Rows.Count];
        string[] xPoint = new string[dt.Rows.Count];
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            yPoint[i] = Convert.ToInt32(dt.Rows[i][0]);
            xPoint[i] = dt.Rows[i][1].ToString();
        }
        Chart3.Series[0].Points.DataBindXY(xPoint, yPoint);

    }

Output:

Download Source Code

Source Code