In this article
I’m going to explain how to create multi column or multi series bar chart from
database in ASP.NET using C#.
The Chart
controls enable you to create ASP.NET pages with simple, intuitive, and
visually compelling charts for complex statistical or financial analysis
A Chart is made up of one or more series. Normally,
each series would be a single line or column etc. The design of the charting
system is very flexible, so a custom series can basically be anything it wants
to be. In order to be this flexible, the chart looks at the series definitions
to help determine the axis details and range. Then it goes through the defined
series and has them draw themselves.
If you want to create
multi series bar chart you could follow the steps given below.
Step-1:
First drag and drop Chart control from ToolBox. In web.config file changes will
be made after drag and drop Chart control. We don’t need to configure
web.config file manually.
Sample code(web.config):
<?xml version="1.0"?>
<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.Web.DataVisualization, Version=4.0.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35"/></assemblies></compilation>
</system.web>
</configuration>
Step-2:
Then we have to modify Chart control like this
Designer source code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<%@ 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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Chart ID="Chart1" runat="server" Width="600px">
<Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</div>
</form>
</body>
</html>
Note:
You have to use the following
namespace
using System.Web.UI.DataVisualization.Charting;
C# code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.UI.DataVisualization.Charting;
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if
(!Page.IsPostBack)
{
DataTable
dt = GetData();
LoadChartData(dt);
}
}
private void LoadChartData(DataTable
initialDataSource)
{
for (int i = 1; i < initialDataSource.Columns.Count;
i++)
{
Series
series = new Series();
foreach
(DataRow dr in
initialDataSource.Rows)
{
int
y = (int)dr[i];
series.Points.AddXY(dr["Data"].ToString(), y);
}
Chart1.Series.Add(series);
}
}
private DataTable GetData()
{
DataTable
dt = new DataTable();
dt.Columns.Add("Data",
Type.GetType("System.String"));
dt.Columns.Add("Value1",
Type.GetType("System.Int32"));
dt.Columns.Add("Value2",
Type.GetType("System.Int32"));
dt.Columns.Add("Value3",
Type.GetType("System.Int32"));
DataRow
dr1 = dt.NewRow();
dr1["Data"]
= "series1";
dr1["Value1"]
= 32;
dr1["Value2"]
= 45;
dr1["Value3"]
= 60;
dt.Rows.Add(dr1);
DataRow
dr2 = dt.NewRow();
dr2["Data"]
= "series2";
dr2["Value1"]
= 62;
dr2["Value2"]
= 10;
dr2["Value3"]
= 89;
dt.Rows.Add(dr2);
DataRow
dr3 = dt.NewRow();
dr3["Data"]
= "series3";
dr3["Value1"]
= 19;
dr3["Value2"]
= 23;
dr3["Value3"]
= 78;
dt.Rows.Add(dr3);
return
dt;
}
}