Getting Started with Microsoft Chart Controls for ASP.NET 3.5

Microsoft has released, totally free, a chart building toolkit that rivals many products that you will pay over $1,000 just for a single developer license. In keeping with Microsoft's clunky and confusingly generic naming scheme, it's called Microsoft Chart Controls for Microsoft .NET Framework 3.5. Here's a sample of the kinds of charts you can build with this library:

Kinds of charts you can make with Microsoft Chart Controls



To get started, download the libary here:

Install MSChart.exe

http://www.microsoft.com/downloads/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en

Once you installed the MSChart.exe, the necessary System libraries will be created and put in the GAC for you to use. Next, you will want to set up your Visual Studio 2008 environment so that you can drag and drop charts from your Toolbox. To do this, download the installer here:

Install MSChar_VisualStudioAddOn.exe

http://www.microsoft.com/downloads/details.aspx?FamilyId=1D69CE13-E1E5-4315-825C-F14D33A303E9&displaylang=en

First make sure all instances of Visual Studio 2008 are closed, then install the MSChart_VisualStudioAddOn.exe you just downloaded. Now open up Visual Studio again. Here are a few more links that are useful:

Microsoft Chart Controls Documentation

http://www.microsoft.com/downloads/details.aspx?FamilyId=EE8F6F35-B087-4324-9DBA-6DD5E844FD9F&displaylang=en

Code Samples for ASP.NET 3.5 and Windows Forms

http://code.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591

Creating your First Chart

Now you're ready to create your first chart. We are going to create a simple Column chart type. Here's a sample of what it should look like when we are done:

Sample Column Chart

Create a new web project in Visual Studio 2008 called "ChartTest" and add a ASPX file to the project. Call it something like "Test.aspx".

Open the Test.aspx file in the HTML source view and drag and drop a Chart control. The control is in the "Data" section of your toolbox. Your HTML for the control should look like this:

<asp:Chart ID="Chart1" runat="server">
    <chartareas>
        <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
    </chartareas>
</asp:Chart>

 

Notice that there is a nested asp:ChartArea control within the asp:Chart element. The asp:Chart can be thought of as a global container that can have multiple chart types within it, layered if you like, and collated. For this example, we will just keep the defaults.

Now in the code behind of the page, add the following code:

// Create a new series to hold the data for the chart.
// NOTE: MyUniqueName must be a unique name for each series
// in this chart.
Series series = new Series("MyUniqueName");
series.ShadowOffset = 2;
 
// Set the chart type that you want the data to render
// as in the chart.
series.ChartType = SeriesChartType.Column;
 
// Populate data into the series.
series.Points.AddY(400);
series.Points.AddY(55);
series.Points.AddY(78);
series.Points.AddY(25);
 
// Add the series into the chart's Series collection.
Chart1.Series.Add(series);

 

Now run the page to see your first chart embedded in your page. One thing to note, if you see an error "Error executing child request for ChartImg.axd", see the article here for details on resolving this issue: ASP.NET Charting Control 3.5 fix for "Error executing child request for ChartImg.axd".

There are several ways that this library delivers the final chart to the user's browser. By default, charts are rendered on the fly using an HttpHandler. The link to the fix above describes this in more detail. You can also specify a directory where chart images can be written to before they are served up to the user's browser.