Gallery

Gallery > Axis Ticks And Labels

JS Range Tick Layout

Demonstrates Custom range ticks with multiple and offset axes.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// This sample demonstrates Custom range ticks with multiple and offset axes.
Chart.Type = ChartType.Combo;
Chart.Width = 870;
Chart.Height = 480;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.DefaultSeries.Type = SeriesType.Column;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Buttons.EnableExportButton = false;
ChartArea ca = new ChartArea();
ca.ClearColors();
ca.LegendBox.Template = "%icon %name";
ca.LegendBox.ClearColors();
ca.LegendBox.Orientation = dotnetCHARTING.Orientation.Top;
//ca.LegendBox.Position = LegendBoxPosition.Top;
Chart.ChartArea = ca;
Chart.Palette = new Color[9] { ColorTranslator.FromHtml("#42a5f5"), ColorTranslator.FromHtml("#f48fb1"), ColorTranslator.FromHtml("#ec407a"), ColorTranslator.FromHtml("#90caf9"), ColorTranslator.FromHtml("#ffee58"), ColorTranslator.FromHtml("#ff7043"), ColorTranslator.FromHtml("#66bb6a"), ColorTranslator.FromHtml("#c2185b"), ColorTranslator.FromHtml("#5c6bc0")};

LegendBox legendBox = new LegendBox();
legendBox.Orientation = dotnetCHARTING.Orientation.Top;

legendBox.Padding =5;
//Chart.ChartArea.LegendBox = legendBox;
//Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.YAxis.Maximum = 600;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.FormatString = "c:0";
Chart.YAxis.Line.Width = 0;
Chart.YAxis.Label.Text = "Billions";
Chart.YAxis.Scale = Scale.Stacked;
Chart.YAxis.JsID = "mainY";
Chart.XAxis.DefaultTick.Label.AutoWrap = true;
Chart.XAxis.DefaultTick.Line.Width = 0;
Chart.XAxis.TickLabelAngle = -90;

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/financialAnalysis.csv";
de.DataFields = "xAxis=quarter,yAxis=commercial paper,yAxis=accumulated buybacks,yAxis=accumulated dividends,yAxis=long term debt,yAxis=long-term marketable securities,yAxis=short-term marketable securities,yAxis=cash and cash equivalent";
SeriesCollection sc = de.GetSeries();

Series generatedcash = sc.Calculate("Generated cash", Calculation.Sum);
generatedcash.Type = SeriesType.Line;
generatedcash.DefaultElement.Marker.Type = ElementMarkerType.Circle;
generatedcash.DefaultElement.Marker.Size = 10;
Chart.SeriesCollection.Add(generatedcash);

SeriesCollection sc2 = new SeriesCollection();
foreach(Series sr in sc)
{
if(sr.Name!="accumulated buybacks" && sr.Name!="accumulated dividends" )
{
sc2.Add(sr);
}
}
Series cashnetdebt = sc2.Calculate("Cash net of all debt", Calculation.Sum);
cashnetdebt.Type = SeriesType.Line;
cashnetdebt.DefaultElement.Marker.Type = ElementMarkerType.Circle;
cashnetdebt.DefaultElement.Marker.Size = 10;
Chart.SeriesCollection.Add(cashnetdebt);
Chart.SeriesCollection.Add(sc);

// Setup the shadow axis and add it.
Axis shadow = Chart.YAxis.Calculate("");
shadow.DefaultTick.GridLine.Color = Color.Empty;
//shadow.DefaultTick.Line.EndCap = LineCap.ArrowAnchor;
shadow.DefaultTick.Line.Length = 20;
shadow.DefaultTick.Line.DashStyle = DashStyle.Dash;
shadow.DefaultTick.Line.Color = Color.LightGray;
shadow.Orientation = dotnetCHARTING.Orientation.Right;
shadow.DefaultTick.Value = "";//disable default ticks but shows custom ticks
shadow.Line.Visible = false;
Chart.AxisCollection.Add(shadow);

// Setup the shadow2 axis and add it.
Axis shadow2 = Chart.YAxis.Calculate("");
shadow2.DefaultTick.GridLine.Color = Color.Empty;
shadow2.DefaultTick.Line.EndCap = LineCap.ArrowAnchor;
shadow2.DefaultTick.Line.Length = 60;
shadow2.DefaultTick.Line.DashStyle = DashStyle.Dash;
shadow2.DefaultTick.Line.Color = Color.LightGray;
shadow2.Orientation = dotnetCHARTING.Orientation.Right;
shadow2.DefaultTick.Value = "";//disable default ticks but shows custom ticks
shadow2.Line.Visible = false;
Chart.AxisCollection.Add(shadow2);

//Add custom ticks to yAxis shadow axis
Chart.JS.Settings.Add("yAxis.1.defaultTick.rangeMode", "'measure'");
AxisTick at = new AxisTick();
at.Label.Text = "Debt";
at.Value = "[-126.7,0]";
shadow.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Capital Returned";
at.Value = "[245.04,566.75]";
shadow.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Dividends Paid";
at.Value = "[245.04,322.87]";
shadow.ExtraTicks.Add(at);
Chart.JS.Settings.Add("yAxis.1.customTicks.2.label_placement", "'outside'");

at = new AxisTick();
at.Label.Text = "Share Buybacks";
at.Value = "[322.87,566.75]";
shadow.ExtraTicks.Add(at);
//2nd shadow YAxis
Chart.JS.Settings.Add("yAxis.2.defaultTick.line.caps.end.size", "5");
Chart.JS.Settings.Add("yAxis.2.caOffset", "0");
at = new AxisTick();
at.Label.Text = "Cash Net of all Debt";
at.Value = "118.34";
shadow2.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Cash on hand";
at.Value = "245.04";
shadow2.ExtraTicks.Add(at);

at = new AxisTick();
at.Label.Text = "Generated Cash";
at.Value = "440.05";
shadow2.ExtraTicks.Add(at);
}

</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server">
</dotnet:Chart>
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample demonstrates Custom range ticks with multiple and offset axes.
Chart.Type = ChartType.Combo
Chart.Width = 870
Chart.Height = 480
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.DefaultSeries.Type = SeriesType.Column
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Buttons.EnableExportButton = False
Dim ca As ChartArea = New ChartArea()
ca.ClearColors()
ca.LegendBox.Template = "%icon %name"
ca.LegendBox.ClearColors()
ca.LegendBox.Orientation = dotnetCHARTING.Orientation.Top
'ca.LegendBox.Position = LegendBoxPosition.Top;
Chart.ChartArea = ca
Chart.Palette = New Color(8) { ColorTranslator.FromHtml("#42a5f5"), ColorTranslator.FromHtml("#f48fb1"), ColorTranslator.FromHtml("#ec407a"), ColorTranslator.FromHtml("#90caf9"), ColorTranslator.FromHtml("#ffee58"), ColorTranslator.FromHtml("#ff7043"), ColorTranslator.FromHtml("#66bb6a"), ColorTranslator.FromHtml("#c2185b"), ColorTranslator.FromHtml("#5c6bc0")}

Dim legendBox As LegendBox = New LegendBox()
legendBox.Orientation = dotnetCHARTING.Orientation.Top

legendBox.Padding =5
'Chart.ChartArea.LegendBox = legendBox;
'Chart.LegendBox.Orientation = dotnetCHARTING.Orientation.Bottom;
Chart.YAxis.Maximum = 600
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.FormatString = "c:0"
Chart.YAxis.Line.Width = 0
Chart.YAxis.Label.Text = "Billions"
Chart.YAxis.Scale = Scale.Stacked
Chart.YAxis.JsID = "mainY"
Chart.XAxis.DefaultTick.Label.AutoWrap = True
Chart.XAxis.DefaultTick.Line.Width = 0
Chart.XAxis.TickLabelAngle = -90

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/financialAnalysis.csv"
de.DataFields = "xAxis=quarter,yAxis=commercial paper,yAxis=accumulated buybacks,yAxis=accumulated dividends,yAxis=long term debt,yAxis=long-term marketable securities,yAxis=short-term marketable securities,yAxis=cash and cash equivalent"
Dim sc As SeriesCollection = de.GetSeries()

Dim generatedcash As Series = sc.Calculate("Generated cash", Calculation.Sum)
generatedcash.Type = SeriesType.Line
generatedcash.DefaultElement.Marker.Type = ElementMarkerType.Circle
generatedcash.DefaultElement.Marker.Size = 10
Chart.SeriesCollection.Add(generatedcash)

Dim sc2 As SeriesCollection = New SeriesCollection()
For Each sr As Series In sc
If sr.Name<>"accumulated buybacks" AndAlso sr.Name<>"accumulated dividends" Then
sc2.Add(sr)
End If
Next sr
Dim cashnetdebt As Series = sc2.Calculate("Cash net of all debt", Calculation.Sum)
cashnetdebt.Type = SeriesType.Line
cashnetdebt.DefaultElement.Marker.Type = ElementMarkerType.Circle
cashnetdebt.DefaultElement.Marker.Size = 10
Chart.SeriesCollection.Add(cashnetdebt)
Chart.SeriesCollection.Add(sc)

' Setup the shadow axis and add it.
Dim shadow As Axis = Chart.YAxis.Calculate("")
shadow.DefaultTick.GridLine.Color = Color.Empty
'shadow.DefaultTick.Line.EndCap = LineCap.ArrowAnchor;
shadow.DefaultTick.Line.Length = 20
shadow.DefaultTick.Line.DashStyle = DashStyle.Dash
shadow.DefaultTick.Line.Color = Color.LightGray
shadow.Orientation = dotnetCHARTING.Orientation.Right
shadow.DefaultTick.Value = "" 'disable default ticks but shows custom ticks
shadow.Line.Visible = False
Chart.AxisCollection.Add(shadow)

' Setup the shadow2 axis and add it.
Dim shadow2 As Axis = Chart.YAxis.Calculate("")
shadow2.DefaultTick.GridLine.Color = Color.Empty
shadow2.DefaultTick.Line.EndCap = LineCap.ArrowAnchor
shadow2.DefaultTick.Line.Length = 60
shadow2.DefaultTick.Line.DashStyle = DashStyle.Dash
shadow2.DefaultTick.Line.Color = Color.LightGray
shadow2.Orientation = dotnetCHARTING.Orientation.Right
shadow2.DefaultTick.Value = "" 'disable default ticks but shows custom ticks
shadow2.Line.Visible = False
Chart.AxisCollection.Add(shadow2)

'Add custom ticks to yAxis shadow axis
Chart.JS.Settings.Add("yAxis.1.defaultTick.rangeMode", "'measure'")
Dim at As AxisTick = New AxisTick()
at.Label.Text = "Debt"
at.Value = "[-126.7,0]"
shadow.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Capital Returned"
at.Value = "[245.04,566.75]"
shadow.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Dividends Paid"
at.Value = "[245.04,322.87]"
shadow.ExtraTicks.Add(at)
Chart.JS.Settings.Add("yAxis.1.customTicks.2.label_placement", "'outside'")

at = New AxisTick()
at.Label.Text = "Share Buybacks"
at.Value = "[322.87,566.75]"
shadow.ExtraTicks.Add(at)
'2nd shadow YAxis
Chart.JS.Settings.Add("yAxis.2.defaultTick.line.caps.end.size", "5")
Chart.JS.Settings.Add("yAxis.2.caOffset", "0")
at = New AxisTick()
at.Label.Text = "Cash Net of all Debt"
at.Value = "118.34"
shadow2.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Cash on hand"
at.Value = "245.04"
shadow2.ExtraTicks.Add(at)

at = New AxisTick()
at.Label.Text = "Generated Cash"
at.Value = "440.05"
shadow2.ExtraTicks.Add(at)
End Sub

</script>
</head>
<body>
<div align="center">
<dotnet:Chart ID="Chart" runat="server">
</dotnet:Chart>
</div>
</body>
</html>

Sample FilenameJsRangeTickLayout.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Range Tick Layout