Gallery
JS Uncertainty Line Chart
<%@ 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 a line projection making up the average of many projection lines.
// Set he chart size.
Chart.Width = 740;
Chart.Height = 400;
// Set the title.
Chart.TitleBox.Label.Text = "US Unemployment Rate Forecast";
Chart.Debug = false;
Chart.DefaultElement.ToolTip = "<b>%seriesName</b><br>{%xValue:d} {%yValue:n1}%";
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.LightGray;
Chart.DefaultSeries.DefaultElement.Color = Color.LightGray;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.DefaultElement.HoverAction = HoverAction.HighlightSeries;
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%";
AxisTick historical = new AxisTick();
historical.Label.Text = " Historical ";
historical.ValueLow = new DateTime(2016, 6, 1);
historical.ValueHigh = new DateTime(2019, 6, 1);
Chart.XAxis.ExtraTicks.Add(historical);
AxisTick projection = new AxisTick();
projection.Label.Text = " Projection ";
projection.ValueLow = new DateTime(2019, 6, 1);
projection.ValueHigh = new DateTime(2022, 12, 1);
Chart.XAxis.ExtraTicks.Add(projection);
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/unemployment-rate-forecast.csv";
de.DataFields = "yAxis=actual,xAxis=date";//cvs must have header
SeriesCollection history = de.GetSeries();
history[0].Name = "Historical";
history[0].Line.Width = 3;
history[0].Type = SeriesType.Line;
history[0].Line.Color = Color.SlateBlue;
Chart.SeriesCollection.Add(history[0]);
DataEngine de2 = new DataEngine();
de2.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/unemployment-rate-forecast.csv";
de2.DataFields = "yAxis=forecast,xAxis=date,splitby=organization";//cvs must have header
SeriesCollection sc = de2.GetSeries();
SeriesCollection orgs = new SeriesCollection();
//calculae average
int count = sc.Count;
Series mean = new Series();
mean.Name = "Avg. forecast";
mean.Type = SeriesType.Line;
mean.Line.Width = 3;
mean.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
mean.Line.Color = Color.SlateBlue;
mean.DefaultElement.Color = Color.SlateBlue;
for (int i = 0; i < sc.Count; i++)
{
if (string.IsNullOrEmpty(sc[i].Name))
continue;
ElementCollection ec = sc[i].GetActiveElements();
Series ser = new Series();
ser.Name = sc[i].Name;
ser.Elements.Add(ec);
orgs.Add(ser);
for (int j = 0; j < ec.Count; j++)
{
if (mean.Elements.Count > j)
{
if (!double.IsNaN(ec[j].YValue))
{
mean.Elements[j].YValue += ec[j].YValue;
mean.Elements[j].YValueStart++;
}
}
else
{
Element el = new Element();
if (!double.IsNaN(ec[j].YValue))
{
el.YValue = ec[j].YValue;
el.YValueStart = 1;
}
else
{
el.YValue = 0;
el.YValueStart =0;
}
el.XDateTime = ec[j].XDateTime;
mean.Elements.Add(el);
}
}
}
for (int j = 0; j < mean.Elements.Count; j++)
{
mean.Elements[j].YValue = Math.Round((mean.Elements[j].YValue / mean.Elements[j].YValueStart),1);
mean.Elements[j].YValueStart = double.NaN;
}
Chart.SeriesCollection.Add(orgs);
Chart.SeriesCollection.Add(mean);
}
</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 a line projection making up the average of many projection lines.
' Set he chart size.
Chart.Width = 740
Chart.Height = 400
' Set the title.
Chart.TitleBox.Label.Text = "US Unemployment Rate Forecast"
Chart.Debug = False
Chart.DefaultElement.ToolTip = "<b>%seriesName</b><br>{%xValue:d} {%yValue:n1}%"
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.LightGray
Chart.DefaultSeries.DefaultElement.Color = Color.LightGray
' Enable JSCharting
Chart.JS.Enabled = True
Chart.DefaultElement.HoverAction = HoverAction.HighlightSeries
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%"
Dim historical As AxisTick = New AxisTick()
historical.Label.Text = " Historical "
historical.ValueLow = New DateTime(2016, 6, 1)
historical.ValueHigh = New DateTime(2019, 6, 1)
Chart.XAxis.ExtraTicks.Add(historical)
Dim projection As AxisTick = New AxisTick()
projection.Label.Text = " Projection "
projection.ValueLow = New DateTime(2019, 6, 1)
projection.ValueHigh = New DateTime(2022, 12, 1)
Chart.XAxis.ExtraTicks.Add(projection)
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/unemployment-rate-forecast.csv"
de.DataFields = "yAxis=actual,xAxis=date" 'cvs must have header
Dim history As SeriesCollection = de.GetSeries()
history(0).Name = "Historical"
history(0).Line.Width = 3
history(0).Type = SeriesType.Line
history(0).Line.Color = Color.SlateBlue
Chart.SeriesCollection.Add(history(0))
Dim de2 As DataEngine = New DataEngine()
de2.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/unemployment-rate-forecast.csv"
de2.DataFields = "yAxis=forecast,xAxis=date,splitby=organization" 'cvs must have header
Dim sc As SeriesCollection = de2.GetSeries()
Dim orgs As SeriesCollection = New SeriesCollection()
'calculae average
Dim count As Integer = sc.Count
Dim mean As Series = New Series()
mean.Name = "Avg. forecast"
mean.Type = SeriesType.Line
mean.Line.Width = 3
mean.Line.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash
mean.Line.Color = Color.SlateBlue
mean.DefaultElement.Color = Color.SlateBlue
For i As Integer = 0 To sc.Count - 1
If String.IsNullOrEmpty(sc(i).Name) Then
Continue For
End If
Dim ec As ElementCollection = sc(i).GetActiveElements()
Dim ser As Series = New Series()
ser.Name = sc(i).Name
ser.Elements.Add(ec)
orgs.Add(ser)
For j As Integer = 0 To ec.Count - 1
If mean.Elements.Count > j Then
If (Not Double.IsNaN(ec(j).YValue)) Then
mean.Elements(j).YValue += ec(j).YValue
mean.Elements(j).YValueStart += 1
End If
Else
Dim el As Element = New Element()
If (Not Double.IsNaN(ec(j).YValue)) Then
el.YValue = ec(j).YValue
el.YValueStart = 1
Else
el.YValue = 0
el.YValueStart =0
End If
el.XDateTime = ec(j).XDateTime
mean.Elements.Add(el)
End If
Next j
Next i
For j As Integer = 0 To mean.Elements.Count - 1
mean.Elements(j).YValue = Math.Round((mean.Elements(j).YValue / mean.Elements(j).YValueStart),1)
mean.Elements(j).YValueStart = Double.NaN
Next j
Chart.SeriesCollection.Add(orgs)
Chart.SeriesCollection.Add(mean)
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 FilenameJsUncertaintyLineChart.aspx
- Version10.1
- Uses DatabaseNo