In
this article I am going to explain how to create column chart using Chart
control in asp.net.
In
previous article I have explained how to use Google document viewer in asp.net,
Dateadd function of Sql server and how to count number of Tables, Views, Storeprocedures and Triggers in a sql server database.
Implementation:
I
am using chart control to draw column chart.
I
have created a table Tb_Population
and insert some dummy data.
Id
|
int
|
StateName
|
varchar(200)
|
TotalPopulation
|
bigint
|
HTML Markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Statewise
Population</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server" Width="800px">
<Series>
<asp:Series Name="TotalPopulation" IsValueShownAsLabel="True" LabelFormat="F0"
Legend="Legend1"></asp:Series>
<asp:Series ChartArea="ChartArea1" LabelFormat="F0"
IsValueShownAsLabel="True" Legend="Legend1"
Name="StateName"></asp:Series>
</Series>
<Titles>
<asp:Title Font="Open Sans, 12pt, style=Bold" Name="title1"
Text="Statewise
Population"/>
</Titles>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
Import the
namespace
C#:
using
System.Configuration;
using
System.Data.SqlClient;
using
System.Data;
using
System.Web.UI.DataVisualization.Charting;
using
System.Drawing;
VB:
Imports
System.Data
Imports
System.Data.SqlClient
Imports
System.Configuration
Imports
System.Web.UI.DataVisualization.Charting
Imports
System.Drawing
Create
Connection
C#:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
VB:
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
Draw chart
Create
function to bind chart and call it on page load event.
C#:
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindChart();
}
}
public void BindChart()
{
try
{
SqlDataAdapter
adp = new SqlDataAdapter("Select StateName,TotalPopulation from
Tb_Population", con);
DataTable
dt = new DataTable();
adp.Fill(dt);
for
(int i = 0; i < dt.Rows.Count; i++)
{
Chart1.Series["TotalPopulation"].Points.Add(new DataPoint(i,
dt.Rows[i]["TotalPopulation"].ToString().Trim()));
Chart1.Series[0].Points[i].AxisLabel = dt.Rows[i]["StateName"].ToString().Trim();
}
foreach
(Series charts in
Chart1.Series)
{
int
i = 0;
foreach
(DataPoint point in
charts.Points)
{
point.Label = string.Format("{0:0}",
point.YValues[0]);
if
(i % 2 == 0)
{
Color colour = ColorTranslator.FromHtml("#CD5C5C");
point.Color = colour;
}
else
{
Color colour = ColorTranslator.FromHtml("#bfbfbf");
point.Color = colour;
}
i++;
}
}
}
catch (Exception ex)
{
}
}
VB:
Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As
System.EventArgs) Handles
Me.Load
If Not IsPostBack Then
BindChart()
End If
End Sub
Public Sub BindChart()
Try
Dim
adp As New SqlDataAdapter("Select
StateName,TotalPopulation from Tb_Population", con)
Dim
dt As New DataTable()
adp.Fill(dt)
For
i As Integer =
0 To dt.Rows.Count - 1
Chart1.Series("TotalPopulation").Points.Add(New DataPoint(i,
dt.Rows(i)("TotalPopulation").ToString().Trim()))
Chart1.Series(0).Points(i).AxisLabel = dt.Rows(i)("StateName").ToString().Trim()
Next
For
Each charts As Series In
Chart1.Series
Dim
i As Integer =
0
For Each point As DataPoint In
charts.Points
point.Label = String.Format("{0:0}",
point.YValues(0))
If
i Mod 2 = 0 Then
Dim colour As Color = ColorTranslator.FromHtml("#CD5C5C")
point.Color = colour
Else
Dim colour As Color = ColorTranslator.FromHtml("#bfbfbf")
point.Color = colour
End
If
i += 1
Next
Next
Catch
ex As Exception
End Try
End Sub
Result:
No comments:
Post a Comment