Gallery

Gallery > Axis And Scales

JS Multiple Axes

Demonstrates using multiple axes with JSCharting.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="dotnetCHARTING.Mapping" %>

<script runat="server">

void Page_Load(Object sender, EventArgs e)
{
// Demonstrates using multiple axes with JSCharting.

//set global properties
Chart.Title = "Average Seasonal Rainfall";
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.XAxis.Label.Text = "Seasons";
Chart.YAxis.NumberPercision = 0;
Chart.YAxis.Label.Text = "Rainfall (cm)";
Chart.DefaultSeries.Line.Width = 2;

Chart.DefaultAxis.Label.Font = new Font("Arial", 10);

// Enable JSCharting
Chart.JS.Enabled = true;

//Adding series programatically
Series sr = new Series();

sr.Name = "Vancouver";
Element el = new Element("Spring", 10);
sr.Elements.Add(el);
el = new Element("Summer", 20);
sr.Elements.Add(el);
el = new Element("Autumn", 13);
sr.Elements.Add(el);
el = new Element("Winter", 5);
sr.Elements.Add(el);
Chart.SeriesCollection.Add(sr);

sr = new Series();
sr.Name = "Houston";
el = new Element("Spring", 20);
sr.Elements.Add(el);
el = new Element("Summer", 32);
sr.Elements.Add(el);
el = new Element("Autumn", 18);
sr.Elements.Add(el);
el = new Element("Winter", 10);
sr.Elements.Add(el);
Chart.SeriesCollection.Add(sr);

//Add new calculatd series bound to a seperate axis
Chart.Series.Name = "Total";
Chart.Series.Type = SeriesType.Line;

Axis ATotal = new Axis();
ATotal.Orientation = dotnetCHARTING.Orientation.Right;
ATotal.Label.Text = "Total Rainfall";

Chart.Series.YAxis = ATotal;
Chart.SeriesCollection.Add(Calculation.Sum);
Chart.PaletteName = Palette.Default;
Color[] colors = Chart.Palette;
Chart.Palette = new Color[] { colors[2],colors[1],colors[0]};
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="dotnetCHARTING.Mapping" %>

<script runat="server">

Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates using multiple axes with JSCharting.

'set global properties
Chart.Title = "Average Seasonal Rainfall"
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.XAxis.Label.Text = "Seasons"
Chart.YAxis.NumberPercision = 0
Chart.YAxis.Label.Text = "Rainfall (cm)"
Chart.DefaultSeries.Line.Width = 2

Chart.DefaultAxis.Label.Font = New Font("Arial", 10)

' Enable JSCharting
Chart.JS.Enabled = True

'Adding series programatically
Dim sr As Series = New Series()

sr.Name = "Vancouver"
Dim el As Element = New Element("Spring", 10)
sr.Elements.Add(el)
el = New Element("Summer", 20)
sr.Elements.Add(el)
el = New Element("Autumn", 13)
sr.Elements.Add(el)
el = New Element("Winter", 5)
sr.Elements.Add(el)
Chart.SeriesCollection.Add(sr)

sr = New Series()
sr.Name = "Houston"
el = New Element("Spring", 20)
sr.Elements.Add(el)
el = New Element("Summer", 32)
sr.Elements.Add(el)
el = New Element("Autumn", 18)
sr.Elements.Add(el)
el = New Element("Winter", 10)
sr.Elements.Add(el)
Chart.SeriesCollection.Add(sr)

'Add new calculatd series bound to a seperate axis
Chart.Series.Name = "Total"
Chart.Series.Type = SeriesType.Line

Dim ATotal As Axis = New Axis()
ATotal.Orientation = dotnetCHARTING.Orientation.Right
ATotal.Label.Text = "Total Rainfall"

Chart.Series.YAxis = ATotal
Chart.SeriesCollection.Add(Calculation.Sum)
Chart.PaletteName = Palette.Default
Dim colors As Color() = Chart.Palette
Chart.Palette = New Color() { colors(2),colors(1),colors(0)}
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>

Sample FilenameJsMultipleAxes.aspx
Version7.0
Uses DatabaseNo

JS Charting

Gallery

JS Multiple Axes