Click here to Skip to main content
15,351,229 members
Articles / Web Development / ASP.NET
Posted 25 Aug 2004


1 download
30 bookmarked

Understanding Chart Areas with Dundas Chart for .NET

25 Aug 20045 min read
Using Chart Areas with Dundas Chart for .NET

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

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.

Image 1

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).

Image 2
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.

Image 3
Figure 2: All data shown on one Chart Area

Image 4
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.

  Image 5
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!

Image 6
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).

Image 7
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.

Image 8
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.

Image 9
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.

Image 10
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. 

Image 11
Figure 10: Multiple Primary Y-Axis

Image 12
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.

Image 13


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Since 1992 Dundas Data Visualization has been helping companies all over the world visualize their data. Dundas products have a global reputation of being the highest quality, and are all designed, built and tested to meet the strictest requirements that developers and business managers demand.

Our showcase product is Dundas Dashboard, an easy-to-integrate digital dashboard software solution. Dundas Dashboard allows for the rapid and collaborative development of performance dashboards, helping companies leverage their business intelligence (BI) solutions.

Our web-based dashboard software comes with wizard interfaces, and a unique Dundas DashFlowTM process, allowing for the simultaneous development of an executive dashboard by business analysts, IT staff and database administrators. It also uses premier charts, maps, gauges and graph controls, letting end-users visualize their data as required.

Dundas also offers superb, world class consulting services for those companies that do not have the in-house expertise to implement their data visualization projects.

The quality of our products in conjunction with our unmatched technical support, numerous awards and years of experience reflect Dundas Data Visualization's commitment to being the best!
Group type: Organisation

3 members

Comments and Discussions

QuestionIssue on Production server - SSRS with Dundas Charts Pin
bopanna_dalu26-Jul-14 9:38
Memberbopanna_dalu26-Jul-14 9:38 
GeneralJust use WebChart, it's free. Pin
Greg Ellis15-Sep-07 6:06
MemberGreg Ellis15-Sep-07 6:06 
SuggestionRe: Just use WebChart, it's free. Pin
mohanjune198720-Sep-12 18:05
Membermohanjune198720-Sep-12 18:05 
Generallmd Pin
kurnikov11-Apr-07 6:34
Memberkurnikov11-Apr-07 6:34 
QuestionChart Type Suggestion Needed? Pin
gman449-Apr-07 18:31
Membergman449-Apr-07 18:31 
Questiontitle positioning in the dundas chart Pin
sharp_monu20-Apr-06 19:58
Membersharp_monu20-Apr-06 19:58 
Generaltitle positioning in the dundas chart Pin
sharp_monu20-Apr-06 19:49
Membersharp_monu20-Apr-06 19:49 
GeneralRe: title positioning in the dundas chart Pin
Rabi@Dundas24-Apr-06 4:18
MemberRabi@Dundas24-Apr-06 4:18 
Generalfaint Pin
jabby30-May-05 18:24
Memberjabby30-May-05 18:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.