+1-888-201-6088 | email@nevron.com
Nevron logo
Nevron word

Chart Multiple Axes and Axis Docking

Working with Chart Multiple Axes – Nevron Chart Axis Docking

Introduction

Having a chart with several Y axes is a requirement you will meet very often when you develop charting enabled applications. It is essential that a good charting product supports flexible Y axis positioning and layout. This white paper outlines the different options you have with Nevron Chart for .NET to address a variety of situations requiring you to use multiple Y axes.

Features

The most common requirement is to have two Y axes and two series scaling on each of them. This is common when you need to compare two series of data that differ in magnitude or measurement, but you still want to have the ability to compare them visually in order to give the end user the ability to analyze trends or relations between the two. For example consider the following picture (Fig. 1) showing 120 days of imaginary water measurement:

It is clear that the user cannot properly analyze the two since water reserves differ in magnitude from water debit.
Water Measurement On Single Axis

Fig. 1

One solution would be to use a secondary axis for the debit data in order to show the two trends simultaneously:

On the second picture (Fig. 2), the debit measurement is shown on the secondary primary axis and is additionally rebased at 90. The code used to scale the debit area on the secondary Y axis is:

[C#]
NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
secondaryY.Visible = true;

areaDebit.DisplayOnAxis(StandardAxis.PrimaryY, false);
areaDebit.DisplayOnAxis(StandardAxis.SecondaryY, true);

[VB.NET]
Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
secondaryY.Visible = True

areaDebit.DisplayOnAxis(StandardAxis.PrimaryY, False)
areaDebit.DisplayOnAxis(StandardAxis.SecondaryY, True)
Water Measurement On Two Axes

Fig. 2

Note that the chart area has shrunk when the secondary Y axis is made visible. In certain cases you may want to have both axes on the same side of the chart. The following picture (Fig. 3) shows this:

In order to change the position of the SecondaryY axes you must modify its anchor:

[C#]
NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
secondaryY.Visible = true;
secondaryY.Anchor = new
NDockAxisAnchor(AxisDockZone.FrontLeft);

[VB.NET]
Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
secondaryY.Visible = True
secondaryY.Anchor = New
NDockAxisAnchor(AxisDockZone.FrontLeft)

Now the secondary Y axis is docked on the left side to the primary Y (showing the range [0, 1200]).
Water Measurement On Two Axes Left Dock
Fig. 3

The above chart needs another touch. When you dock several axes to a single axis dock zone (in the above case left zone) you may want to introduce some color coding linking the axes to the series that scale on them. This is necessary because the user cannot visually comprehend whether the debit scales from 90 to 115 or from 0 to 1200. The following picture (Fig. 4) shows how the axes are now color coded to match the content that scales on them:

Note that we also disabled the inner major ticks in the axes in order to save some space. This is achieved through the following code:

[C#]
NAxis primaryY = (NAxis)chart.Axis(StandardAxis.PrimaryY);
NStandardScaleConfigurator primaryScaleY = primaryY.ScaleConfigurator as NStandardScaleConfigurator;
primaryScaleY.RulerStyle.BorderStyle.Color = Color.DarkOrange;
primaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.DarkOrange;
primaryScaleY.InnerMajorTickStyle.Length = new NLength(0);
primaryScaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.DarkOrange);

NAxis secondaryY = (NAxis)chart.Axis(StandardAxis.SecondaryY);
NLinearScaleConfigurator secondaryScaleY = secondaryY.ScaleConfigurator as NLinearScaleConfigurator;
secondaryScaleY.RulerStyle.BorderStyle.Color = Color.Green;
secondaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.Green;
secondaryScaleY.InnerMajorTickStyle.Length = new NLength(0);
secondaryScaleY.UseOrigin = true;
secondaryScaleY.Origin = 100;
secondaryScaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.Green);

[VB.NET]
Dim primaryY As NAxis = chart.Axis(StandardAxis.PrimaryY)
Dim primaryScaleY As NStandardScaleConfigurator = CType(primaryY.ScaleConfigurator, NStandardScaleConfigurator)
primaryScaleY.RulerStyle.BorderStyle.Color = Color.DarkOrange
primaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.DarkOrange
primaryScaleY.InnerMajorTickStyle.Length = New NLength(0)
primaryScaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.DarkOrange)

Dim secondaryY As NAxis = chart.Axis(StandardAxis.SecondaryY)
Dim secondaryScaleY As NLinearScaleConfigurator = CType(secondaryY.ScaleConfigurator, NLinearScaleConfigurator)
secondaryScaleY.RulerStyle.BorderStyle.Color = Color.Green
secondaryScaleY.OuterMajorTickStyle.LineStyle.Color = Color.Green
secondaryScaleY.InnerMajorTickStyle.Length = New NLength(0)
secondaryScaleY.UseOrigin = True
secondaryScaleY.Origin = 100
secondaryScaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.Green)
Water Measurement On Two Axes Left Dock Color Coded

Fig. 4
Nevron Chart can have an unlimited number of custom vertical and horizontal axes. You can specify the axis on which a particular series is scaled. When using axis docking you can also specify whether the axis will create a separate level in the dock zone or use the last created one. This allows you to have two or more axes in a zone level that share a percentage of the chart wall.

Conclusion

Nevron Chart for .NET fully supports charts with several X and Y axes and additionally allows you to customize a variety of options to get the desired result for your charts. Very few charting packages support docking several axes on the left or rights side of the chart area. More information on axis positioning is available in the Users Guide shipped with the fully functional evaluation of the Chart component.

About Nevron Software

Founded in 1998, Nevron Software is a component vendor specialized in the development of premium presentation layer solutions for .NET based technologies. Today Nevron has established itself as the trusted partner worldwide for use in .NET LOB applications, SharePoint portals and Reporting solutions. Nevron technology is used by many Fortune 500 companies, large financial institutions, global IT consultancies, academic institutions, governments and non-profits.
For more information, visit: www.nevron.com.

Customer Quotes:

QUOTE The quality of the graphics we produce with Nevron Chart greatly impresses everyone. While the software development department in our startup company consists of only five people, the fact that we can produce world-class graphics goes a long way towards convincing potential clients of our professionalism.

I like to lead off the demonstrations that I provide for customers with one or more of the plots I generate with Nevron Chart. The quality of these graphics is so obvious and so arresting that they grab everyone's attention, and make sure that the people in the room are going to listen to whatever I have to say next.

The Nevron Chart software is absolutely central to our software development efforts. The data analysis package that we've written uses graphics to tell the stories that lies behind the data, and the precision and user interactivity that we can achieve with the Nevron package enable us to tell those stories in a very compelling fashion.

We have been using Nevron Chart as a central element in our software development efforts for the last three years, and we have no desire to switch to any other package. I've been consistently impressed with the robustness of the code, the range of the capabilities, and above all with the quality of the graphics since the time that I first started experimenting with this package. Graphical presentations have been a part of my scientific programming efforts for the last 20 years, and as far as I'm concerned there is no other package on the market that is better than Nevron Chart.
UNQUOTE

Benjamin Alexander
BioProcessors