Gallery

Gallery > Scatter Charts

JS La Guardia Temps

Demonstrates a styled scatter chart with overlaying area and line series.

Download Show C# Code Show VB Code

<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>

<script runat="server">

void Page_Load(Object sender,EventArgs e)
{
// This sample demonstrates a styled scatter chart with overlaying area and line series.
Chart.Type = ChartType.Combo;
Chart.DefaultSeries.Type = SeriesType.Line;
Chart.DefaultSeries.DefaultElement.Marker.Visible = false;
Chart.Width = 875;
Chart.Height = 480;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.DefaultElement.LegendEntry.Visible = false;

Chart.TitleBox.Label.Text = "Average daily temperature in New York (La Guardia Airport Station), normals and records 2020";
Chart.TitleBox.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.TitleBox.ClearColors();
Chart.ShowDateInTitle = false;
Chart.YAxis.Label.Text = "Temperature (°F)";
Chart.DefaultElement.ToolTip = "%xValue %yValue %percentOfSeries% of series";
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle;
Chart.LegendBox.Template = "%icon %name";

//JS settings
Chart.JS.Enabled = true;
Chart.JS.AxisToZoom = "X";
Chart.JS.InitialAnimationDuration = 1000;
Chart.JS.Settings.Add("defaultSeries_states_hover_line_width", "0");
Chart.JS.Settings.Add("defaultSeries.defaultPoint.focusGlow_color","#4fc3f7");
Chart.JS.Settings.Add("defaultSeries.defaultPoint.focusGlow_opacity","1");
Chart.XAxis.Crosshair = new AxisTick();
Chart.YAxis.ScaleRange = new ScaleRange(-20, 120);
Chart.XAxis.Scale = Scale.Time;
DataEngine de = new DataEngine();
de.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/NY_normals.csv";
de.DataFields = "xdatetime=date,yvaluestart=min_record,yvalue=max_record";//cvs must have header
SeriesCollection sc = de.GetSeries();
sc[0].Type = SeriesType.AreaLine;
sc[0].DefaultElement.ToolTip = "%icon Record Low: %yStart°F, Record High: %value°F";
sc[0].Name = "Records";
sc[0].DefaultElement.Transparency = 100;
sc[0].DefaultElement.Color = Color.FromArgb(60, ColorTranslator.FromHtml("#b3e5fc"));
Chart.SeriesCollection.Add(sc[0]);

//series 2
DataEngine de2 = new DataEngine();
de2.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/NY_normals.csv";
de2.DataFields = "xdatetime=date,yvalue=tmp";//cvs must have header: date,total
SeriesCollection sc2 = de2.GetSeries();
sc2[0].Type = SeriesType.Marker;
sc2[0].DefaultElement.Marker.Visible = true;
sc2[0].DefaultElement.Marker.Size = 12;
sc2[0].DefaultElement.Marker.Type = ElementMarkerType.Circle;
sc2[0].DefaultElement.Outline.Width = 0;
sc2[0].Name = "Day temperature";
sc2[0].DefaultElement.ToolTip = "%icon %seriesName: %value°F";
sc2[0].DefaultElement.Color = Color.FromArgb(120, ColorTranslator.FromHtml("#b3e5fc")) ;
Chart.SeriesCollection.Add(sc2[0]);

//series 3
DataEngine de3 = new DataEngine();
de3.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de3.Data = "./../../data/resources/NY_normals.csv";
de3.DataFields = "xdatetime=date,yvaluestart=min_tmp,yvalue=max_tmp";//cvs must have header
SeriesCollection sc3 = de3.GetSeries();
sc3[0].Type = SeriesType.AreaLine;
sc3[0].DefaultElement.Marker.Size = 0;
sc3[0].DefaultElement.ToolTip = "%icon %seriesName: [%yStart°F , %value°F]";
sc3[0].Name = "Day temperature normals";
sc3[0].DefaultElement.Color = Color.FromArgb(160, ColorTranslator.FromHtml("#81d4fa")) ;
Chart.SeriesCollection.Add(sc3[0]);

//series 4
DataEngine de4 = new DataEngine();
de4.ChartObject = Chart; // Necessary to view any errors the dataEngine may throw.
de4.Data = "./../../data/resources/NY_normals.csv";
de4.DataFields = "xdatetime=date,yvalue=avg_tmp";//cvs must have header
SeriesCollection sc4 = de4.GetSeries();
sc4[0].Type = SeriesType.Line;
sc4[0].Line.Width = 3;
sc4[0].DefaultElement.Marker.Size = 0;
sc4[0].Name = "Day average";
sc4[0].DefaultElement.ToolTip = "%icon %seriesName: %value°F";
sc4[0].DefaultElement.Color = Color.FromArgb(100,ColorTranslator.FromHtml("#4fc3f7")) ;
Chart.SeriesCollection.Add(sc4[0]);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:900px;margin:0px auto;"/>

</body>
</html>

<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" 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 a styled scatter chart with overlaying area and line series.
Chart.Type = ChartType.Combo
Chart.DefaultSeries.Type = SeriesType.Line
Chart.DefaultSeries.DefaultElement.Marker.Visible = False
Chart.Width = 875
Chart.Height = 480
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.DefaultElement.LegendEntry.Visible = False

Chart.TitleBox.Label.Text = "Average daily temperature in New York (La Guardia Airport Station), normals and records 2020"
Chart.TitleBox.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.TitleBox.ClearColors()
Chart.ShowDateInTitle = False
Chart.YAxis.Label.Text = "Temperature (�F)"
Chart.DefaultElement.ToolTip = "%xValue %yValue %percentOfSeries% of series"
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle
Chart.LegendBox.Template = "%icon %name"

'JS settings
Chart.JS.Enabled = True
Chart.JS.AxisToZoom = "X"
Chart.JS.InitialAnimationDuration = 1000
Chart.JS.Settings.Add("defaultSeries_states_hover_line_width", "0")
Chart.JS.Settings.Add("defaultSeries.defaultPoint.focusGlow_color","#4fc3f7")
Chart.JS.Settings.Add("defaultSeries.defaultPoint.focusGlow_opacity","1")
Chart.XAxis.Crosshair = New AxisTick()
Chart.YAxis.ScaleRange = New ScaleRange(-20, 120)
Chart.XAxis.Scale = Scale.Time
Dim de As DataEngine = New DataEngine()
de.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de.Data = "./../../data/resources/NY_normals.csv"
de.DataFields = "xdatetime=date,yvaluestart=min_record,yvalue=max_record" 'cvs must have header
Dim sc As SeriesCollection = de.GetSeries()
sc(0).Type = SeriesType.AreaLine
sc(0).DefaultElement.ToolTip = "%icon Record Low: %yStart�F, Record High: %value�F"
sc(0).Name = "Records"
sc(0).DefaultElement.Transparency = 100
sc(0).DefaultElement.Color = Color.FromArgb(60, ColorTranslator.FromHtml("#b3e5fc"))
Chart.SeriesCollection.Add(sc(0))

'series 2
Dim de2 As DataEngine = New DataEngine()
de2.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de2.Data = "./../../data/resources/NY_normals.csv"
de2.DataFields = "xdatetime=date,yvalue=tmp" 'cvs must have header: date,total
Dim sc2 As SeriesCollection = de2.GetSeries()
sc2(0).Type = SeriesType.Marker
sc2(0).DefaultElement.Marker.Visible = True
sc2(0).DefaultElement.Marker.Size = 12
sc2(0).DefaultElement.Marker.Type = ElementMarkerType.Circle
sc2(0).DefaultElement.Outline.Width = 0
sc2(0).Name = "Day temperature"
sc2(0).DefaultElement.ToolTip = "%icon %seriesName: %value�F"
sc2(0).DefaultElement.Color = Color.FromArgb(120, ColorTranslator.FromHtml("#b3e5fc"))
Chart.SeriesCollection.Add(sc2(0))

'series 3
Dim de3 As DataEngine = New DataEngine()
de3.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de3.Data = "./../../data/resources/NY_normals.csv"
de3.DataFields = "xdatetime=date,yvaluestart=min_tmp,yvalue=max_tmp" 'cvs must have header
Dim sc3 As SeriesCollection = de3.GetSeries()
sc3(0).Type = SeriesType.AreaLine
sc3(0).DefaultElement.Marker.Size = 0
sc3(0).DefaultElement.ToolTip = "%icon %seriesName: [%yStart�F , %value�F]"
sc3(0).Name = "Day temperature normals"
sc3(0).DefaultElement.Color = Color.FromArgb(160, ColorTranslator.FromHtml("#81d4fa"))
Chart.SeriesCollection.Add(sc3(0))

'series 4
Dim de4 As DataEngine = New DataEngine()
de4.ChartObject = Chart ' Necessary to view any errors the dataEngine may throw.
de4.Data = "./../../data/resources/NY_normals.csv"
de4.DataFields = "xdatetime=date,yvalue=avg_tmp" 'cvs must have header
Dim sc4 As SeriesCollection = de4.GetSeries()
sc4(0).Type = SeriesType.Line
sc4(0).Line.Width = 3
sc4(0).DefaultElement.Marker.Size = 0
sc4(0).Name = "Day average"
sc4(0).DefaultElement.ToolTip = "%icon %seriesName: %value�F"
sc4(0).DefaultElement.Color = Color.FromArgb(100,ColorTranslator.FromHtml("#4fc3f7"))
Chart.SeriesCollection.Add(sc4(0))
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
</head>
<body>
<dnc:Chart ID="Chart" runat="server" style="max-width:900px;margin:0px auto;"/>

</body>
</html>

Sample FilenameJsLaGuardiaTemps.aspx
Version10.0
Uses DatabaseNo

JS Charting

Gallery

JS La Guardia Temps