JS Calendar Weather
Demonstrates Calendar heatmap with charts based on csv data.
<%@ Page Language="C#" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Outputcache Duration = "1000" Varybyparam = "none"%>
<script runat="server">
void Page_Load(Object sender, EventArgs e)
{
// Demonstrates Calendar heatmap with charts based on csv data.
Chart.Type = ChartType.Calendar;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.Size = "740x600";
Chart.TitleBox.Label.Text = "Temperature Jan-Apr 2018";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Regular);
Chart.TitleBox.Position = TitleBoxPosition.Center;
Chart.LegendBox.Template = "%name";
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle;
Chart.LegendBox.DefaultEntry.LabelStyle.Font = new Font("Tahoma", 11, FontStyle.Regular);
Chart.YAxis.DefaultTick.Label.Text = "";
Chart.YAxis.Line.Visible = false;
Chart.ChartArea.ClearColors();
Chart.DefaultElement.SmartLabel.Padding = 3;
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;
Chart.DefaultElement.ShowValue = true;
Chart.DefaultElement.ToolTip = "";
Chart.LegendBox.ClearColors();
Chart.TitleBox.ClearColors();
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.Palette = new Color[] { }; //prevent adding default DNC Palette
Chart.DefaultElement.SmartLabel.Text = "<b>{%date:date dd}</b><br><br><chart:sparkline width=87 height=45 align=center verticalAlign=middle data=%subvalueList colors=white,none,none,green min=21.215 max=71.416>";
Chart.JS.Settings.Add("palette.colorBar_axis_defaultTick_label_text", "'%value�F'");
Chart.JS.Settings.Add("palette.colorBar_axis_crosshair_label_text", "'{%value:n1}�F'");
Chart.JS.Settings.Add("palette.colors", @"['#0000E3','#0047FF','#00ABFF','#0FFFEF','#43FFBB','#73FF8B','#A7FF57','#FFEF00','#FF8B00','#FF5700','#FF2300','#ED0000','#830000']");
Chart.JS.Enabled = true;
Chart.JS.ControlID = "myJSC";
Chart.JS.Data = "../../data/resources/BaselTemp_1.1.2018-4.30.2018.csv";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month;
Chart.JS.Calendar.Calculation = Calculation.Average;
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
}
</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:740px;height:600px;margin:0px auto;" />
</body>
</html>
<%@ Page Language="vb" Description="dotnetCHARTING Component" %>
<%@ Register TagPrefix="dnc" Namespace="dotnetCHARTING" Assembly="dotnetCHARTING"%>
<%@ Import Namespace="System.Drawing" %>
<%@ Outputcache Duration = "1000" Varybyparam = "none"%>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
' Demonstrates Calendar heatmap with charts based on csv data.
Chart.Type = ChartType.Calendar
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.Size = "740x600"
Chart.TitleBox.Label.Text = "Temperature Jan-Apr 2018"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Regular)
Chart.TitleBox.Position = TitleBoxPosition.Center
Chart.LegendBox.Template = "%name"
Chart.LegendBox.Position = LegendBoxPosition.BottomMiddle
Chart.LegendBox.DefaultEntry.LabelStyle.Font = New Font("Tahoma", 11, FontStyle.Regular)
Chart.YAxis.DefaultTick.Label.Text = ""
Chart.YAxis.Line.Visible = False
Chart.ChartArea.ClearColors()
Chart.DefaultElement.SmartLabel.Padding = 3
Chart.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near
Chart.DefaultElement.ShowValue = True
Chart.DefaultElement.ToolTip = ""
Chart.LegendBox.ClearColors()
Chart.TitleBox.ClearColors()
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.Palette = New Color() { } 'prevent adding default DNC Palette
Chart.DefaultElement.SmartLabel.Text = "<b>{%date:date dd}</b><br><br><chart:sparkline width=87 height=45 align=center verticalAlign=middle data=%subvalueList colors=white,none,none,green min=21.215 max=71.416>"
Chart.JS.Settings.Add("palette.colorBar_axis_defaultTick_label_text", "'%value�F'")
Chart.JS.Settings.Add("palette.colorBar_axis_crosshair_label_text", "'{%value:n1}�F'")
Chart.JS.Settings.Add("palette.colors", "['#0000E3','#0047FF','#00ABFF','#0FFFEF','#43FFBB','#73FF8B','#A7FF57','#FFEF00','#FF8B00','#FF5700','#FF2300','#ED0000','#830000']")
Chart.JS.Enabled = True
Chart.JS.ControlID = "myJSC"
Chart.JS.Data = "../../data/resources/BaselTemp_1.1.2018-4.30.2018.csv"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Month
Chart.JS.Calendar.Calculation = Calculation.Average
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
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:740px;height:600px;margin:0px auto;" />
</body>
</html>
Previous