DotNet Tutorials

Server Intellect

 Creating a Line Graph in ASP.NET 3.5 C# with MS Chart

This tutorial will show you how to create a line graph with MS Chart in ASP.NET 3.5 and how to install the MS Chart extension. C#. Note: MS Chart is for use only with ASP.NET 3.5 and above.

In this tutorial, we will be looking at a new addition to the .NET Framework - MS Chart.
Please note that MS Chart will not work in ASP.NET 2.0 and below. If you are working within 3.5 or 4.0, then you can download the MS Chart extension at the following address:
http://code.msdn.microsoft.com/mschart

We will show you briefly how to install MS Chart, and how to utilize it to create a simple line graph. Once downloaded, you should have two files:
MSChart.exe and MSChart_VisualStudioAddOn.exe

Make sure Visual Studio.NET is closed, then run MSChart.exe first, and complete the quick install. Then run MSChart_VisualStudioAddOn.exe to install the VS Extension. Now open up Visual Studio and Create a new Web Site. If you want to add the Chart to your toolbox, you can right-click and Choose Items. Navigate to the install directory (Program Files > Microsoft Chart Controls) and choose the System.Web.DataVisualization.dll - click Ok. Once added, you can drag the DLLs and XML file from Windows Explorer.

Before we do anything, we need to add our references to the Web.config, because MS Chart is not yet fully integrated into .NET 3.5 and Visual Studio will not do this for you. Open up your Web.config and add the following two lines:
In system.web/httpHandlers, add this:

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

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.

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

Now we have our references added, we can begin creating the graph. When we drag MS Chart from the toolbox onto our webform, we are provided with something like this:

<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

Most of the code we write for the chart in the ASPX page will be for the way it looks.

When we move to our code-behind, we need to add the following reference:

using System.Web.UI.DataVisualization.Charting;

To set the type of chart shown, let's add the following on the Page_Load:

Chart1.Series["Series1"].ChartType = SeriesChartType.Line;

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

In order to display data as a chart, we need data ! For this example, we will use random data. The MS Chart plots its chart by looping through the data source and setting each value individually. Here, we will use a for loop to plot random integer values. To use your own data source, you will need to loop through it and assign the values (of type integer) to the chart in a similar way:

private void FillData()
{
double plotY = 50.0;
if(Chart1.Series["Series1"].Points.Count > 0)
{
plotY = Chart1.Series["Series1"].Points[Chart1.Series["Series1"].Points.Count - 1].YValues[0];
}

Random random = new Random();
for(int pointIndex = 0; pointIndex < 20000; pointIndex ++)
{
plotY = plotY + (float)( random.NextDouble( ) * 10.0 - 5.0 );
Chart1.Series["Series1"].Points.AddY(plotY);
}
}

We then call this method on Page_Load, and ASP.NET will plot our graph:

protected void Page_Load(object sender, EventArgs e)
{
FillData();

Chart1.Series["Series1"].ChartType = SeriesChartType.Line;
}

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.

If we wanted to add a second series, we can simply do that by adding to the <series> tags like so:

<asp:series Name="Series2"></asp:series>

Then set the type on Page_Load, and finally add to the method where we set our values:

protected void Page_Load(object sender, EventArgs e)
{
FillData();

Chart1.Series["Series1"].ChartType = SeriesChartType.Line;
Chart1.Series["Series2"].ChartType = SeriesChartType.Line;
}

private void FillData()
{
double plotY = 50.0;
double plotY2 = 200.0;
if(Chart1.Series["Series1"].Points.Count > 0)
{
plotY = Chart1.Series["Series1"].Points[Chart1.Series["Series1"].Points.Count - 1].YValues[0];
plotY2 = Chart1.Series["Series2"].Points[Chart1.Series["Series1"].Points.Count - 1].YValues[0];
}
Random random = new Random();
for(int pointIndex = 0; pointIndex < 20000; pointIndex ++)
{
plotY = plotY + (float)( random.NextDouble( ) * 10.0 - 5.0 );
Chart1.Series["Series1"].Points.AddY(plotY);

plotY2 = plotY2 + (float)( random.NextDouble( ) * 10.0 - 5.0 );
Chart1.Series["Series2"].Points.AddY(plotY2);
}
}

Looking for more ASP.NET Tutorials? Click Here!

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!
 
123 ASP

411 ASP

Dot Net Freaks

Server Intellect