Create ASP.Net Chart Control from Database using C# Example

Aspx  Markup

<asp:Chart ID="Chart1" runat="server" Height="300px" Width="400px" Visible = "false">
    <Titles>
        <asp:Title ShadowOffset="3" Name="Items" />
    </Titles>
    <Legends>
        <asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />
    </Legends>
    <Series>
        <asp:Series Name="Default" />
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1" BorderWidth="0" />
    </ChartAreas>
</asp:Chart>

C#


using System.Data;
using System.Data.SqlClient;
using System.Configuration;



private DataTable GetSampleData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("X");
        dt.Columns.Add("Y");
        dt.Rows.Add("1", "3003");
        dt.Rows.Add("2", "72");
        dt.Rows.Add("3", "760");
        dt.Rows.Add("4", "354");
        dt.Rows.Add("5", "180");
        dt.Rows.Add("6", "408");
        dt.Rows.Add("7", "3003");
        dt.Rows.Add("8", "72");
        dt.Rows.Add("9", "760");
        dt.Rows.Add("10", "354");
        dt.Rows.Add("11", "180");
        dt.Rows.Add("12", "408");
        dt.Rows.Add("13", "3003");
        dt.Rows.Add("14", "72");
        dt.Rows.Add("15", "760");
        dt.Rows.Add("16", "354");
        dt.Rows.Add("17", "180");
        dt.Rows.Add("18", "408");
        dt.Rows.Add("19", "3003");
        dt.Rows.Add("20", "72");
        dt.Rows.Add("21", "760");
        dt.Rows.Add("22", "354");
        dt.Rows.Add("23", "180");
        dt.Rows.Add("24", "408");
        dt.Rows.Add("25", "3003");
        dt.Rows.Add("26", "72");
        dt.Rows.Add("27", "760");
        dt.Rows.Add("28", "354");
        dt.Rows.Add("29", "180");
        dt.Rows.Add("30", "408");    
        return dt;
    }


protected void Page_Load(object sender, EventArgs e)
   {
     Chart1.Visible = true;

      DataTable dt = GetSampleData();
        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]);
        }
        Chart1.Series[0].Points.DataBindXY(x, y);
        Chart1.Series[1].Points.DataBindXY(x, y);
       // Chart1.Series[0].ChartType = SeriesChartType.Bar;
       // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
        Chart1.Legends[0].Enabled = true;

}

Web.Config Modifications


<configuration>
    <appSettings>
        <addkey="ChartImageHandler"value="storage=file;timeout=20;" />
    </appSettings>
    <connectionStrings>
        <addname="conString"
        connectionString="Data Source=.\SQL2005;database=Northwind;Integrated Security=true"/>
    </connectionStrings>

    <system.web>
        <compilationdebug="true"targetFramework="4.0">
            <assemblies>
                <addassembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            </assemblies>
        </compilation>
        <httpHandlers>
            <addpath="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>
        <pages>
            <controls>
                <addtagPrefix="asp"namespace="System.Web.UI.DataVisualization.Charting"assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            </controls>
        </pages>
    </system.web>
    <system.webServer>
        <handlers>
            <removename="ChartImageHandler"/>
            <addname="ChartImageHandler"preCondition="integratedMode"verb="GET,HEAD,POST"path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

        </handlers>
    </system.webServer>
</configuration>