Microsoft Charts Overview

Introduction

Charts are great for displaying information to users in a graphical, tangible way. To support charts in .NET applications, Microsoft provides an add-on for .NET 3.5 SP1 and Visual Studio 2008 to support robust charts without purchasing expensive, proprietary software. In order to create charts like the ones shown in this article, you will need to install Microsoft Chart Controls for Microsoft .NET Framework 3.5 and Microsoft Chart Controls add-on for Microsoft Visual Studio 2008. If you are new to MS Charts, you can check out this overview to help you get started and set up.

The following are overviews of the key pieces used in creating and displaying a chart with the MSChart control. The final section is a grouping of tips and tricks that will serve to make your first MSChart experience more enjoyable.

ChartAreas

The ChartAreas property is a collection of ChartArea objects. A ChartArea is what is responsible for the display properties of the container, or "background," of the chart. Since there can be more than one, this means that a single MSChart control can have multiple charts contained within it.

Click here for larger image
Figure 1.1 - Single and multiple ChartArea(s)

It is important to understand the following when using multiple ChartAreas:

• While it is technically possible to control the positioning in order to "overlay" the ChartAreas, it is not recommended. Picture them as separate boxes within the MSChart control. To combine or overlay data points, it is more appropriate to use multiple series within a ChartArea. This will be discussed later. By default, the control will auto-size and position the ChartAreas for you.
• The individual ChartArea will adjust independently to fit the data. As shown above, the Y values are larger in the second ChartArea, and there are fewer data points.
• Multiple ChartAreas allows you to display charts with multiple ChartTypes (the property in the Series object that controls the type of chart to display; such as Bar, Column, or Pie) that are incompatible. The charts are still displayed in close proximity within the same MSChart control.

Focusing in on a single ChartArea, there are many individual properties that can be set and tweaked to give you the ability to design your chart area to fit many different situations. Most of its properties are similar to those of a Panel control, so we won't cover those. There are others that are unique to the ChartArea. Below is a list of those unique properties.

• 3D Styling: By using the ChartArea's Area3DStyle property and sub properties, we are able to create sharp, eye-pleasing, 3D charts. You must set the "(Enable3D") property to True in either the designer or code. The rest of the properties allow the 3D effect to be tweaked by adjusting the rotation, perspective, lighting style, and other 3D elements that give an image a 3D appearance.

  
  
  Click here for larger image
  Figure 1.2 3D styling

• Axes Control and Styling: The Axes collection contains the X and Y Axes, as well as secondary X and Y Axes. The properties on these 4 items allow you to style, set labels, define intervals, set tooltips, set scale, and many other items. Use these properties if your chart needs precise axes intervals, labels, or other special display requirements. For example, you can reverse axes values or control how the tick marks are displayed on the X axis. If you are using the chart for real-time values, you use the IntervalType property to configure the chart to show data points based on date and time.
• Selection Cursor: If you are interested in allowing the user to be able to use the cursor to select data points, or to click and drag ranges, then the CursorX and CursorY sets of properties are useful. You can enable selection and set initial cursor position or range.

Series

The Series property, like the ChartAreas property, is a collection. A single Series instance contains 3 important properties: the ChartArea property, the ChartType property, and the Points collection property.

• ChartArea: Identifies which ChartArea to use.
• ChartType: Identifies which chart type will be used to represent the data. You have the basic choices of Bar, Column, Pie, and Line, but also some more advance options like CandleStick, Bubble, Kagi, and Pyramid.
• Points: This is a collection of DataPoint objects that contain the X and Y values that are part of the Series and plotted on the chart. Data binding is the most common way to add points, and will be discussed later in this article.

Other common used and good-to-know properties on a Series instance include the following:

• Color: This property is used to individually set each series of data points' colors. By default, this property is blank and the control will vary the colors automatically to distinguish between multiple Series.
• IsValueShownAsLabel: By setting this property to True (default is False) the chart will display the Y value of each data point on the chart itself.

Figure 1.3 Y-value data labels

When combining multiple Series instances in a single ChartArea, you are able to easily represent like data points in a comparable manner. For example, the two separate and single charts below each have 6 points of data.

Click here for larger image
Figure 1.4 Separate data series

Now suppose you wanted to compare the two sets of data points. You could place two MSChart controls next to each other or use two ChartAreas within a chart. While either of those options would work, they would not give you the optimal visual representation of the data. This is why MSChart makes it so simple to combine data points to allow for easy side-by-side comparisons. By adding the data from the second chart as a second Series instance to the first chart we are given a much more visually appealing chart for our comparison.

Figure 1.5 Combined data series

When using multiple Series instances, it is important to keep in mind which ChartType you are using for each Series. Not all ChartType options are compatible together, and others, like the Pie chart for example, don't do a great job at representing separate sets of data.

In summary, the chart control's hierarchy is as follows: the MSChart control may have zero to many ChartAreas. A ChartArea may have zero to many Series. A Series may have zero to many DataPoints.

Data Binding

Data can be bound at either design-time or run-time. To bind at design-time use the Data Source Configuration Wizard that can be found by clicking on the dropdown button for the DataSource property directly on the MSChart control. If you already have data sources configured, you can select them from the list provided.

You can also bind to a data source at run-time through several different methods. There are two different set of methods at different levels in the control that allow binding. One set is on the MSChart control itself and the other is on the Points property of a Series instance. Below is a quick list of the methods and some tips on when to use them.

Chart Methods:

• DataBind(): The basic method to bind to the set data source.
• DataBindTable(): Binds the chart to a specific data table. Does not allow for binding multiple Y values, different data sources per series or different data sources for X and Y values.
• DataBindCrossTab(): Binds the chart to a data source and allows grouping of data based on a column of data. A separate series is automatically created per unique value in the specified column.

Points Methods:

• DataBind(): Binds a Series to a single data source and allows for other properties to be bound to the same data source (e.g. Labels, Tooltips, Legend Text, etc.).
• DataBindXY(): Allows binding to separate data sources for the X value and Y value. It also is used to bind a separate data source per Series.
• DataBindY(): Binds just the Y value of the DataPoints in the Series.

As far as data sources go, the MSChart control can bind to all objects that implement the IEnumerable interface. This includes, but is not limited to, DataReader, DataSet, Array, and List. It also allows you to bind to SqlCommand, OleDbCommand, SqlDataAdapters, and OleDbDataAdapter objects.

Legends

The Legends property is again a collection (this time of Legend objects). To quickly grasp what you can do with Legends, think of them as simple table. You have Cells, which make up Cell Columns. By default there are two Cell Columns. As you can see from previous examples, the default settings uses the Series instance name and the color of that Series on the chart. Legends can be extended by adding additional Cell Columns to the CellColumn collection. Column headers can also be added to give more meaning to the legend. In the below example, the headers "Name" and "Color" have been added to a default Legend instance.

Click here for larger image
Figure 1.6 Simple legend

Legend text for each Series, or the "Name" as used above, is controlled within the Series itself. Use the LegendText property on the individual Series instances to change the text in the chart's legend. You can also give the legend a title. In the example below, the legend is titled "Legend." In addition to just entering the text, you can also set properties to manipulate the title's alignment, color, and font. You will find that most MSChart properties allow for this level of manipulation and customization if you desire.

Finally, the chart's legend can be positioned two different ways. You can have the Legend automatically positioned in a docking like fashion. The default is outside the ChartArea, aligned Near, and docked Right. The other option is to manually position it with exact coordinates if your application requires. A variant on the docking option is to dock the legend within the ChartArea. This is done by setting the DockedToChartArea property to the ChartArea object you wish to dock the legend.

Click here for larger image
Figure 1.7 More complex legend

Titles

Titles are like the other previously discussed items. You create individual instances of a Title and the chart control holds a collection of these Title instances in the Titles collection. The simplest way to think about a Title is as a Label control that is internally docked within a panel that itself is docked within the chart control. This means that you can have your title to be top-centered, left- centered, top-left, right-bottom, and the list could go on and on. The only "docking" functionality you may be familiar with that is unavailable is "Fill."

In the below example, a bold Title with a font size of 12 has been added to the chart called "My First Chart."

Figure 1.8 Chart with a customized title

Tips and Tricks

• 3D w/Transparency: A cool way to add a little pizzazz to your 3D charts is to use some transparency in the Series. To do this via the designer, you will the Alpha value to the RBG code for the color you are using. In the properties window, select the Series collection, select a Series, and, in the properties window for the Series, add the Alpha value before the existing 3 RBG values. You can accomplish the same thing byusing the code below:
  chart1.Series["Series1"].Color = Color.FromArgb(220, 123, 123, 123);
• Leverage the Designer: There is such a robust set of properties and configurable options in the charting control that trying to configure all properties at run-time in code is too cumbersome in most cases. In cases where your application will use the chart in a "static" fashion (i.e., always a bar graph with two Series), the designer allows you to configure and view the chart at design time. This will give you the advantage of seeing how the chart will render without the need for multiple debug runs. On the other hand, if you intend to use the chart in a "dynamic" fashion (i.e., sometimes a pie graph and other times a line graph, which the user can change at run time), you will be required to alter the design at run-time using code. Instead of creating all the code manually for each type or circumstance, create it using the designer and then lift the code from the designer file on your form. This saves you time both in coding and figuring out which properties to use.
• Logical Names: This is an all around good programming practice, but it becomes even more important when dealing with properties that aren't strongly typed. When creating ChartAreas, Series, Titles and the like, be sure to name them with logical and easy to remember (and type) names. For example, (chart1.Series["Series1"]…, chart1.Series["Series2"]…) is more logical and therefore less likely to introduce errors than (chart1.Series["salesrepearningquarter"]…, chart1.Series["salesrepcomdatabyquarter"]…).

Conclusion

The Microsoft Chart Controls offer robust, flexible, customizable chart controls for displaying information to your users in the most easily digestible ways. We have covered the chart properties at a high level. Now you can go out and start creating charts to wow your application users.

About the Authors

Matt Goebel is a manager with Crowe Horwath LLP in the Indianapolis, Indiana, office. He can be reached at 317.208.2555 or matt .goebel@crowehorwath.com.

Rachel Baker is a senior developer with Crowe Horwath LLP in the Oak Brook, Illinois, office. She can be reached at 630.990.4434 or rachel .baker@crowehorwath.com.