Server Intellect

Install and Use Microsoft Chart Controls to Render a Graph from Data Table in C#

Category: ASP.NET

Using MSChart to Create Graphical Charts in ASP.NET and C#

Introduction

In this article, we will be exploring the new addition to the .NET Framework: Microsoft Chart Controls, and how we can implement full-blown graphs and charts into our Web Applications using only ASP.NET - no need for third party plugins.

What we will learn in this article:

  • How to install MSChart and the Visual Studio add-on;
  • How to implement MSChart in a Web Application to display a graph from database data.

Getting Started
The prerequisites for this article are to download and install MSChart and the add-on for Visual Studio. This tutorial is written with Visual Studio.NET 2008 and ASP.NET 3.5 (Please note, MSChart is not compatible with .NET versions below 3.5
To get started, download the following files from Microsoft:
MSChart.exe
MSChart_VisualStudioAddOn.exe

Another great place to go for MSChart info is http://code.msdn.microsoft.com/mschart, which have code samples of different kinds of graphs and charts.

Once you have the installation files downloaded, install MSChart.exe first, as the add-on requires this to be installed. Both are quick installs, and should take no more than a few minutes, so when both have been successfully installed to your machine, you can start up Visual Studio.
First, create a new Web Application, and now to get the new control into our toolbox, we can right-click on a blank area of it and select Add Tab. Name it something like MSChart:

Try Server Intellect for Windows Server Hosting. Quality and Quantity!

Next, right-click in the new tab and select Choose Items...

We should then see a dialog box like this:


[Click to enlarge]

Click the Browse button and navigate to the Program Files\Microsoft Chart Controls\Assemblies folder. Here you want to add both the Windows.Form and the Web DLLs. Once they're added, they will be available to select in the list box:


[Click to enlarge]

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

So once they're added, and checked, they should be available in our toolbox:

Now we can begin using them in our Web Application, but before we do anything else, we need to add the references to the Web.config, something that Visual Studio does not do for us automatically, unfortunately. Open up the Web.config and locate the system.web tag, and then find the httpHandlers tag inside this one and 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"/>

Next, locate the system.webServer tags and then the handlers tags within them, and add the following:

<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"/>

Once we have these in place, we can begin on our ASPX page. Let's work on the Default.aspx page and drag a MSChart control from the toolbox onto the page. You will notice that two things are added. First, there is a directive added at the top of the page, which looks something like this:

<%@ Register Assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

Secondly, the default MSChart control looks something like this:

<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>

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.

For this example, we do not need to change anything here, as our code-behind will be where the magic happens. So for now, let's leave it like this and move back to the code-behind.
What we will do is create a method to load the data into the chart, and we will then call this method on Page_Load. Now, in a real-world application, we would be grabbing the data from an external source such as a database or XML file, but for this example, we will programmatically create a datatable to use for the graph:

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);
}

Here, we are creating a simple datatable of people, each with a name and an age. There are two ways to bind data to a Chart control: with the DataSource; like other data controls, or by looping through the data source (in this case, a datatable) and plotting each value on the graph. In this article, we will show you both ways. But first, we need to add the following using statement:

using System.Web.UI.DataVisualization.Charting;

Now on to the coding: probably the easiest way to display data as a graph is to set the datasource of the chart like any other data control. We also need to set the labels of the axes, which we can do like so:

Chart1.DataSource = dt;
Chart1.Series["Series1"].XValueMember = "Name";
Chart1.Series["Series1"].YValueMembers = "Age";
Chart1.DataBind();

We use the column names to set the labels of each axis, after setting the datasource. Then we bind the data and it should be displayed as a graph. However, we have one more thing to set - which type of graph do we want? We can set this on Page_Load, or in the method, as well as a few other properties:

Chart1.Series["Series1"].ChartType = SeriesChartType.Column;
Chart1.Series["Series1"]["DrawingStyle"] = "Emboss";
Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
Chart1.Series["Series1"].IsValueShownAsLabel = true;

We will use a Column chart for this example. The DrawingStyle sets the look of the graph, we set the graph to 3D also, and IsValueShownAsLabel shows the actual value of each result above each column. These are all optional settings, which have defaults if they're not set. Now if we run the application, we should get something that looks like this:

A very professional-looking graph with only a few lines of code, which is also very customizable with styles applied to the ASPX tags.
Now the other way to bind the data is to loop through the data. Because we are using a datatable, we will use a for loop:

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);
}

For each value in the datatable, we plot the point on the graph. This will result in a similar graph, without the X-axis labels for each item:

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

As an added touch, we can add a button and render the chart on button click. The ASPX page will look something like this:

<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>

And the code-behind will look something like this:

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);

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);
}

//Chart1.DataSource = dt;
//Chart1.Series["Series1"].XValueMember = "Name";
//Chart1.Series["Series1"].YValueMembers = "Age";
//Chart1.DataBind();
}
}


Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!

Leave a Comment

Comments on this Article

Post a Comment
Name:
Website:
Email:
Comments:

#1 Rusty68

Posted By: Rusty68 | 4.02.2009 at 12:08 PM

I showed this article to my son since I think he would be interested in using this for a project he is working on.

#2 Dulwan Baddewithana

Posted By: Dulwan Baddewithana | 4.08.2009 at 9:36 PM

Good...it's good ..

#3 Roopesh Babu

Posted By: Roopesh Babu | 6.23.2009 at 6:05 AM

Thx a lot man...

i was searching for this info till i knocked this page..

thx a lot...

#4 Dave Burke

Posted By: Dave Burke | 7.02.2009 at 6:55 AM

Thank you , could'nt find this and then there it was

#5 coolnik999

Posted By: coolnik999 | 7.31.2009 at 12:59 PM

Nice work dude .......

#6 Electrical engineering degree

Posted By: Electrical engineering degree | 8.29.2009 at 12:18 AM

i was searching for this info till i knocked this page..

#7 Mechanical engineering degree

Posted By: Mechanical engineering degree | 8.29.2009 at 12:18 AM

This site you get all sort of help and guide here for students.

#8 Criminal Justice school

Posted By: Criminal Justice school | 8.29.2009 at 12:19 AM

They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

#9 Accredited degrees

Posted By: Accredited degrees | 8.29.2009 at 12:19 AM

Nice site could be very useful to the students.

#10 Music degree

Posted By: Music degree | 8.29.2009 at 12:19 AM

A very professional-looking graph with only a few lines of code, which is also very customizable with styles applied to the ASPX tags.

#11 Tiffany Rings

Posted By: Tiffany Rings | 10.23.2009 at 7:37 AM

i like

#12 Versace Eyeglasses

Posted By: Versace Eyeglasses | 11.20.2009 at 4:02 PM

I like the graphical presentation . Good work. Information is really useful. Thanks

#13 Small Business Consulting

Posted By: Small Business Consulting | 11.24.2009 at 1:44 AM

Hey Thanks for this step-by-step tutorial. I have been wanting to know how to install & use the Microsoft chart controls along with data tables from C. It really helped lots.

#14 free online games

Posted By: free online games | 11.24.2009 at 10:59 PM

i was searching for this info till i knocked this page..

#15 links of london

Posted By: links of london | 12.26.2009 at 12:25 AM

i like

#16 tienshealth

Posted By: tienshealth | 1.09.2010 at 3:17 AM

I will ask my students to stop and read articles in this site because there are very instructive and good teachings here.

#17 flowers philadelphia

Posted By: flowers philadelphia | 1.16.2010 at 1:10 PM

this is great work!

#18 vardenafil

Posted By: vardenafil | 2.17.2010 at 2:42 PM

dc = new DataColumn();

dc.ColumnName = "Name";

dt.Columns.Add(dc);

dc = new DataColumn();

dc.ColumnName = "Age";

dt.Columns.Add(dc);

Check this code!!!

#19 action games

Posted By: action games | 3.07.2010 at 3:31 AM

Hey, good morning. Brilliant article. You have gained a new subscriber. Please keep up the good work and I look forward to more of your gorgeous articles. Best regards, Jason...

#20 Bruno

Posted By: Bruno | 3.18.2010 at 2:11 PM

Do I must install the chart?

Cant I just reference dll file?

#21 gioco al casinò online

Posted By: gioco al casinò online | 3.27.2010 at 5:10 AM

Technically by disallowing Windows users access you can block anyone’s connection in effect disabling it.While being the most secure, its not the fastest…for sites that have hundreds/thousands of connections made per minute there is a noticeable difference between Windows and SQL Server Authentication.

#22 pass4sure

Posted By: pass4sure | 4.07.2010 at 2:01 AM

hello admin, I found your website from google and read a few of your other web pages. They are brilliant. Pleasee keep it up.

#23 Ashaq

Posted By: Ashaq | 4.12.2010 at 4:14 AM

what i have not been able to find in book i find that here thanks..a lot

if i have to put picture +text+text under each column how can i do that plz mail me if any one knows ashaq_ashraf@yahoo.com.

#24 testking 642-067

Posted By: testking 642-067 | 4.29.2010 at 6:20 AM

I like your blog very much.

#25 testking 642-072

Posted By: testking 642-072 | 4.29.2010 at 6:21 AM

Your blog is great.

#26 testking 642-357

Posted By: testking 642-357 | 4.29.2010 at 6:21 AM

Thanks for sharing.

#27 Nancy Hutchins

Posted By: Nancy Hutchins | 5.09.2010 at 4:29 PM

Glad I found your instructions on this. Very helpful. I've book-marked this page. Thanks

#28 download letters to juliet

Posted By: download letters to juliet | 5.12.2010 at 3:26 AM

I showed this article to my son since I think he would be interested in using this for a project he is working on.

#29 download macgruber

Posted By: download macgruber | 5.12.2010 at 3:27 AM

Good...it's good ..

#30 trap

Posted By: trap | 5.12.2010 at 1:33 PM

Thanks for this step-by-step tutorial. I have been wanting to know how to install & use the Microsoft chart controls along with data tables from C. It really helped lots.

#31 http://www.giochi-internet-casino.com/

Posted By: http://www.giochi-internet-casino.com/ | 5.14.2010 at 4:22 AM

Thanks for posting some great ideas and I'll try to return back with a completely different browser to check things out! Also, I put a link to your blog at my site, hope you don't mind?

#32 triathlon tips transition

Posted By: triathlon tips transition | 5.15.2010 at 6:43 PM

Its one of my favorite post. Thanks for informative sharing.

#33 wholesale laptop adapter

Posted By: wholesale laptop adapter | 5.21.2010 at 1:55 AM

ploring the new addition to the .NET Framework: Microsoft Chart Controls, and how we can implement full-blown graphs and charts into our Web Applications using only ASP.NET - no need for third party plugins.

#34 air max 2009

Posted By: air max 2009 | 5.23.2010 at 5:05 AM

nike air max sale

#35 wmns air max

Posted By: wmns air max | 5.23.2010 at 5:07 AM

nike air max sale

#36 air max running shoe

Posted By: air max running shoe | 5.23.2010 at 5:10 AM

nike air max sale air max running shoes

#37 wholesale shoes

Posted By: wholesale shoes | 5.24.2010 at 3:37 AM

Spring summer pocket perfect supporting role (figure) except heart shape brooch, earring, necklace,

#38 VCP-310 dumps

Posted By: VCP-310 dumps | 5.27.2010 at 1:34 AM

I like your blog very much.

#39 1z0-048 dumps

Posted By: 1z0-048 dumps | 5.27.2010 at 1:34 AM

I love this blog very much.

#40 642-812 dumps

Posted By: 642-812 dumps | 5.27.2010 at 1:34 AM

Thanks for sharing.

#41 california personal injury attorneys

Posted By: california personal injury attorneys | 5.30.2010 at 4:37 AM

Thanks for this read mate. Well, this is my first visit to your blog! But I admire the precious time and effort you put into it, especially into interesting articles you share here!

#42 vibram five fingers

Posted By: vibram five fingers | 6.05.2010 at 9:43 AM

That great!Great article!useful That what i'm looking for!

#43 air max

Posted By: air max | 6.05.2010 at 9:45 AM

This article give me a great help!thank you very much!

#44 purses coach

Posted By: purses coach | 6.13.2010 at 5:07 AM

Very good, look forward to view your other articles.

#45 Free Games

Posted By: Free Games | 6.17.2010 at 1:37 AM

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.

#46 Agile Informatics

Posted By: Agile Informatics | 6.17.2010 at 6:57 AM

We will be using the data in the PrincetonTemp.xls table on MS SQL Server 2008’s TestNorthwind database created in an earlier tutorial on this site. You could create such a table using a suitable query. This table shows the temperature in a year and the record high temperature for a New Jersey town in two columns as shown in this query.

#47 fancy antique jewelry

Posted By: fancy antique jewelry | 6.18.2010 at 2:20 AM

The .NET framework provides a Graphics class with all the functions you need to create an image from scratch. First, we are going to create the ASP.NET page, and then we will build a test harness to demonstrate the functionality.

#48 Insurance services

Posted By: Insurance services | 6.18.2010 at 5:06 AM

To insert an image into an HTML page you can simply use the <img src="image.gif"> notation. The image specified is then picked up from the Web server and displayed within the Web page. However, it is sometimes useful to be able to create an image on-the-fly based on some parameters received from a user rather than simply picking up a static image from the Web server.

#49 cheap mbt shoes

Posted By: cheap mbt shoes | 6.18.2010 at 9:07 PM

good post!!thank you

#50 Gifts

Posted By: Gifts | 7.10.2010 at 2:04 AM

Hey, good morning. Brilliant article. You have gained a new subscriber. Please keep up the good work and I look forward to more of your gorgeous articles. Best regards, Jason...

#51 piano tutorial

Posted By: piano tutorial | 7.16.2010 at 10:31 AM

I've tried to do this a few times and looking at your post I was not far from it. Will get success now!

#52 Weight Loss

Posted By: Weight Loss | 7.20.2010 at 8:38 AM

Exploring the new addition to the .NET Framework: Microsoft Chart Controls, and how we can implement full-blown graphs and charts into our Web Applications using only ASP.NET - no need for third party plugins.

#53 tiffany co

Posted By: tiffany co | 7.21.2010 at 3:12 AM

For classic and quality genuine silver jewelry, many people choose Tiffany & Co brand.Now,we present you the hottest Tiffany silver jewelry .get more http://www.tiffanyonsale.com/

#54 tiffany jewelry

Posted By: tiffany jewelry | 7.21.2010 at 3:12 AM

For classic and quality genuine silver jewelry, many people choose Tiffany & Co brand.Now,we present you the hottest Tiffany silver jewelry .get more http://www.tiffanyonsale.com/

#55 tiffany jewellery

Posted By: tiffany jewellery | 7.21.2010 at 3:12 AM

For classic and quality genuine silver jewelry, many people choose Tiffany & Co brand.Now,we present you the hottest Tiffany silver jewelry .get more http://www.tiffanyonsale.com/

#56 authentic jordans

Posted By: authentic jordans | 7.23.2010 at 4:02 AM

How to install MSChart and the Visual Studio add-on;

How to implement MSChart in a Web Application to display a graph from database data.

Getting Started

#57 Make money

Posted By: Make money | 7.24.2010 at 3:17 PM

Hey, good morning. Brilliant article. You have gained a new subscriber. Please keep up the good work and I look forward to more of your gorgeous articles. Thanks

#58 free online dating

Posted By: free online dating | 7.25.2010 at 2:52 AM

Thanks for posting some great ideas and I'll try to return back with a completely different browser to check things out! Also, I put a link to your blog at my site, hope you don't mind?

#59 garden treasures gazebo

Posted By: garden treasures gazebo | 7.25.2010 at 8:04 AM

Hey Thanks for this step-by-step tutorial. I have been wanting to know how to install & use the Microsoft chart controls along with data tables from C. It really helped lots.Thanks

#60 tiffany ring

Posted By: tiffany ring | 7.26.2010 at 7:10 AM

This is exactly cheap tiffany jewelry you can get cheap Tiffany Rings, Necklaces, Errings, Bracelets and other Tiffany Jewellery.get more http://www.tiffanyonsale.com/

#61 tiffany bracelet

Posted By: tiffany bracelet | 7.26.2010 at 7:10 AM

This is exactly cheap tiffany jewelry you can get cheap Tiffany Rings, Necklaces, Errings, Bracelets and other Tiffany Jewellery.get more http://www.tiffanyonsale.com/

#62 tiffany necklace

Posted By: tiffany necklace | 7.26.2010 at 7:10 AM

This is exactly cheap tiffany jewelry you can get cheap Tiffany Rings, Necklaces, Errings, Bracelets and other Tiffany Jewellery.get more http://www.tiffanyonsale.com/

#63 Attorney

Posted By: Attorney | 7.26.2010 at 7:36 AM

Technically by disallowing Windows users access you can block anyone’s connection in effect disabling it.While being the most secure, its not the fastest…for sites that have hundreds/thousands of connections made per minute there is a noticeable difference between Windows and SQL Server Authentication.

#64 In Home Care

Posted By: In Home Care | 7.28.2010 at 7:41 AM

Hey Thanks for this step-by-step tutorial. I have been wanting to know how to install & use the Microsoft chart controls along with data tables from C. It really helped lots.

#65 London Escorts

Posted By: London Escorts | 7.28.2010 at 1:16 PM

sValueShownAsLabel shows the actual value of each result above each column. These are all optional settings, which have defaults if they're not set. Now if we run the application, we should get something

#66 outdoor dining furniture

Posted By: outdoor dining furniture | 7.28.2010 at 2:19 PM

In this article, we will be exploring the new addition to the .NET Framework: Microsoft Chart Controls, and how we can implement full-blown graphs and charts into our Web Applications using only ASP.NET - no need for third party plugins.

#67 Speedos

Posted By: Speedos | 7.29.2010 at 2:33 AM

Thanks for posting some great ideas and I'll try to return back with a completely different browser to check things out! Also, I put a link to your blog at my site, hope you don't mind?

Thanks