Overview of the Chart Control

Dundas charts is a popular charting tool that embeds pie, bar, line, and more charts into a web or windows applicatin. For the web, Dundas generates the charts on the server and serves up images to the client in the browser. This works well in the web environment, which relies upon the use of images being present (whereas the windows realm can display an image stream). Microsoft leased part of the Dundas controls to create the .NET chart control freely available to the community, making all these great innovations created by Dundas available to the public. Microsoft did not lease the entire product, but rather a subset of the product.


Everything begins with the Chart control; the chart control defines all of the parameters and methods required to show charts in a .NET application. Each chart can have one or more titles that appear at the top of the chart. It can also have one or more legends that make up the various information groups in the chart. There can be one or more legends, and the legend can be docked to the top, bottom, left, or right side of the chart.

Each chart has a chart area that defines the region to draw the chart in. This area has a variety of settings regarding the X or Y axis, 3D chart rendering, the inner position of the chart, and more. The ChartArea object is the key component that makes up the chart, because it tells the chart data where to live, so to speak.

The groupings of data, or information groups as I mentioned before, represents the Series object. The series is exactly that; a series of data elements that representsss one information group. I'll provide an example later, but know that a Series stores one or more DataPoint objects. The DataPoint class represents the X/Y values to show on the chart.

To give you an example of the coorelation between Series and DataPoints, imagine this. Suppose you wanted to create a coorelation between how well various products at a store sell in relation to each other. This coorelation tracks total net sales as compared to the year. So in a chart scenario, the Y axis running north would represent the net sales, and the X axis running east would represent the years.

In the chart control, each product would represent a series. A series would consist of multiple DataPoint objects, one per year, which would have its XValue property set to the year and its YValues property (there can be multiple values to accommodate certain kinds of charts) would reference the net sales. This is how the two objects coorelate.

Chart Example



Now its time to see an example of this. Take a look at the following chart.

Width="600px" Height="400px" Palette="Chocolate">

Text = "My Title" Enabled="True" />




So far, within this chart, we have the core Chart control that defines the width and height of the image. I'd highly recommend specifying these parameters, to ensure the chart image renders decently. In addition, there are four image types and this chart renders in Jpeg format, along with using the Chocolate palette (one of many color schemes that changes the color that the individual bars, lines, points, or pie slices use within the chart).

Chart Areas

Next, let's look at the setup of the charting area.


.
.















The charting area is setup by the ChartArea object. This chart contains the name of the charting region (important because there can be more than one charting areas and Series objects have to interrelate to the ChartArea). The chart area defines information about the charting area itself. First, the InnerPlotPosition specifies the region of the charting area to render itself in. This varies by type of chart, as pie charts render differently than bar charts, and each chart functions differently depending on its settings.

The LabelStyle object specifies settings to use for labels that appear within the chart. Font is just one of those properties that are customizable. The next two properties affect the rendering of the chart axis. The MajorGrid property specifies whether to draw a line for the major X or Y values. So for each item rendered in the list, the chart control specifies the details about the line, such as line color, width, style, etc. Currently its disabled, so no X/Y lines appear, but can be easily enabled by setting the value to true, and by at least specifying a line width. This is the same for the tick marks that appear by enabling MajorTickMark.

Major grid lines are represented by the major values in the grid. For instance, if the X axis shows years, it would most likely show one major grid line per year. With the Y axis being net sales, the chart control may create a major grid line every $20,000. The chart control automatically creates major values for you; however, you can override this feature to include whatever ranges you like.

Series and Data Points

Charting data itself is made up of series and data points; these series and data points represent the actual ranges of data. As I mentioned before in my previous example, a series represents and object of measurement (a product), while the data points contain the measurement value data (years and net sales) used to establish a trend.

This would appear in the chart like the following.



ChartArea="MainChart" ChartType="Bar">









This creates a typical bar chart with four bar lines, one for each of the years that shows the trend of net sales dollars.

Custom Labels
[ Back To Top ]


The .NET charting control provides the ability to create custom labels for the X or Y axis. This means that anyone has full control over the text that renders along the axis line. For example, take a look at the following example.



Text="Store Opening" />
Text="Current Year" />

Based upon this list of custom labels, the X axis value for the year 2005 will be transformed to the text "Store Opening", and the current year's axis value will be transformed to "Current Year".

You may be wondering why I use values like 2004.5. I tend to use half decimal points and search for a range. The reasoning is that the X and Y values are doubles, and sometimes even though a value is 16, it may really be 15.999999999999999999999 or 16.000000000000001, and thus searching for an exact value may not produce the actual result. This is one of the many tidbits of knowledge that I learned from reading Steve McConnell's Code Complete.

And so I tend to choose values I'm certain will be a match. I could have used 2004.9 and 2005.1 to fit within the range, which would have been perfectly fine; I just tend to use .5 for whatever reason that may be.

Conclusion
[ Back To Top ]


The free .NET chart control available from Microsoft contains a subset of components originally created by Dundas. This component is a full-fledged charting component rendering bar, line, pie, or statistical charts in a windows or web UI. The chart component has many features available to the user, so many that it's often hard to tell what each feature does.

The chart control uses Series and DataPoints to render a chart within a chart region defined by the ChartArea object. Charts can be 2D or 3D depending on the settings, and the developer has control over colors, borders, fonts, lines, rendering region, and other styling of the chart.

The final result of the markup above, with some added styles, produces the following chart.



The final charting markup looks like the following.

BackColor="LightBlue">














Text="Store Opening" />
Text="2006" />
Text="2007" />
Text="2008" />
Text="Current Year" />










BackGradientStyle="TopBottom" BackSecondaryColor="LightYellow">











Source by Brian Mains - aspalliance.com