Introduction:
Here I will explain asp.net 4.0 chart control examples in c# with database or chart control in asp.net example 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, Ajax and asp.net. Now I explain how to create asp.net chart control from database using c#, vb.net.
Here I will explain asp.net 4.0 chart control examples in c# with database or chart control in asp.net example 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, Ajax and 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
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Asp.Net Chart Example
with database</title>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:Chart ID="Chart1"
runat="server"
>
<Legends>
<asp:Legend Alignment="Center"
Docking="Bottom"
Name="Dotnet
Chart Example" />
</Legends>
<Series>
<asp:Series Name="Series1"
/>
</Series>
<ChartAreas>
<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))
Next
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)
<configuration>
<appSettings>
<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
</appSettings>
<system.webServer>
<handlers>
<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=4.0.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
</handlers>
</system.webServer>
<system.web>
<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>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
assembly="System.Web.DataVisualization,
Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</controls>
</pages>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Design,
Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
<add assembly="System.Web.Extensions.Design,
Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add assembly="System.Windows.Forms,
Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
<add assembly="System.Web.DataVisualization,
Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</assemblies>
</compilation>
</system.web>
</configuration>
|
Demo
 |
Download Sample Code Attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
14 comments :
hello suresh garu.. thanks...
some times overlapping the country names.. how to set......?
Great Article @Suresh.....i was actually looking for chart control examples in c-sharp and found on your website...really helped thanks
Good Topic
Really helps a lot
Wow. Lots of detailed info that could really help! Cheers!
Torsten @ MightyTravels
Very good article and it's working
Very good article
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)
{
Response.Redirect("~/Default.aspx");
}
DateTime fromDate;
DateTime toDate;
String strDomainName = "";
if (ddlDomainName.SelectedIndex > 0)
{
strDomainName = ddlDomainName.SelectedItem.Text.ToString();
}
else
{
strDomainName = lblDomainName.Text;
}
if (txtFromDate.Text != "")
{
fromDate = DateTime.ParseExact(txtFromDate.Text, "dd-MM-yyyy", null);
}
else
{
fromDate = toDate = System.DateTime.Now;
}
if (txtToDate.Text != "")
{
toDate = DateTime.ParseExact(txtToDate.Text, "dd-MM-yyyy", null);
}
else
{
toDate = System.DateTime.Now;
}
ReportBL objReport = new ReportBL();
PagedDataSource rptPager = null;
DataTable dt = null;
try
{
dt = new DataTable();
dt = objReport.USERWISEACCOUNTINGINFORMATIONWITHINBOUNDOUTBOUND(strDomainName, 0, fromDate, toDate);
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)
{
}
}
very very thanx suresh sir
u r great
can i implement this country names outside the pie chart
can i implement this country names outside the pie chart..
so that the names can't over lap wen it is 0..
thank u
Really helpful! You can check shieldui asp.net controls here
https://demos.shieldui.com/aspnet/all-charts
Really helpful thanx.....
Thanks it's really work
Note: Only a member of this blog may post a comment.