ItProjects For You

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:

Then in system.webserver/handlers, add this:

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

<asp:Series Name="Series1">
</asp:Series>

</Series>
<ChartAreas>

<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>

</ChartAreas>

</asp:Chart>

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

using System.Web.UI.DataVisualization.Charting;

You can download code for this tutorial.