JS Uncertainty Fan Chart
Demonstrates how to draw an uncertainty fan 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)
{
// Demonstrates how to draw an uncertainty fan chart.
// Set he chart size.
Chart.Width = 740;
Chart.Height = 400;
// Set the title.
Chart.TitleBox.Label.Text = "PCE Inflation Rate Forecast";
Chart.Debug = false;
Chart.XAxis.Crosshair = new AxisTick();
Chart.JS.Settings.Add("xAxis.crosshair_onTop", "true");
Chart.DefaultElement.ToolTip = "%icon %seriesName: <b>[%yStart% - %yValue%]</b>";
Chart.ChartArea.ClearColors();
Chart.LegendBox.Template = "%icon %name";
Chart.LegendBox.Visible = false;
Chart.Palette = new Color[] { ColorTranslator.FromHtml("#9FA8DA"), ColorTranslator.FromHtml("#7986CB"), ColorTranslator.FromHtml("#5C6BC0"), ColorTranslator.FromHtml("#3F51B5") };
// Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp";
Chart.DefaultSeries.Type = SeriesType.AreaSpline;
Chart.DefaultSeries.Line.Width = 0;
Chart.DefaultElement.Marker.Visible = false;
// Enable JSCharting
Chart.JS.Enabled = true;
Chart.DefaultElement.FocusGlow.Width = 0;
Chart.XAxis.Scale = Scale.Time;
Chart.XAxis.FormatString = "yyyy";
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray;
Chart.YAxis.DefaultTick.Label.Text = "%value%";
AxisMarker am = new AxisMarker("", new Background(Color.FromArgb(70, 159, 168, 218)));
am.ValueLow = new DateTime(2019, 1, 1);
am.ValueHigh = new DateTime(2023, 1, 1);
Chart.XAxis.Markers.Add(am);
AxisTick projection = new AxisTick();
projection.Label.Text = " Projection ";
projection.ValueLow = new DateTime(2019, 1, 1);
projection.ValueHigh = new DateTime(2023, 1, 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/inflation-rate-forecast-us.csv";
de.DataFields = "yvaluestart=min3,yAxis=max3,xAxis=year";//cvs must have header
SeriesCollection sc = de.GetSeries();
sc[0].Name = "Projection 1";
sc[0].Type = SeriesType.AreaSpline;
Chart.SeriesCollection.Add(sc[0]);
DataEngine de2 = new DataEngine();
de2.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/inflation-rate-forecast-us.csv";
de2.DataFields = "yvaluestart=min2,yAxis=max2,xAxis=year";//cvs must have header
sc = de2.GetSeries();
sc[0].Name = "Projection 2";
sc[0].Type = SeriesType.AreaSpline;
Chart.SeriesCollection.Add(sc[0]);
DataEngine de3 = new DataEngine();
de3.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de3.Data = "./../../data/resources/inflation-rate-forecast-us.csv";
de3.DataFields = "yvaluestart=min1,yAxis=max1,xAxis=year";//cvs must have header
sc = de3.GetSeries();
sc[0].Name = "Projection 3";
sc[0].Type = SeriesType.AreaSpline;
Chart.SeriesCollection.Add(sc[0]);
DataEngine de4 = new DataEngine();
de4.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de4.Data = "./../../data/resources/inflation-rate-forecast-us.csv";
de4.DataFields = "yAxis=value,xAxis=year";//cvs must have header
sc = de4.GetSeries();
sc[0].Name = "Actual Rate";
sc[0].Type = SeriesType.Spline;
sc[0].Line.Width = 2;
sc[0].DefaultElement.ToolTip = "%icon %seriesName: <b>%yValue%</b>";
Chart.SeriesCollection.Add(sc[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)
' Demonstrates how to draw an uncertainty fan chart.
' Set he chart size.
Chart.Width = 740
Chart.Height = 400
' Set the title.
Chart.TitleBox.Label.Text = "PCE Inflation Rate Forecast"
Chart.Debug = False
Chart.XAxis.Crosshair = New AxisTick()
Chart.JS.Settings.Add("xAxis.crosshair_onTop", "true")
Chart.DefaultElement.ToolTip = "%icon %seriesName: <b>[%yStart% - %yValue%]</b>"
Chart.ChartArea.ClearColors()
Chart.LegendBox.Template = "%icon %name"
Chart.LegendBox.Visible = False
Chart.Palette = New Color() { ColorTranslator.FromHtml("#9FA8DA"), ColorTranslator.FromHtml("#7986CB"), ColorTranslator.FromHtml("#5C6BC0"), ColorTranslator.FromHtml("#3F51B5") }
' Set the directory where the related JSC files will be created and stored.
Chart.TempDirectory = "temp"
Chart.DefaultSeries.Type = SeriesType.AreaSpline
Chart.DefaultSeries.Line.Width = 0
Chart.DefaultElement.Marker.Visible = False
' Enable JSCharting
Chart.JS.Enabled = True
Chart.DefaultElement.FocusGlow.Width = 0
Chart.XAxis.Scale = Scale.Time
Chart.XAxis.FormatString = "yyyy"
Chart.XAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.DefaultTick.GridLine.Color = Color.LightGray
Chart.YAxis.DefaultTick.Label.Text = "%value%"
Dim am As AxisMarker = New AxisMarker("", New Background(Color.FromArgb(70, 159, 168, 218)))
am.ValueLow = New DateTime(2019, 1, 1)
am.ValueHigh = New DateTime(2023, 1, 1)
Chart.XAxis.Markers.Add(am)
Dim projection As AxisTick = New AxisTick()
projection.Label.Text = " Projection "
projection.ValueLow = New DateTime(2019, 1, 1)
projection.ValueHigh = New DateTime(2023, 1, 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/inflation-rate-forecast-us.csv"
de.DataFields = "yvaluestart=min3,yAxis=max3,xAxis=year" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
sc(0).Name = "Projection 1"
sc(0).Type = SeriesType.AreaSpline
Chart.SeriesCollection.Add(sc(0))
Dim de2 As DataEngine = New DataEngine()
de2.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/inflation-rate-forecast-us.csv"
de2.DataFields = "yvaluestart=min2,yAxis=max2,xAxis=year" 'cvs must have header
sc = de2.GetSeries()
sc(0).Name = "Projection 2"
sc(0).Type = SeriesType.AreaSpline
Chart.SeriesCollection.Add(sc(0))
Dim de3 As DataEngine = New DataEngine()
de3.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de3.Data = "./../../data/resources/inflation-rate-forecast-us.csv"
de3.DataFields = "yvaluestart=min1,yAxis=max1,xAxis=year" 'cvs must have header
sc = de3.GetSeries()
sc(0).Name = "Projection 3"
sc(0).Type = SeriesType.AreaSpline
Chart.SeriesCollection.Add(sc(0))
Dim de4 As DataEngine = New DataEngine()
de4.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de4.Data = "./../../data/resources/inflation-rate-forecast-us.csv"
de4.DataFields = "yAxis=value,xAxis=year" 'cvs must have header
sc = de4.GetSeries()
sc(0).Name = "Actual Rate"
sc(0).Type = SeriesType.Spline
sc(0).Line.Width = 2
sc(0).DefaultElement.ToolTip = "%icon %seriesName: <b>%yValue%</b>"
Chart.SeriesCollection.Add(sc(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>
Previous