Gallery

Gallery > Axis Ticks And Labels

JS Range Ticks On Series

Demonstrates series value ranges with multiple y 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" %>
<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 series value ranges with multiple y axes.
Chart.Type = ChartType.Combo;
Chart.Width = 875;
Chart.Height = 480;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.DefaultSeries.Type = SeriesType.AreaSpline;
Chart.DefaultSeries.DefaultElement.Marker.Visible = false;
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.LegendBox.Visible = false;
Chart.Palette = new Color[2] { Color.FromArgb(66,133,244), Color.Gray };
Chart.TitleBox.Label.Text = "Cumulative Devices (thousands)";
Chart.TitleBox.Label.Font = new Font("Arial", 15, FontStyle.Bold);
Chart.TitleBox.ClearColors();
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.Top;
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.ChartArea.ClearColors();
Chart.YAxis.DefaultTick.GridLine.Color = Color.Empty;
Chart.YAxis.JsID = "mainY";
Chart.YAxis.Line.Visible = false;
Chart.YAxis.Orientation = dotnetCHARTING.Orientation.Right;
Chart.YAxis.ClearValues = true;

Chart.XAxis.JsID = "mainX";
Chart.XAxis.DefaultTick.GridLine.Color = Color.Empty;

// Setup the shadow axis and add it.
Axis shadowX = Chart.XAxis.Calculate("");
shadowX.DefaultTick.GridLine.Color = Color.Empty;
shadowX.Line.Visible = false;
shadowX.ClearValues = true;
Chart.AxisCollection.Add(shadowX);
Chart.DefaultSeries.EmptyElement.Mode = EmptyElementMode.Ignore;
Chart.CalculateEmptyElement = true;
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/appleProductsSales.csv";
de.DataFields = "xAxis=date,yAxis=total_units_sold,yAxis=active_devices";

SeriesCollection sc = de.GetSeries();
sc[0].Type = SeriesType.AreaSpline;
sc[0].Name = "Comulative Devices sold";
sc[1].Type = SeriesType.Spline;
sc[1].Name = "Active Devices";
Chart.SeriesCollection.Add(sc);

// Setup the shadow axis and add it.
Axis shadow = Chart.YAxis.Calculate("");
shadow.DefaultTick.GridLine.Color =Color.LightGray;
shadow.Line.Visible = false;
Chart.AxisCollection.Add(shadow);

Chart.JS.Settings.Add("yAxis.0.caOffset", "-65");
Chart.JS.Settings.Add("yAxis.0.customTicks.0.label_text", "'Active'");
Chart.JS.Settings.Add("yAxis.0.customTicks.0.value", "1471.63");

Chart.JS.Settings.Add("yAxis.0.customTicks.1.label_text", "'Sold'");
Chart.JS.Settings.Add("yAxis.0.customTicks.1.value", "2443.54");

Chart.JS.Settings.Add("yAxis.0.customTicks.2.label_text", "'Retired'");
Chart.JS.Settings.Add("yAxis.0.customTicks.2.value", "[1471.63,2443.54]");

Chart.JS.Settings.Add("xAxis.1.customTicks.0.label.text", "'LIFESPAN'");
Chart.JS.Settings.Add("xAxis.1.customTicks.0.rangeMode", "'measure'");

Chart.JS.Settings.Add("xAxis.1.customTicks.0.value", "['Q4 2013','Q4 2018']");
Chart.JS.Settings.Add("xAxis.1.customTicks.0.line.color", "'white'");
Chart.JS.Settings.Add("xAxis.1.customTicks.0.label.color", "'white'");
Chart.JS.Settings.Add("xAxis.1.caOffset", "-65");

}

</script>
</head>
<body>
<div style="width:900px;margin:0px auto;">
<dotnet:Chart ID="Chart" runat="server" Width="900px" Height="480px">
</dotnet:Chart>
</div>

</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<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 series value ranges with multiple y axes.
Chart.Type = ChartType.Combo
Chart.Width = 875
Chart.Height = 480
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.DefaultSeries.Type = SeriesType.AreaSpline
Chart.DefaultSeries.DefaultElement.Marker.Visible = False
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.LegendBox.Visible = False
Chart.Palette = New Color(1) { Color.FromArgb(66,133,244), Color.Gray }
Chart.TitleBox.Label.Text = "Cumulative Devices (thousands)"
Chart.TitleBox.Label.Font = New Font("Arial", 15, FontStyle.Bold)
Chart.TitleBox.ClearColors()
Chart.TitleBox.Orientation = dotnetCHARTING.Orientation.Top
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.ChartArea.ClearColors()
Chart.YAxis.DefaultTick.GridLine.Color = Color.Empty
Chart.YAxis.JsID = "mainY"
Chart.YAxis.Line.Visible = False
Chart.YAxis.Orientation = dotnetCHARTING.Orientation.Right
Chart.YAxis.ClearValues = True

Chart.XAxis.JsID = "mainX"
Chart.XAxis.DefaultTick.GridLine.Color = Color.Empty

' Setup the shadow axis and add it.
Dim shadowX As Axis = Chart.XAxis.Calculate("")
shadowX.DefaultTick.GridLine.Color = Color.Empty
shadowX.Line.Visible = False
shadowX.ClearValues = True
Chart.AxisCollection.Add(shadowX)
Chart.DefaultSeries.EmptyElement.Mode = EmptyElementMode.Ignore
Chart.CalculateEmptyElement = True
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/appleProductsSales.csv"
de.DataFields = "xAxis=date,yAxis=total_units_sold,yAxis=active_devices"

Dim sc As SeriesCollection = de.GetSeries()
sc(0).Type = SeriesType.AreaSpline
sc(0).Name = "Comulative Devices sold"
sc(1).Type = SeriesType.Spline
sc(1).Name = "Active Devices"
Chart.SeriesCollection.Add(sc)

' Setup the shadow axis and add it.
Dim shadow As Axis = Chart.YAxis.Calculate("")
shadow.DefaultTick.GridLine.Color =Color.LightGray
shadow.Line.Visible = False
Chart.AxisCollection.Add(shadow)

Chart.JS.Settings.Add("yAxis.0.caOffset", "-65")
Chart.JS.Settings.Add("yAxis.0.customTicks.0.label_text", "'Active'")
Chart.JS.Settings.Add("yAxis.0.customTicks.0.value", "1471.63")

Chart.JS.Settings.Add("yAxis.0.customTicks.1.label_text", "'Sold'")
Chart.JS.Settings.Add("yAxis.0.customTicks.1.value", "2443.54")

Chart.JS.Settings.Add("yAxis.0.customTicks.2.label_text", "'Retired'")
Chart.JS.Settings.Add("yAxis.0.customTicks.2.value", "[1471.63,2443.54]")

Chart.JS.Settings.Add("xAxis.1.customTicks.0.label.text", "'LIFESPAN'")
Chart.JS.Settings.Add("xAxis.1.customTicks.0.rangeMode", "'measure'")

Chart.JS.Settings.Add("xAxis.1.customTicks.0.value", "['Q4 2013','Q4 2018']")
Chart.JS.Settings.Add("xAxis.1.customTicks.0.line.color", "'white'")
Chart.JS.Settings.Add("xAxis.1.customTicks.0.label.color", "'white'")
Chart.JS.Settings.Add("xAxis.1.caOffset", "-65")

End Sub

</script>
</head>
<body>
<div style="width:900px;margin:0px auto;">
<dotnet:Chart ID="Chart" runat="server" Width="900px" Height="480px">
</dotnet:Chart>
</div>

</body>
</html>

Sample FilenameJsRangeTicksOnSeries.aspx
Version9.3
Uses DatabaseNo

JS Charting

Gallery

JS Range Ticks On Series