IBM

Visualize data with new Microsoft controls

If you ever work on projects that require charting functionality, you'll want to check out the Microsoft Chart Controls for .NET 3.5. Tony Patton explains how to get and use this new control.

Displaying data in a graph or a chart is visually more appealing than displaying data in a table, but such components have been missing from the .NET Framework -- until now. .NET developers no longer need to look for third-party charting components because Microsoft has introduced the Chart Controls for.NET 3.5.

Something old and something new

Microsoft is well known for buying and acquiring products. This holds true with the Microsoft Chart Controls, as was revealed last year when the company acquired some of the Dundas code and charting intellectual property.

Microsoft has been working to integrate the code into a variety of its products. The Microsoft Chart Controls is based on Dundas Chart source code version 5.5, which helps explain some of the similarities between the Microsoft Chart Controls and the Dundas controls.

Availability

The Microsoft Chart Controls is available as a free download. It requires .NET Framework 3.5 and the .NET Framework 3.5 Service Pack 1. In addition, a Visual Studio 2008 add-on is available for using the controls within the IDE. There are plenty of samples available online, along with the documentation to get up and running in no time. The Microsoft Chart Controls Forum is an excellent online resource for sharing and learning about the new control.

Features

The charting features offered by the Microsoft Chart Controls includes the ability to capture mouse events, drill down chart with preview, 3D visualization, AJAX integration, programmable event model, state management, caching, binary streaming, and much more. The new charting component has its own namespace: System.Web.UI.DataVisualization.Charting.

There are 25 chart types available, including: bar, area, line, doughnut, pie, point, range, circular, accumulation, data distribution, financial, and AJAX interactive. Most of the charts provide 3D support. The data used to create the chart may be included in the control declaration or dynamically populated using data binding.

Like all data controls, the Microsoft Chart Controls may be bound to the following data sources: XML, CSV files, arrays, data controls, and so forth. It has fully complex data sets, so it should fit most needs.

Using the Microsoft Chart Controls

You can manipulate the Microsoft Chart Controls via markup or programmatically. Here is an example of creating a simple bar chart on an ASP.NET page. A SQL data source is used as the data source for the chart (via SqlDataSource control). The chart uses data from the sample Northwind database (included with the default SQL Server installation); the data from the customers table is used to chart customers by their city.

The control is contained within the asp:Chart element. The Series element defines the series of data displayed and assigns data values via the XValueMember and YValueMember attributes that map to data source elements. The ChartArea element is used to format the chart displayed.

<asp:Chart ID="SampleChart" runat="server" Width="600" Height="400" DataSourceID="BackendDataSource">

<series>

<asp:Series Name="CitySeries" XValueMember="City"

YValueMembers="Column1" ChartType="Column">

</asp:Series>

</series>

<chartareas>

<asp:ChartArea BackColor="Yellow" BackGradientStyle="LeftRight"

Name="ChartArea1" ShadowOffset="5">

<AxisY Title="Customers">

</AxisY>

<AxisX Title="Customer Cities" IsLabelAutoFit="True">

<LabelStyle Angle="-90" Interval="1" />

</AxisX>

<Area3DStyle Enable3D="True" />

</asp:ChartArea>

</chartareas>

</asp:Chart>

<asp:SqlDataSource ID="BackendDataSource" runat="server"

ConnectionString="<%$ ConnectionStrings:NorthwindSampleDB %>"

SelectCommand="SELECT COUNT(*),[City] FROM [dbo].[Customers] GROUP BY [City]">

</asp:SqlDataSource>

Charts may be created or manipulated with code as well. The following sample from the downloaded samples creates a chart purely with code. It creates an instance of the Chart class and configures it via various properties. Data is added to the chart via the Points property, which is accessible via the Series property of the Chart class.

<%@ Page language="c#" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html><head>

<title>Basic Chart</title></head>

<body>

<form id="Form1" method="post" runat="server">

<%

System.Web.UI.DataVisualization.Charting.Chart Chart1 = new System.Web.UI.DataVisualization.Charting.Chart();

Chart1.Width = 412;

Chart1.Height = 296;

Chart1.RenderType = RenderType.ImageTag;

Chart1.ImageLocation = "ImagesChartPic_#SEQ(200,30)";

Chart1.Palette = ChartColorPalette.BrightPastel;

Title t = new Title("Basic Chart", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));

Chart1.Titles.Add(t);

Chart1.ChartAreas.Add("Series 1");

Chart1.Series.Add("Series 1");
Chart1.Series.Add("Series 2");

Chart1.Series["Series 1"].Points.AddY(5);

Chart1.Series["Series 1"].Points.AddY(8);

Chart1.Series["Series 1"].Points.AddY(12);

Chart1.Series["Series 1"].Points.AddY(6);

Chart1.Series["Series 1"].Points.AddY(9);

Chart1.Series["Series 1"].Points.AddY(4);

Chart1.Series["Series 2"].Points.AddY(2);

Chart1.Series["Series 2"].Points.AddY(6);

Chart1.Series["Series 2"].Points.AddY(18);

Chart1.Series["Series 2"].Points.AddY(16);

Chart1.Series["Series 2"].Points.AddY(21);

Chart1.Series["Series 2"].Points.AddY(14);

Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

Chart1.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);

Chart1.BorderlineDashStyle = ChartDashStyle.Solid;

Chart1.BorderWidth = 2;

Chart1.Legends.Add("Legend1");

Chart1.Legends["Legend1"].Enabled = ShowLegend.Checked;

Chart1.Page = this;

HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);

Chart1.RenderControl(writer);

%>

</form></body></html>

These code snippets provide quick examples of how you may use the Microsoft Chart Controls. The documentation and samples can be used to gain a better understanding of syntax and usage.

Other approaches

The introduction of the Microsoft Chart Controls makes me wonder about other ways to implement such features in a .NET application and the future of third-party companies; Microsoft has its Chart Controls now, but I expect more controls in the future.

Also, many developers may wonder about the Silverlight platform for delivering rich graphical interfaces to users via the Silverlight Toolkit. While that is still available, the Microsoft Chart Controls will be available to Silverlight developers since it is part of .NET. This blog post on MSDN provides more information.

Keeps getting better

While the rapid pace of improvements and additions to the .NET Framework can be hard to keep up with, new features such as the Chart Controls are excellent. Over the years, I have worked on a variety of projects that require charting functionality. The ability to utilize a (free) feature found in the .NET Framework is great, especially since it doesn't require a lot of extra time to learn or acquire third-party components or build a custom solution.

What charting solutions have you used in past projects? Do you envision taking advantage of the new Microsoft Chart Controls? Share your thoughts with the Web Developer community in the forums.

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

3 comments
byron.bennett
byron.bennett

I have used XML/SWF Charts in APS.net projects. Works great, looks great. Low cost. I don't know how long it will take our Server guys to move us up to .NET 3.5 or later. We're still stuck on 2.0. That's the trouble with a decent 2.0 that works...the people who control such things don't want to let it go for just a little more functionality. They need a burning house to get them out of it. Cheers! Byron

Justin James
Justin James

I agree, lack of good charting controls "out of the box" has always been frustrating, thanks for the heads up and the examples! J.Ja

Editor's Picks