Gallery

Gallery > Lines Charts

JS Uncertainty Range Chart

This sample deomonstrates an uncertainty line projection chart.

Download Show C# Code Show VB Code

<%@ 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 deomonstrates an uncertainty line projection chart.
// Set he chart size.
Chart.Width = 740;
Chart.Height = 400;
// Set the title.
Chart.TitleBox.Label.Text = "Projection of CO2 concentration, 1975-2100";
Chart.Debug = false;
Chart.XAxis.Crosshair = new AxisTick();
Chart.DefaultElement.ToolTip = "%icon Baseline: <b>%yValue ppm</b>";
Chart.ChartArea.ClearColors();
Chart.LegendBox.Visible = false;
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.Palette = new Color[] { };

// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.DefaultElement.Marker.Visible = false;
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.DefaultSeries.Line.Width = 1;
Chart.DefaultSeries.Line.Color = Color.Green;

// Enable JSCharting
Chart.JS.Enabled = true;
Chart.DefaultElement.FocusGlow.Width = 0;

Chart.XAxis.Scale = Scale.Time;
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.DefaultTick.Label.Text = "%value";
Chart.YAxis.Label.Text = "CO2 concentration (ppm)";

DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/CO2-concentration-projections.csv";
de.DataFields = "yAxis=baseline,xAxis=date";//cvs must have header
SeriesCollection sc = de.GetSeries();

Series history = new Series();
Series future = new Series();
foreach (Element el in sc[0].Elements)
{
if (el.XDateTime < new DateTime(2020, 1, 1))
history.Elements.Add(el);
else if (el.XDateTime == new DateTime(2020, 1, 1))
{ //prevent gap
Element el2 = new Element();
el2.YValue = el.YValue;
el2.XDateTime = el.XDateTime;
history.Elements.Add(el2);
el.XDateTime = new DateTime(2020, 2, 1);
future.Elements.Add(el);
}
else
future.Elements.Add(el);
}
history.Name = "BaseLine";
history.Line.Width = 3;
history.Type = SeriesType.Line;
history.DefaultElement.Color = Color.Teal;
history.Line.Color = Color.Teal;
Chart.SeriesCollection.Add(history);

future.Name = "";
future.LegendEntry.Visible = false;
future.Line.Width = 3;
future.Type = SeriesType.Line;
future.DefaultElement.Color = Color.Teal;
future.Line.Color = Color.Teal;
future.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
Chart.SeriesCollection.Add(future);

DataEngine de2 = new DataEngine();
de2.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/CO2-concentration-projections.csv";
de2.DataFields = "yvaluestart=low_bound,yvalue=high_bound,xAxis=date";//cvs must have header

SeriesCollection sc2 = de2.GetSeries();
sc2[0].Name = "Projection";
sc2[0].Line.Width = 3;
sc2[0].Type = SeriesType.AreaLine;
sc2[0].Line.Width = 0;
sc2[0].DefaultElement.Color = Color.FromArgb(50, Color.MediumAquamarine);
sc2[0].DefaultElement.ToolTip = "%icon Projection: <b>[%yStart - %yValue] ppm</b>";
sc2[0].EmptyElement.Mode = EmptyElementMode.Ignore;
Chart.SeriesCollection.Add(sc2[0]);
}
</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 deomonstrates an uncertainty line projection chart.
' Set he chart size.
Chart.Width = 740
Chart.Height = 400
' Set the title.
Chart.TitleBox.Label.Text = "Projection of CO2 concentration, 1975-2100"
Chart.Debug = False
Chart.XAxis.Crosshair = New AxisTick()
Chart.DefaultElement.ToolTip = "%icon Baseline: <b>%yValue ppm</b>"
Chart.ChartArea.ClearColors()
Chart.LegendBox.Visible = False
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.Palette = New Color() { }

' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.DefaultElement.Marker.Visible = False
Chart.DefaultSeries.Type = SeriesType.Line
Chart.DefaultSeries.Line.Width = 1
Chart.DefaultSeries.Line.Color = Color.Green

' Enable JSCharting
Chart.JS.Enabled = True
Chart.DefaultElement.FocusGlow.Width = 0

Chart.XAxis.Scale = Scale.Time
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.DefaultTick.Label.Text = "%value"
Chart.YAxis.Label.Text = "CO2 concentration (ppm)"

Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/CO2-concentration-projections.csv"
de.DataFields = "yAxis=baseline,xAxis=date" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()

Dim history As Series = New Series()
Dim future As Series = New Series()
For Each el As Element In sc(0).Elements
If el.XDateTime < New DateTime(2020, 1, 1) Then
history.Elements.Add(el)
ElseIf el.XDateTime = New DateTime(2020, 1, 1) Then
Dim el2 As Element = New Element()
el2.YValue = el.YValue
el2.XDateTime = el.XDateTime
history.Elements.Add(el2)
el.XDateTime = New DateTime(2020, 2, 1)
future.Elements.Add(el)
Else
future.Elements.Add(el)
End If
Next el
history.Name = "BaseLine"
history.Line.Width = 3
history.Type = SeriesType.Line
history.DefaultElement.Color = Color.Teal
history.Line.Color = Color.Teal
Chart.SeriesCollection.Add(history)

future.Name = ""
future.LegendEntry.Visible = False
future.Line.Width = 3
future.Type = SeriesType.Line
future.DefaultElement.Color = Color.Teal
future.Line.Color = Color.Teal
future.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash
Chart.SeriesCollection.Add(future)

Dim de2 As DataEngine = New DataEngine()
de2.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/CO2-concentration-projections.csv"
de2.DataFields = "yvaluestart=low_bound,yvalue=high_bound,xAxis=date" 'cvs must have header

Dim sc2 As SeriesCollection = de2.GetSeries()
sc2(0).Name = "Projection"
sc2(0).Line.Width = 3
sc2(0).Type = SeriesType.AreaLine
sc2(0).Line.Width = 0
sc2(0).DefaultElement.Color = Color.FromArgb(50, Color.MediumAquamarine)
sc2(0).DefaultElement.ToolTip = "%icon Projection: <b>[%yStart - %yValue] ppm</b>"
sc2(0).EmptyElement.Mode = EmptyElementMode.Ignore
Chart.SeriesCollection.Add(sc2(0))
End Sub
</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>

Sample FilenameJsUncertaintyRangeChart.aspx
Version10.1
Uses DatabaseNo

JS Charting

Gallery

JS Uncertainty Range Chart