Update: See this post if you are interested in using the Chart controls in ASP.NET MVC.
Recently Microsoft released the Microsoft Chart Controls for Microsoft .NET Framework 3.5. I immediately downloaded the controls and started integrating them into my applications. The controls support a variety of different charting options and they can be used with WinForms and WebForms. The following demonstrates how to get the charting controls added you an ASP.NET application:
First you need to add a reference to the assemblies System.Web.DataVisualization and System.Web.DataVisualization.Design (for design support). Then you need to add a couple of lines to your configuration (web.config) file.
add this line to the httpHandlers section: (I know it looks like nothing is in the gray box but it is there. The blog engine keeps re-formatting my HTML. Just use the scroll bars!)
<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" />
add this line to the controls section:
<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
Now that the configuration changes are handled you can go to your aspx page and add your chart control. Here is what my .aspx page ended up looking like:
<asp:Chart id=
"chart" runat=
"server" imagetype=
"Png" Width=
"800" Height=
"600">
<legends>
<asp:legend Enabled=
"True" IsTextAutoFit=
"True" Name=
"Default" BackColor=
"Transparent" Font=
"Trebuchet MS, 8.25pt, style=Bold"></asp:legend>
</legends>
<borderskin skinstyle=
"Emboss"></borderskin>
<series>
<asp:series ChartArea=
"Default" Name=
"Default" BorderColor=
"180, 26, 59, 105" Color=
"224, 64, 10"></asp:series>
</series>
<chartareas>
<asp:chartarea Name=
"ChartArea1" BorderColor=
"64, 64, 64, 64" BorderDashStyle=
"Solid" BackSecondaryColor=
"White" BackColor=
"OldLace" ShadowColor=
"Transparent" BackGradientStyle=
"TopBottom">
<area3dstyle Rotation=
"10" perspective=
"10" Inclination=
"15" IsRightAngleAxes=
"False" wallwidth=
"0" IsClustered=
"False"></area3dstyle>
<axisy linecolor=
"64, 64, 64, 64" IsLabelAutoFit=
"False">
<labelstyle font=
"Trebuchet MS, 8.25pt, style=Bold" />
<majorgrid linecolor=
"64, 64, 64, 64" />
</axisy>
<axisx linecolor=
"64, 64, 64, 64" IsLabelAutoFit=
"False">
<labelstyle font=
"Trebuchet MS, 8.25pt, style=Bold" IsStaggered=
"True" />
<majorgrid linecolor=
"64, 64, 64, 64" />
</axisx>
</asp:chartarea>
</chartareas>
</asp:Chart>
Then in your code behind you can load up your chart with data. In my case, I executed a LINQ query based on some date time parameters entered by the user. Then I take the results of the LINQ query and shove them into a generic list. Finally, I loop over the list and add data points to the chart. Here is the code:
private void DrawGraph() {
chart.Series.Clear();
chart.Titles.Clear();
Title title = chart.Titles.Add(Request["q"].ToString() + " - Database Growth");
title.Font = new Font(title.Font.FontFamily, 14);
Series s = null;
try {
foreach (DatabaseGrowthEx dataPoint in _growth) {
if (s == null s.Name != dataPoint.DatabaseName) {
s = chart.Series.Add(dataPoint.DatabaseName);
s.ChartType = SeriesChartType.Line;
s.IsValueShownAsLabel = false;
}
int ptIndex = s.Points.AddXY(dataPoint.SampleDate, dataPoint.DBSize);
DataPoint p = s.Points[ptIndex];
p.MarkerStyle = MarkerStyle.Star6;
p.ToolTip = String.Format("DB Name: {0}\nDate: {1}\nDB Size: {2}\nLog Size: {3}",
s.Name,
dataPoint.SampleDate,
dataPoint.DBSize,
dataPoint.LogSize);
}
}
catch (Exception ex) {
Response.Write(ex.ToString());
Response.End();
}
}
I also wanted to mention that when I deployed the web application to the remote IIS server I had to create the directory c:\TempImageFiles. Apparently, this is work area where images are created before they get streamed back to the browser. For whatever reason, I did not have to create this directory during development when I ran the web application through Visual Studio.
Overall, the chart controls are very easy to use. Microsoft also has a great sample project which you can download. The sample project comes with full source code so you can see how they were implemented. In addition to downloading the samples you can also get the full documentation or get some free support in the forum.
