Applies to: Nevron Chart for SharePoint (WSS3.0, SharePoint 2007/2010/2013)
How to add multiple Y axis in the Chart for SharePoint?
It is a common requirement to have two Y axes 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 chart series.
Nevron Chart Web Part provides support for Primary and Secondary Y (and X) axis, as a built-in feature in the Chart Designer. However, in many cases you may need to have a chart with more than two Y or X axes – Multiple Axes. This is very helpful when you need to scale different chart series, each on its own axis. Nevron Chart for SharePoint provides the capability to have multiple (unlimited) Y and X axes. This can be achieved by using custom code injection to add Custom Axes. The Chart is also providing flexible Y and X axis positioning and layout.
The following example demonstrates how to add an additional Third Y Axis, by using custom code, and scale the last chart series on it. Let's say that we have a Combo Chart type which has 3 Value Groupings configured from the Pivot tab – for Open, Close and Volume dataset fields.
In this example the Open and Close are represented as the red and blue Line chart series. The Open line series is scaled on the Primary Y axis and the Close line is scaled on the Secondary Y axis. This can be done from the Pivot >> Data Groupings >> Values >> General >> Options tab (for each chart series):
We have configured the same colors for the two line series and their corresponding Axis Ruler, Gridlines, Ticks and Labels. This can provide better chart readability and comparisons between the different series.
For the last Value Grouping (the Volume) we have selected an Area Series Type.
The Volume data is much larger than the Open and Close so we will need to scale the Area series on a third Y-axis.
The following custom code will:
- Create our Custom Y Axis
- Scale the Area series on the Custom Axis
- Color the Custom Axis Ruler, Gridlines, Ticks and Labels, based on the Area border style
You can add custom code from the Chart Designer >> Code tab:
[C#]
using System;
using System.Drawing;
using Nevron.GraphicsCore;
using Nevron.Chart;
using Nevron.ReportingServices;
namespace MyNamespace
{
/// <summary>
/// Sample class
/// </summary>
public class MyClass
{
/// <summary>
/// Main entry point
/// </summary>
/// <param name="context"></param>
public static void RSMain(NRSChartCodeContext context)
{
if (context.Document.Charts.Count == 0)
return;
// get the first chart in the document
NChart chart = context.Document.Charts[0];
if (chart.Series.Count < 2)
return;
// create a custom Y axis
NCartesianAxisCollection axes = (NCartesianAxisCollection)chart.Axes;
NAxis axisY = axes.AddCustomAxis(AxisOrientation.Vertical, AxisDockZone.FrontRight);
axisY.Anchor = new NDockAxisAnchor(AxisDockZone.FrontRight, true, 0, 100);
// create the scale
NLinearScaleConfigurator scaleY = new NLinearScaleConfigurator();
axisY.ScaleConfigurator = scaleY;
axisY.Visible = true;
// get the third chart series (the Area chart)
NAreaSeries area = chart.Series[2] as NAreaSeries;
if (area != null)
{
area.DisplayOnAxis(StandardAxis.PrimaryY, false);
area.DisplayOnAxis(axisY.AxisId, true);
scaleY.RulerStyle.BorderStyle.Color = area.BorderStyle.Color;
scaleY.RulerStyle.BorderStyle.Width = area.BorderStyle.Width;
scaleY.MajorGridStyle.SetShowAtWall(ChartWallType.Back, true);
scaleY.MajorGridStyle.LineStyle.Color = area.BorderStyle.Color;
scaleY.MajorGridStyle.LineStyle.Pattern = LinePattern.DashDot;
scaleY.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(area.BorderStyle.Color);
scaleY.LabelStyle.TextStyle.FontStyle = new NFontStyle("Verdana", 8);
scaleY.OuterMajorTickStyle.LineStyle.Color = area.BorderStyle.Color;
scaleY.InnerMajorTickStyle.LineStyle.Color = area.BorderStyle.Color;
}
}
}
}
[VB.NET]
Imports System
Imports System.Drawing
Imports Nevron.GraphicsCore
Imports Nevron.Chart
Imports Nevron.ReportingServices
Namespace MyNamespace
''' <summary>
''' Sample class
''' </summary>
Public Class [MyClass]
''' <summary>
''' Main entry point
''' </summary>
''' <param name="context"></param>
Public Shared Sub RSMain(context As NRSChartCodeContext)
If context.Document.Charts.Count = 0 Then
Return
End If
' get the first chart in the document
Dim chart As NChart = context.Document.Charts(0)
If chart.Series.Count < 2 Then
Return
End If
' create a custom Y axis
Dim axes As NCartesianAxisCollection = DirectCast(chart.Axes, NCartesianAxisCollection)
Dim axisY As NAxis = axes.AddCustomAxis(AxisOrientation.Vertical, AxisDockZone.FrontRight)
axisY.Anchor = New NDockAxisAnchor(AxisDockZone.FrontRight, True, 0, 100)
' create the scale
Dim scaleY As New NLinearScaleConfigurator()
axisY.ScaleConfigurator = scaleY
axisY.Visible = True
' get the third chart series (the Area chart)
Dim area As NAreaSeries = TryCast(chart.Series(2), NAreaSeries)
If area IsNot Nothing Then
area.DisplayOnAxis(StandardAxis.PrimaryY, False)
area.DisplayOnAxis(axisY.AxisId, True)
scaleY.RulerStyle.BorderStyle.Color = area.BorderStyle.Color
scaleY.RulerStyle.BorderStyle.Width = area.BorderStyle.Width
scaleY.MajorGridStyle.SetShowAtWall(ChartWallType.Back, True)
scaleY.MajorGridStyle.LineStyle.Color = area.BorderStyle.Color
scaleY.MajorGridStyle.LineStyle.Pattern = LinePattern.DashDot
scaleY.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(area.BorderStyle.Color)
scaleY.LabelStyle.TextStyle.FontStyle = New NFontStyle("Verdana", 8)
scaleY.OuterMajorTickStyle.LineStyle.Color = area.BorderStyle.Color
scaleY.InnerMajorTickStyle.LineStyle.Color = area.BorderStyle.Color
End If
End Sub
End Class
End Namespace
By using the same technique, you can have Multiple (unlimited) Y and X Axes in Nevron Chart for SharePoint.
Article ID: 232, Created On: 1/17/2013, Modified: 1/29/2013