JS Range AreaLine
Demonstrates an area range chart with dual axes.
<%@ Page Language="C#" Description="dotnetCHARTING Component"%>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
void Page_Load(Object sender,EventArgs e)
{
// This sample demonstrates an area range chart with dual axes.
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory="temp";
// Enable JSCharting
Chart.JS.Enabled = true;
// Specify chart type.
Chart.Type = ChartType.Combo;
Chart.ShadingEffectMode = ShadingEffectMode.Two;
Chart.DefaultSeries.Type = SeriesType.AreaSpline;
// Set he chart size.
Chart.Width = 680;
Chart.Height = 400;
Chart.DefaultElement.ToolTip = "<b>%xValue</b><br/>Average High: <b>%yValue�F</b> ({(%yValue-32)*5/9:n1}�C)<br/>Average Low: <b>%yStart�F</b> ({(%yStart-32)*5/9:n1}�C)";
// Set the title.
Chart.Title = "Average Temperatures [Chicago] Range: %low�F to %high�F, Average: %average�F";
Chart.Debug = true;
Chart.JS.Enabled = true;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.JS.Buttons.EnableExportButton = false;
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 = "js:function(val){ return parseInt((val-32)*5/9)+'�C'; }";
axisReplica.DefaultTick.Label.Text = "<(%value-32)*5/9>�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";
// Add the random data.
Chart.SeriesCollection.Add(getRandomData());
}
SeriesCollection getRandomData()
{
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};
int[] vlb = { 15, 18, 27, 37, 46, 56, 61, 60, 51, 40, 30, 19 };
SeriesCollection SC = new SeriesCollection();
Random myR = new Random();
for(int a = 1; a < 2; a++)
{
Series s = new Series();
s.Name = "Average Temp Range";
for(int b = 1; b < 13; b++)
{
Element e = new Element();
e.XDateTime = dta[b-1];
e.YValue = vla[b-1];
e.YValueStart = vlb[b-1];
s.Elements.Add(e);
}
SC.Add(s);
}
return SC;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component"%>
<%@ Register TagPrefix="dotnet" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' This sample demonstrates an area range chart with dual axes.
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory="temp"
' Enable JSCharting
Chart.JS.Enabled = True
' Specify chart type.
Chart.Type = ChartType.Combo
Chart.ShadingEffectMode = ShadingEffectMode.Two
Chart.DefaultSeries.Type = SeriesType.AreaSpline
' Set he chart size.
Chart.Width = 680
Chart.Height = 400
Chart.DefaultElement.ToolTip = "<b>%xValue</b><br/>Average High: <b>%yValue�F</b> ({(%yValue-32)*5/9:n1}�C)<br/>Average Low: <b>%yStart�F</b> ({(%yStart-32)*5/9:n1}�C)"
' Set the title.
Chart.Title = "Average Temperatures [Chicago] Range: %low�F to %high�F, Average: %average�F"
Chart.Debug = True
Chart.JS.Enabled = True
Chart.JS.Buttons.EnablePrintButton = False
Chart.JS.Buttons.EnableExportButton = False
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 = "js:function(val){ return parseInt((val-32)*5/9)+'�C'; }";
axisReplica.DefaultTick.Label.Text = "<(%value-32)*5/9>�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"
' Add the random data.
Chart.SeriesCollection.Add(getRandomData())
End Sub
Function getRandomData() 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 vlb As Integer() = { 15, 18, 27, 37, 46, 56, 61, 60, 51, 40, 30, 19 }
Dim SC As SeriesCollection = New SeriesCollection()
Dim myR As Random = New Random()
For a As Integer = 1 To 1
Dim s As Series = New Series()
s.Name = "Average Temp Range"
For b As Integer = 1 To 12
Dim e As Element = New Element()
e.XDateTime = dta(b-1)
e.YValue = vla(b-1)
e.YValueStart = vlb(b-1)
s.Elements.Add(e)
Next b
SC.Add(s)
Next a
Return SC
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>Gallery Sample</title></head>
<body>
<div align="center">
<dotnet:Chart id="Chart" runat="server"/>
</div>
</body>
</html>
Previous