Understanding Chart Areas with Dundas Chart for .NET

This is a showcase review for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

• Download a Dundas Chart for .NET Evaluation

What is a Chart Area?

You are probably asking yourself, “Why on earth am I reading a whitepaper about something mundane as the area on a chart where my data is shown?”.  On any other chart this may be a valid question; but with Dundas Chart for .NET a Chart Area is a sophisticated chart element that gives you versatility that other charts do not. Read on and you will see.

What makes the concept of a Chart Area important?

Using the Dundas Chart, you will find that we have several major elements that we use to graphically present your data. These include Legends, Labels, Titles and Chart Areas. The Chart Area is one of the most important of all elements on a chart picture and is the area that contains the chart axis (including the axis labels and title) and the plotting area (the region where your data is plotted).

Figure 1: Major Chart Elements of Dundas Chart for .NET

Dundas Chart for .NET, like all charts, requires a region for painting the chart. We call this region the Chart Area. What is unique to Dundas Chart for .NET is that more than one Chart Area can be shown on a chart picture, allowing you to clearly visualize your data.

Figure 2: All data shown on one Chart Area

Figure 3: Separating the data into two Chart Areas

It can be seen from the above images that showing all data within a single ChartArea may not be the best way to visualize your data.  Breaking the data into separate chart areas is a better solution.

 
Figure 4: Dundas Chart for .NET Stock Chart

Alignment issues are no more!

Ok, you have multiple charts showing your data.  Now, how do you display it in order to show the viewer that the data sets share a similar axis for comparison?  Manual alignment can be a seemingly endless ordeal of aligning the charts. To achieve a desired effect often involves several iterations of trial and error to get it right. Even then, the alignments may be right in most circumstances but may become misaligned in some cases due to abnormally large axis labels, for example. For this reason, we have introduced a feature to the Chart Area that will handle the alignment correctly for all situations and is the recommended means of aligning chart areas.

Using the Alignment feature properties, we can define the chart area that others should align, as well as the orientation of the alignment and chart elements that should define the alignment. Simple alignment can be quickly achieved in one line of code!

Figure 5: Aligning Chart Areas

// Set Price ChartArea to Align Volume ChartArea Chart1.
ChartAreas["PriceChartArea"].AlignWithChartArea = "VolumeChartArea";

Additional properties are provided to define the alignment orientation (Vertical, Horizontal or Both) as well as defining the elements that should be used as the basis for alignment (Position, PlotPosition, Cursors, View or All).

Figure 6: Horizontally Aligned Chart Areas

Improved performance with multiple chart Areas

On some Web pages or Windows Forms applications there may be a need for displaying multiple sets of data graphically. For a Windows Form application, the time to render the images may be inconsequential. For a web page on a busy site, time and bandwidth are critical.

For example, take a web page that renders two charts. In this case, the overhead time for instantiating the chart objects and creating two images ought to be considered, and is an external factor of performance.  This can be reduced by complex means of caching chart objects in an Application object pool but for many developers this is beyond their skills.  However, a good solution is to use multiple chart areas instead of multiple chart objects.  This will reduce the number of chart objects that need to be created, populated and rendered.  We find this solution of displaying your data on a well-aligned and titled image is a significant improvement to the render time of a web page.

How are Chart Areas used within Dundas Chart?

A Chart Area in software is represented by a ChartArea object, persisted in the ChartAreas collection.  This results in a limitless number of Chart Areas per chart picture. All ChartArea objects provide the basic features of a chart area (general appearance, positioning, axis appearance, etc) as well as some awesome 3D, scrolling / zooming and cursor features.


Figure 7: Chart Area Appearance and Styles

Additional customization of the Chart Area can be done through the use of several Chart events that are exposed to the user, including Paint Events that are fired just before and after the Chart Area has been painted.

Figure 8: Customizing through Paint Events

private void Chart_PostPaint(object sender, 
                             Dundas.Charting.WebControl.ChartPaintEventArgs e)
{
   if(sender is ChartArea)
   {
      // get the chart object
      ChartArea area = (ChartArea)sender;

      // Take Graphics object from chart
      Graphics graph = e.ChartGraphics.Graphics;

      // Get the top left corner of the chart area
      PointF point = new PointF();
      point.Y = (float)e.ChartGraphics.GetPositionFromAxis(area.Name,
                                             AxisName.Y, area.AxisY.Maximum);
      point.X = (float)e.ChartGraphics.GetPositionFromAxis(area.Name,
                                             AxisName.X, area.AxisX.Minimum);

      // Convert relative coordinates to absolute coordinates.
      point = e.ChartGraphics.GetAbsolutePoint(point);

      // draw the name of the chart area 
      Font font = new Font("Arial", 18);
      SolidBrush brush = new SolidBrush(Color.Maroon);
      graph.DrawString("Custom Paint Event", font, brush, point);
   }
};

What else can I do with a Chart Area?

The real power of the Chart Area is shown by doing the cool stuff. Have you ever wanted to display a different chart type that is not supported, or use a unique axis arrangement? All of these, and more, can be done with Dundas Chart for .NET with the use of Chart Area overlays.

A ChartArea overlay is basically the positioning of Chart Areas with a Transparent BackColor to be drawn over top of each other.  The doughnut charts below demonstrate this.


Figure 9: Doughnut Chart within a Doughnut Chart

The visual effect of overlaying lets you create unique chart types and other visual effects.  The extent of what you can do with overlaying is pretty much left to your imagination.  At Dundas Software, we have found other visual effects useful, including the overlaying of ChartArea elements to give multiple primary Y-axis scales or using pie charts as data points. 

Figure 10: Multiple Primary Y-Axis

Figure 11: Pie Charts used as Bubble Chart data points

The source code to create each of these charts is available within the samples distributed with Dundas Chart for .NET; download a full evaluation copy of Dundas Chart for .NET and experiment with our extensive sample set or visit the Dundas Chart Gallery on our website.