Working with Nevron Chart for .NET – Using Axis Scales White Paper

Each axis in control has a scale that defines how the data scaled on it is plotted on the chart area and how values on the scale are annotated. Two major scale types determine how the control will scale categorical (discrete) values and numeric (continuous) ones. The type of scale used by a particular axis is controlled by the ScaleConfigurator property of the respective axis.

Categorical Scale
Categorical scales are used to scale discrete values. Common examples of such values are all types of string data such as company name, region, city, etc. The most common task you need to perform on categorical scales is to change the default category annotation (0, 1, 2, etc.). For example, consider the following chart where the default category labels are replaced with custom ones (“One”, “Two”, “Three”). To achieve this chart, you have to write the following code:

NCartesianChart chart = (NCartesianChart)nChartControl1.Charts[0];

// hide the legend
NLegend legend = nChartControl1.Legends[0];
legend.Visible = false;

// make a square chart
NBarSeries bar = new NBarSeries();
bar.Values.Add(10);
bar.Values.Add(20);
bar.Values.Add(30);
bar.Values.Add(bar);

// get a reference to the ordinal scale of the X axis
NOrdinalScaleConfigurator scaleX = chart.Axis(StandardAxis.PrimaryX).ScaleConfigurator as NOrdinalScaleConfigurator;

// replace the default labels with custom ones
scaleX.AutoLabels = false;
scaleX.Labels.Add("One");
scaleX.Labels.Add("Two");
scaleX.Labels.Add("Three");

Numeric Scale
Numeric scales are used to scale numeric (continuous) data. Different numeric scales address the specifics of the major types of numeric data - number, angle, and date/time.

Linear and Log Scales
Linear and log scales are the two most commonly used numeric scales. Both typically appear along the Y axes and the X/Depth axes in case the control shows an XY/XYZ scatter chart. The pictures from Fig.2 and Fig.3 show two charts with the same data – the powers of 2 represented as a line chart. The first one uses a standard linear scale, and the second one is a logarithmic scale.

The following code shows how to replicate the above chart (a chart with log scale and custom logarithmic step for the Y-axis):

NCartesianChart chart = (NCartesianChart)nChartControl1.Charts[0];

// hide the legend
NLegend legend = nChartControl1.Legends[0];
legend.Visible = false;

// make a square chart
chart.BoundsMode = BoundsMode.Stretch;

// create a line series
NLineSeries line = new NLineSeries();
double baseValue = 2;
line.DataLabelStyle.Visible = false;

for (int i = 0; i < 16; i++)
{
line.Values.Add(baseValue);
baseValue *= 2;
}
chart.Series.Add(line);

NLogarithmicScaleConfigurator logScale = new NLogarithmicScaleConfigurator();
logScale.MajorTickMode = MajorTickMode.CustomStep;
logScale.CustomStep = 2;
logScale.MajorGridStyle.SetShowAtWall(ChartWallType.Back, true);

chart.Axis(StandardAxis.PrimaryY).ScaleConfigurator = logScale;

Date/Time Scales
Date/Time scales are used to display information about data points with date/time coordinates (most commonly X coordinate) and are similar to linear numeric scales. The difference is that Date/Time annotation is more complex than numeric scale annotation because specific date units are not regularly spaced apart - for example - the duration of one month varies depending on the month, and in the case of February, depending on the year.
Nevron Chart supports all commonly used date time scales, including some widely used in financial and project management applications. .

The date-time scale annotates a date-time range with a step that is multiple of a single date-time unit (one day, two days, one month, etc.). The picture in Fig.4 shows a chart annotated with a step of one month.

This chart is achieved with the following code:

NCartesianChart chart = (NCartesianChart)nChartControl1.Charts[0];

// hide the legend
NLegend legend = nChartControl1.Legends[0];
legend.Visible = false;

// make a square chart
chart.BoundsMode = BoundsMode.Stretch;

// create a line series
NLineSeries line = new NLineSeries();

Random rand = new Random();
line.DataLabelStyle.Visible = false;

// the line uses x values (date/time)
line.UseXValues = true;

DateTime now = DateTime.Now; for (int i = 0; i < 356; i++) {
line.Values.Add(Math.Sin(2 * Math.PI * (i / 200.0)) * 40 + rand.Next(10) + 60);
line.XValues.Add(now);

// add one day
now += new TimeSpan(1, 0, 0, 0);
}

chart.Series.Add(line);

chart.Series.Add(line);

// switch the x axis to date / time
NDateTimeScaleConfigurator dateTimeScale = new NDateTimeScaleConfigurator();
dateTimeScale.LabelStyle.Angle = new NScaleLabelAngle(ScaleLabelAngleMode.View, 90);
dateTimeScale.LabelStyle.ContentAlignment = ContentAlignment.TopCenter;
chart.Axis(StandardAxis.PrimaryX).ScaleConfigurator = dateTimeScale;

Note that the line series contains date-time values in its XValues data series, and the X-axis uses a date time scale. In addition, the above code shows how to use vertical texts on the axis to improve the readability of longer labels.
Although this date/time annotation of the scale is correct, it is not very informative because it will not highlight important date/time events on the scale, such as quarter and year change. In financial and project management applications, it is common to use a more advanced date/time scale type – the value and range timeline scale.
The chart in Fig.5 is the same but uses a value timeline scale. Note how the scale has highlighted the half-year, quarter, and year date time events on the chart while keeping month information compact. The same chart using a range timeline scale – this scale uses more space but is more readable. The user can clearly identify the beginning and each period depending on the selected units for annotation – a month for the first level, a quarter for the second, and a half year for the third. To achieve one of the above you simply have to assign a different scale to the x axis:

chart.Axis(StandardAxis.PrimaryX).ScaleConfigurator = new NValueTimelineScaleConfigurator();

Scale Decorations
All scale types support control over how the scale is decorated - for example, axis title, scale ticks color and density, label formatting, etc. In addition, scales provide control over annotations that show on the chart plot – such as grid lines and stripes, which further improve the chart’s readability.

Axis Title
The most common scale annotation supported by all scales is the axis title. To change the scale title, you need to touch the scale configurator Title.Text property:

chart.Axis(StandardAxis.PrimaryX).ScaleConfigurator.Title.Text = "X Axis";
This is common for all axis types.

Label and Tick Density
All scale types support control over the tick/label density of the axis, and there are many available options. The following code shows how easy it is to set the tick step of the Y numeric axis to a fixed step of 10:

[C#]
NLinearScaleConfigurator scaleY = chart.Axis(StandardAxis.PrimaryY).ScaleConfigurator as NLinearScaleConfigurator;
scaleY.MajorTickMode = MajorTickMode.CustomStep;
scaleY.CustomStep = 10;

Gridlines
Grid lines extend from the ticks displayed on the axis and extend along the chart plot. Their objective is to mark the values for the user reading the chart. The following code shows the major gridlines on the back chart wall:

chart.Axis(StandardAxis.PrimaryX).ScaleConfigurator.MajorGridStyle.SetShowAtWall(ChartWallType.Back, true);

There are many other options related to scales, such as control over the label formatting, style of the axis ruler, it begin/end caps, etc.