JS Axis Calculated
Demonstrates multiple axes where one is based on the other.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates multiple axes where one is based on the other.
// A callback function is used to determine the new axis values.
Chart.Size = "700x350";
Chart.Title = "Average Temperatures (Chicago) | Range %low�F - %high�F Average: %average�F";
Chart.TempDirectory = "temp";
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.Debug = false;
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Buttons.EnableExportButton = false;
Chart.LegendBox.Template = "%icon %name";
Chart.YAxis.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
Chart.YAxis.Label.Text = "(�F) Fahrenheit";
Chart.YAxis.DefaultTick.Label.Text = "%value�F";
Chart.YAxis.Markers.Add(new AxisMarker("Perfect (72�F)", Color.Orange, 72));
AxisMarker am = new AxisMarker("Freezing", Color.FromArgb(150, 160, 205, 255), 0, 32);
am.Label.Alignment = StringAlignment.Center;
Chart.YAxis.Markers.Add(am);
Axis axisReplica = Chart.YAxis.Calculate("(�C) Celcius");
axisReplica.Orientation = dotnetCHARTING.Orientation.Right;
axisReplica.DefaultTick.Label.Text = "<{((%value-32)*5/9):n1}>�C";
axisReplica.DefaultTick.Label.Font = new Font("Arial", 10, FontStyle.Bold);
Chart.AxisCollection.Add(axisReplica);
Chart.LegendBox.Position = LegendBoxPosition.ChartArea;
Chart.LegendBox.ClearColors();
Chart.XAxis.TimeInterval = TimeInterval.Month;
Chart.XAxis.FormatString = "MMM";
// *DYNAMIC DATA NOTE*
// This sample uses random data to populate the chart. To populate
// a chart with database data see the following resources:
// - Use the getLiveData() method using the dataEngine to query a database.
// - Help File > Getting Started > Data Tutorials
// - DataEngine Class in the help file
// - Sample: features/DataEngine.aspx
SeriesCollection mySC = getData();
mySC[0].DefaultElement.ToolTip = "High of <b>%YValue�F</b> in %XValue";
mySC[1].DefaultElement.ToolTip = "Low of <b>%YValue�F</b> in %XValue";
// Add the random data.
Chart.SeriesCollection.Add(mySC);
}
SeriesCollection getData()
{
DateTime[] dta = {
new DateTime(2014, 1, 1),
new DateTime(2014, 2, 1),
new DateTime(2014, 3, 1),
new DateTime(2014, 4, 1),
new DateTime(2014, 5, 1),
new DateTime(2014, 6, 1),
new DateTime(2014, 7, 1),
new DateTime(2014, 8, 1),
new DateTime(2014, 9, 1),
new DateTime(2014, 10, 1),
new DateTime(2014, 11, 1),
new DateTime(2014, 12, 1)
};
int[] vla = {
30 ,35 ,47 ,60 ,71 ,80 ,83 ,81 ,75 ,63,48,34
};
Series sr = new Series();
sr.Name = "Average High";
for (int i = 0; i < dta.Length; i++)
{
Element el = new Element();
el.XDateTime = dta[i];
el.YValue = vla[i];
sr.Elements.Add(el);
}
SeriesCollection SC = new SeriesCollection();
SC.Add(sr);
sr = new Series();
sr.Name = "Average Low";
DateTime[] dtb = {
new DateTime(2014, 1, 1),
new DateTime(2014, 2, 1),
new DateTime(2014, 3, 1),
new DateTime(2014, 4, 1),
new DateTime(2014, 5, 1),
new DateTime(2014, 6, 1),
new DateTime(2014, 7, 1),
new DateTime(2014, 8, 1),
new DateTime(2014, 9, 1),
new DateTime(2014, 10, 1),
new DateTime(2014, 11, 1),
new DateTime(2014, 12, 1)
};
int[] vlb = { 15, 18, 27, 37, 46, 56, 61, 60, 51, 40, 30, 19 };
for (int i = 0; i < dtb.Length; i++)
{
Element el = new Element();
el.XDateTime = dtb[i];
el.YValue = vlb[i];
sr.Elements.Add(el);
}
SC.Add(sr);
return SC;
}
SeriesCollection getLiveData()
{
DataEngine de = new DataEngine(ConfigurationManager.AppSettings["DNCConnectionString"]);
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ....";
return de.GetSeries();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
</head>
<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" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates multiple axes where one is based on the other.
' A callback function is used to determine the new axis values.
Chart.Size = "700x350"
Chart.Title = "Average Temperatures (Chicago) | Range %low�F - %high�F Average: %average�F"
Chart.TempDirectory = "temp"
Chart.DefaultSeries.Type = SeriesType.Line
Chart.Debug = False
Chart.JS.Enabled = True
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Buttons.EnableExportButton = False
Chart.LegendBox.Template = "%icon %name"
Chart.YAxis.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
Chart.YAxis.Label.Text = "(�F) Fahrenheit"
Chart.YAxis.DefaultTick.Label.Text = "%value�F"
Chart.YAxis.Markers.Add(New AxisMarker("Perfect (72�F)", Color.Orange, 72))
Dim am As AxisMarker = New AxisMarker("Freezing", Color.FromArgb(150, 160, 205, 255), 0, 32)
am.Label.Alignment = StringAlignment.Center
Chart.YAxis.Markers.Add(am)
Dim axisReplica As Axis = Chart.YAxis.Calculate("(�C) Celcius")
axisReplica.Orientation = dotnetCHARTING.Orientation.Right
axisReplica.DefaultTick.Label.Text = "<{((%value-32)*5/9):n1}>�C"
axisReplica.DefaultTick.Label.Font = New Font("Arial", 10, FontStyle.Bold)
Chart.AxisCollection.Add(axisReplica)
Chart.LegendBox.Position = LegendBoxPosition.ChartArea
Chart.LegendBox.ClearColors()
Chart.XAxis.TimeInterval = TimeInterval.Month
Chart.XAxis.FormatString = "MMM"
' *DYNAMIC DATA NOTE*
' This sample uses random data to populate the chart. To populate
' a chart with database data see the following resources:
' - Use the getLiveData() method using the dataEngine to query a database.
' - Help File > Getting Started > Data Tutorials
' - DataEngine Class in the help file
' - Sample: features/DataEngine.aspx
Dim mySC As SeriesCollection = getData()
mySC(0).DefaultElement.ToolTip = "High of <b>%YValue�F</b> in %XValue"
mySC(1).DefaultElement.ToolTip = "Low of <b>%YValue�F</b> in %XValue"
' Add the random data.
Chart.SeriesCollection.Add(mySC)
End Sub
Function getData() As SeriesCollection
Dim dta As DateTime() = { New DateTime(2014, 1, 1), New DateTime(2014, 2, 1), New DateTime(2014, 3, 1), New DateTime(2014, 4, 1), New DateTime(2014, 5, 1), New DateTime(2014, 6, 1), New DateTime(2014, 7, 1), New DateTime(2014, 8, 1), New DateTime(2014, 9, 1), New DateTime(2014, 10, 1), New DateTime(2014, 11, 1), New DateTime(2014, 12, 1) }
Dim vla As Integer() = { 30,35,47,60,71,80,83,81,75,63,48,34 }
Dim sr As Series = New Series()
sr.Name = "Average High"
For i As Integer = 0 To dta.Length - 1
Dim el As Element = New Element()
el.XDateTime = dta(i)
el.YValue = vla(i)
sr.Elements.Add(el)
Next i
Dim SC As SeriesCollection = New SeriesCollection()
SC.Add(sr)
sr = New Series()
sr.Name = "Average Low"
Dim dtb As DateTime() = { New DateTime(2014, 1, 1), New DateTime(2014, 2, 1), New DateTime(2014, 3, 1), New DateTime(2014, 4, 1), New DateTime(2014, 5, 1), New DateTime(2014, 6, 1), New DateTime(2014, 7, 1), New DateTime(2014, 8, 1), New DateTime(2014, 9, 1), New DateTime(2014, 10, 1), New DateTime(2014, 11, 1), New DateTime(2014, 12, 1) }
Dim vlb As Integer() = { 15, 18, 27, 37, 46, 56, 61, 60, 51, 40, 30, 19 }
For i As Integer = 0 To dtb.Length - 1
Dim el As Element = New Element()
el.XDateTime = dtb(i)
el.YValue = vlb(i)
sr.Elements.Add(el)
Next i
SC.Add(sr)
Return SC
End Function
Function getLiveData() As SeriesCollection
Dim de As DataEngine = New DataEngine(ConfigurationManager.AppSettings("DNCConnectionString"))
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.SqlStatement = "SELECT XAxisColumn, YAxisColumn FROM ...."
Return de.GetSeries()
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">
div, p
{
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
}
</style>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous