Asp.Net Chart Control Example in C#, VB.NET with Database: June 2014

Introduction:

Here I will explain asp.net 4.0 chart control examples in c# with database or chart control in asp.netexample with database using c#, vb.net or asp.net pie chart example in c#, vb.net with database.

Description:

In previous articles I explained jQuery Google pie chart example in asp.net, Ajax Pie chart example in asp.net with database, jQuery change image on mouse over, jQuery show alert message before leaving from webpage, jQuery drag and drop gridview rows in asp.net and many articles related to jQuery, Ajaxand asp.net. Now I explain how to create asp.net chart control from database using c#, vb.net.

First design table one table countrydetails in your database like as shown below

Column Name	Data Type	Allow Nulls
ID	Int(set identity property=true)	No
name	Varchar(50)	no
value	Int	no

Once we create table we need to enter some dummy data for our application purpose

To use asp.net chart controls first create one new web application after that drag and drop chart control from toolbox to your page like as shown below

Once you drag and drop chart control in your page set properties to chart control as per your requirement like as shown below

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Asp.Net Chart Example with database</title>

</head>

<body>

<div>

<asp:Chart ID="Chart1" runat="server" >

<asp:Legend Alignment="Center" Docking="Bottom" Name="Dotnet Chart Example" />

</Legends>

<asp:Series Name="Series1" />

</Series>

<asp:ChartArea Name="ChartArea1" />

</ChartAreas>

</asp:Chart>

</div>

</form>

</body>

</html>

C# Code

In code behind add the following namespaces

using System;

using System.Data;

using System.Data.SqlClient;

using System.Web.UI.DataVisualization.Charting;

After adding namespaces write the following code in page load

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

{

DataTable dt = new DataTable();

using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))

{

con.Open();

SqlCommand cmd = new SqlCommand("select name,total=value from countrydetails order by total desc", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(dt);

con.Close();

}

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);

}

VB.NET Code

Imports System.Data

Imports System.Data.SqlClient

Imports System.Web.UI.DataVisualization.Charting

Partial Class VBCode

Inherits System.Web.UI.Page

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not IsPostBack Then

Dim dt As New DataTable()

Using con As New SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB")

con.Open()

Dim cmd As New SqlCommand("select name,total=value from countrydetails order by total desc", con)

Dim da As New SqlDataAdapter(cmd)

da.Fill(dt)

con.Close()

End Using

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))

Chart1.Series(0).Points.DataBindXY(x, y)

End If

End Sub

End Class

Once you complete coding open your web.config file that will contain code like as shown below (Note: no need to write any code in web.config file once we drag and drop chart control automatically this code will added to your web.config file)

</appSettings>

<system.webServer>

<add name="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>

<system.web>

<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>

<pages>