Create Chart using ASP.net

Here is the example, how to create different types of chart in ASP.net using ASP.net Chart. It’s very simple here are some steps we need to do:
·         Drag Chart control from ToolBox  inside Data Container
·         There might be chances there would not be HttpHandler for ASP.Net chart to do so just add the code in your web.config
 <httpHandlers>
      <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        validate="false" />
   </httpHandlers>

Here is your .aspx code:
   Select Chart Type-
    <asp:DropDownList ID="ddlChartType" runat="server" OnSelectedIndexChanged="BindChartWithType" AutoPostBack="true">
    <asp:ListItem Value="Doughnut">Doughnut</asp:ListItem>
    <asp:ListItem Value="Funnel">Funnel</asp:ListItem>
    <asp:ListItem Value="Line">Line</asp:ListItem>
    <asp:ListItem Value="Pie">Pie</asp:ListItem>
    <asp:ListItem Value="Bar">Bar</asp:ListItem>
    <asp:ListItem Value="Column">Column</asp:ListItem>
    </asp:DropDownList>
    <div>
    <asp:chart ID="Chart1" runat="server" Width="400px" Height="350px" ><Series><asp:Series Name="Series1" ToolTip="Client: #VALX Amount: #VALY" ></asp:Series></Series><ChartAreas><asp:ChartArea Name="ChartArea1"></asp:ChartArea></ChartAreas></asp:chart>
    </div>

Here is your .CS code
.CS code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.UI.DataVisualization.Charting;
using System.Data;

public partial class ASPChartExample : System.Web.UI.Page
{
    SqlConnection dbconn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindASPChart(ddlChartType.SelectedValue);
        }
    }



    protected void BindASPChart (string chartType)
    {
        DataTable dt = new DataTable();
        dbconn.Open();
        string cmdstr = "SELECT ClientName, sum(Cost) as Cost FROM mProject GROUP BY ClientName ORDER BY sum(Cost) DESC";
        SqlDataAdapter adp = new SqlDataAdapter(cmdstr, dbconn);
        adp.Fill(dt);
        string[] x = new string[dt.Rows.Count];
        double[] y = new double[dt.Rows.Count];
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            x[i] = dt.Rows[i][0].ToString();
            y[i] = Convert.ToDouble(dt.Rows[i][1]);
        }
        Chart1.Series[0].Points.DataBindXY(x, y);

        switch (chartType)
        {
            case "Doughnut":
                Chart1.Series[0].ChartType = SeriesChartType.Doughnut;
                Chart1.Series["Series1"]["PieLabelStyle"] = "outside";
                break;
            case "Funnel":
                Chart1.Series[0].ChartType = SeriesChartType.Funnel;
                Chart1.Series["Series1"]["FunnelLabelStyle"] = "outside";
                break;
            case "Line":
                Chart1.Series[0].ChartType = SeriesChartType.Line;
                break;
            case "Pie":
                Chart1.Series[0].ChartType = SeriesChartType.Pie;
                Chart1.Series["Series1"]["PieLabelStyle"] = "outside";
                break;
            case "Bar":
                Chart1.Series[0].ChartType = SeriesChartType.Bar;
                break;
            case "Column":
                Chart1.Series[0].ChartType = SeriesChartType.Column;
                break;
        }
        Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
    }


I hope you will enjoy the post, feel free for any type of feedback and suggestions.

Comments