aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

Jun 23, 2014

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


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

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

Column Name
Data Type
Allow Nulls
Int(set identity property=true)

Once we create table we need to enter some dummy data for our application purpose
To use 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=, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">
<title>Asp.Net Chart Example with database</title>
<form id="form1" runat="server">
<asp:Chart ID="Chart1" runat="server" >
<asp:Legend Alignment="Center" Docking="Bottom" Name="Dotnet Chart Example" />
<asp:Series Name="Series1" />
<asp:ChartArea Name="ChartArea1" />
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)
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB"))
SqlCommand cmd = new SqlCommand("select name,total=value from countrydetails order by total desc", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
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]);

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")
Dim cmd As New SqlCommand("select name,total=value from countrydetails order by total desc", con)
Dim da As New SqlDataAdapter(cmd)
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)

<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
<remove name="ChartImageHandler" />
<add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
validate="false" />
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
assembly="System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
<compilation debug="true" targetFramework="4.0">
<add assembly="System.Design, Version=, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
<add assembly="System.Web.Extensions.Design, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add assembly="System.Windows.Forms, Version=, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
<add assembly="System.Web.DataVisualization, Version=, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>

Download Sample Code Attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Unknown said...

hello suresh garu.. thanks...

some times overlapping the country names.. how to set......?

Unknown said...

Great Article @Suresh.....i was actually looking for chart control examples in c-sharp and found on your website...really helped thanks

Dot Net Questions said...

Good Topic

Parvesh said...

Really helps a lot

Torsten said...

Wow. Lots of detailed info that could really help! Cheers!

Torsten @ MightyTravels

M John Batcha said...

Very good article and it's working

Unknown said...

Very good article

Unknown said...

hello sir i am using ms chart control in my application with oracle database but my problem is that my values is coming from table but my chart is not displaying on browser.
my code is that
public void bindChartDetail()

objUser = (UserEntity)Session["User"];

if (objUser == null)
DateTime fromDate;
DateTime toDate;
String strDomainName = "";

if (ddlDomainName.SelectedIndex > 0)
strDomainName = ddlDomainName.SelectedItem.Text.ToString();

strDomainName = lblDomainName.Text;

if (txtFromDate.Text != "")
fromDate = DateTime.ParseExact(txtFromDate.Text, "dd-MM-yyyy", null);

fromDate = toDate = System.DateTime.Now;

if (txtToDate.Text != "")

toDate = DateTime.ParseExact(txtToDate.Text, "dd-MM-yyyy", null);

toDate = System.DateTime.Now;

ReportBL objReport = new ReportBL();
PagedDataSource rptPager = null;
DataTable dt = null;
dt = new DataTable();

DataTable dt1 = dt.AsEnumerable().Reverse().Take(4).CopyToDataTable();
DateTime[] XPointMember = new DateTime[dt1.Rows.Count];
int[] YPointMember = new int[dt1.Rows.Count];
if (dt1 != null)

for (int count = 0; count < dt1.Rows.Count; count++)
YPointMember[count] = Convert.ToInt32(dt1.Rows[count]["INBOUND"]);
XPointMember[count] = Convert.ToDateTime(dt1.Rows[count]["connectdatetime"]);

Chart1.Series[0].Points.DataBindXY(YPointMember, XPointMember);
Chart1.Series[0].BorderWidth = 1;
Chart1.ChartAreas[0].AxisX.LabelStyle.Format = "HH:mm:ss.fff";
Chart1.Series[0].ChartType = SeriesChartType.Line;
Chart1.ChartAreas[0].AxisX.Interval = 2;
Chart1.ChartAreas[0].AxisX.IntervalType = DateTimeIntervalType.Hours;



catch (Exception ex)

Sarkariselection said...

very very thanx suresh sir
u r great

Anonymous said...

can i implement this country names outside the pie chart

Anonymous said...

can i implement this country names outside the pie chart..
so that the names can't over lap wen it is 0..
thank u

Unknown said...

Really helpful! You can check shieldui controls here

Anonymous said...

Really helpful thanx.....

Anonymous said...

Thanks it's really work

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.