This tutorial shows you how to use the new MS Chart to render a Column Chart from a DataTable source in C#.
Render Column Graph from DataTable in MSChart C#
This tutorial shows you how to use the new MS Chart to render a Column Chart from a DataTable source in C#.
In this tutorial, you will learn how to use the new MS Chart
to render a bar graph from a DataTable, and show just how easy
Microsoft make it for us to do so. We can use the Chart control like
other ASP.NET data controls, and assign it a data source.
In this example, we will be programmatically instantiating and
populating a DataTable on button click. In a real-world application,
the chart would be bound with data from an external source, like a
database or XML file. However, the results will be similar.
Before we begin anything, and even start up Visual Studio.NET, we
first need to download and install the Chart extension. You can
download from the above web address, and the install is a quick process
- consisting of two EXEs.
Once installed, we can start up Visual Studio and create a new Web
Application. Then the first thing to do is add two references in the
Web.config:
In system.web/httpHandlers, add the following:
|
<add path="ChartImg.axd" verb="GET,HEAD"
type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" validate="false"/> |
Then in system.webserver/handlers, add this:
|
<add name="ChartImageHandler" preCondition="integratedMode"
verb="GET,HEAD" path="ChartImg.axd"
type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,
System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/> |
After adding the references, we can begin to implement Charts into
our ASPX page. You can add the Chart to the toolbox by right-clicking
an empty space on the toolbox and selecting Choose Items, then
navigating to the install folder (Program Files/Microsoft Chart
Controls/Assemblies). You will want to select the
System.Web.DataVisualization.dll to add to the toolbox.
To begin, either drag the Chart onto your ASPX page from the toolbox, or add the following code manually:
<form id="form1" runat="server">
<asp:Chart ID="Chart1" runat="server" Width="550px">
<Series>
<asp:series Name="Series1"></asp:series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</form>
|
Need help with Windows Dedicated Hosting? Try Server Intellect. I'm a happy customer!
If you dragged from the toolbox, you should also notice the
following added to the top of the page. If you added manually, then
this code also needs to be added below the page directive:
|
<%@ Register Assembly="System.Web.DataVisualization,
Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp"
%> |
We do not need to do anything further to this page for this example.
We could change the look and feel of the chart using styles, but this
tweaking can be left until we actually know what the graph will look
like.
We will now move to the code-behind where we will add our logic to display the graph.
Before we code anything related to the Chart, in order to use Charting and DataTables, we need to add the following references:
using System.Web.UI.DataVisualization.Charting;
using System.Data;
|
As mentioned earlier in this tutorial, we are going to hard-code a
datatable for use in this example. We will be keeping it simple and use
only two columns for illustration purposes - Name, and Age:
DataTable dt = new DataTable();
DataColumn dc;
dc = new DataColumn();
dc.ColumnName = "Name";
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "Age";
dt.Columns.Add(dc);
DataRow dr;
dr = dt.NewRow();
dr["Name"] = "Fred";
dr["Age"] = "54";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Bill";
dr["Age"] = "66";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Rhona";
dr["Age"] = "32";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Peter";
dr["Age"] = "46";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Tina";
dr["Age"] = "26";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Ella";
dr["Age"] = "2";
dt.Rows.Add(dr);
|
Server Intellect
assists companies of all sizes with their hosting needs by offering
fully configured server solutions coupled with proactive server
management services. Server Intellect specializes in providing complete internet-ready server solutions backed by their expert 24/365 proactive support team.
On Page_load, we can set the type of graph we wish to render. Let's use column:
|
Chart1.Series["Series1"].ChartType = SeriesChartType.Column;
|
Now, we will render the graph simply by setting the datasource of the Chart control:
Chart1.DataSource = dt;
Chart1.Series["Series1"].XValueMember = "Name";
Chart1.Series["Series1"].YValueMembers = "Age";
Chart1.DataBind();
|
Here, we are setting which columns within the DataTable are to be
set to which axis. This will also lead the axes to take on the correct
labels. Once bound, the data will be displayed in graph form.
The other way to achieve this result, which is a little more messy,
is to loop through the values individually and then plot them on the
graph:
double plotY = 0;
if(Chart1.Series["Series1"].Points.Count > 0)
{
plotY = Chart1.Series["Series1"].Points[Chart1.Series["Series1"].Points.Count - 1].YValues[0];
}
for (int pointIndex = 0; pointIndex < dt.Rows.Count; pointIndex++)
{
plotY = Convert.ToInt16(dt.Rows[pointIndex]["Age"]);
Chart1.Series["Series1"].Points.AddY(plotY);
}
|
Obviously for a computer, this is virtually instantaneous, but the
code is a little more cumbersome than simply setting the datasource and
axes. Both methods have their disadvantages and advantages with
different data sources.
We'll now clean up the code a little, adding a button and
implementing AJAX. Simply add a ScriptManager and UpdatePanel to the
ASPX page:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="but_LoadData" runat="server" Text="Load Data" OnClick="but_LoadData_OnClick" />
<br /><br />
<asp:Chart ID="Chart1" runat="server" Width="550px">
<Series>
<asp:series Name="Series1"></asp:series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
</ContentTemplate>
</asp:UpdatePanel>
|
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
And then we populate the datatable and set the graph datasource on button click:
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.DataVisualization.Charting;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void but_LoadData_OnClick(object sender, EventArgs e)
{
Chart1.Series["Series1"].ChartType = SeriesChartType.Column;
Chart1.Series["Series1"]["DrawingStyle"] = "Emboss";
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Chart1.Series["Series1"].IsValueShownAsLabel = true;
FillData();
}
private void FillData()
{
DataTable dt = new DataTable();
DataColumn dc;
dc = new DataColumn();
dc.ColumnName = "Name";
dt.Columns.Add(dc);
dc = new DataColumn();
dc.ColumnName = "Age";
dt.Columns.Add(dc);
DataRow dr;
dr = dt.NewRow();
dr["Name"] = "Fred";
dr["Age"] = "54";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Bill";
dr["Age"] = "66";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Rhona";
dr["Age"] = "32";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Peter";
dr["Age"] = "46";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Tina";
dr["Age"] = "26";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Name"] = "Ella";
dr["Age"] = "2";
dt.Rows.Add(dr);
Chart1.DataSource = dt;
Chart1.Series["Series1"].XValueMember = "Name";
Chart1.Series["Series1"].YValueMembers = "Age";
Chart1.DataBind();
}
|
|
