In
this article I am going to explain how to set alternative color of column in column
chart in asp.net chart control.
In
previous article I have explained how to create column chart using Chartcontrol in asp.net, how to use Google document viewer in asp.net, Dateaddfunction of Sql server and how to number of Tables, Views, Store procedures andTriggers in a sql server database.
Implementation:
I
am using chart control to draw column chart and set alternative color of column.
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
.png)
No comments:
Post a Comment