JS Calendar Ozone
Demonstrates Calendar chart from csv data file with custom smartPalette and axis ticks.
<%@ 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)
{
// Demonstrates Calendar chart from csv data file with custom smartPalette and axis ticks.
Chart.Type = ChartType.Calendar;
Chart.Width = 360;
Chart.Height = 660;
Chart.TempDirectory = "temp";
Chart.Debug = false;
Chart.TitleBox.Label.Text = "2017 Daily Max 8-hour<br>Ozone Concentration (ppm)";
Chart.TitleBox.Label.Font = new Font("Tahoma", 10, FontStyle.Bold);
Chart.TitleBox.ClearColors();
//JS settings
Chart.JS.Enabled = true;
Chart.JS.Data = "./../../data/resources/ozone2017.csv";
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year;
Chart.JS.Calendar.Horizontal = true;
Chart.JS.Settings.Add("palette_defaultRange_legendEntry_value", "'{%min:n3} - {%max:n3}'");
Chart.JS.Settings.Add("palette_ranges", "js:ranges");
Chart.JS.Settings.Add("yAxis_customTicks", "js:weekdayLabels.map(function (v, i) { return { value: i, label_text: v } })");
Chart.JS.Buttons.EnableExportButton = false;
Chart.JS.Buttons.EnablePrintButton = false;
Chart.DefaultSeries.LegendEntry.Visible = false;
Chart.ShadingEffectMode = ShadingEffectMode.None;
Chart.DefaultElement.ToolTip = "<b>%name</b><br> %zValue PPM";
Chart.Palette = new Color[] { };
Chart.LegendBox.ClearColors();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
var weekdayLabels = 'S,M,T,W,T,F,S'.split(',');
var ranges = [
{ value: [0, .018], color: '#8ce99a' },
{ value: [.019, .036], color: '#51cf66' },
{ value: [.037, .054], color: '#37b24d' },
{ value: [.055, .059], color: '#ffff8d', legendEntry_lineAbove: true },
{ value: [.06, .065], color: '#ffff00' },
{ value: [.066, .07], color: '#ffea00' },
{ value: [.017, .075], color: '#ffd180', legendEntry_lineAbove: true },
{ value: [.076, .08], color: '#ffab40' },
{ value: [.081, .085], color: '#ff9100' },
{ value: [.086, .092], color: '#ff8a80', legendEntry_lineAbove: true },
{ value: [.093, .098], color: '#ff5252' },
{ value: [.099, .105], color: '#ff1744' },
{ value: [.106, .2], color: '#880e4f', legendEntry_lineAbove: true }
];
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</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)
' Demonstrates Calendar chart from csv data file with custom smartPalette and axis ticks.
Chart.Type = ChartType.Calendar
Chart.Width = 360
Chart.Height = 660
Chart.TempDirectory = "temp"
Chart.Debug = False
Chart.TitleBox.Label.Text = "2017 Daily Max 8-hour<br>Ozone Concentration (ppm)"
Chart.TitleBox.Label.Font = New Font("Tahoma", 10, FontStyle.Bold)
Chart.TitleBox.ClearColors()
'JS settings
Chart.JS.Enabled = True
Chart.JS.Data = "./../../data/resources/ozone2017.csv"
Chart.JS.Calendar.Type = JsOptions.CalendarView.Year
Chart.JS.Calendar.Horizontal = True
Chart.JS.Settings.Add("palette_defaultRange_legendEntry_value", "'{%min:n3} - {%max:n3}'")
Chart.JS.Settings.Add("palette_ranges", "js:ranges")
Chart.JS.Settings.Add("yAxis_customTicks", "js:weekdayLabels.map(function (v, i) { return { value: i, label_text: v } })")
Chart.JS.Buttons.EnableExportButton = False
Chart.JS.Buttons.EnablePrintButton = False
Chart.DefaultSeries.LegendEntry.Visible = False
Chart.ShadingEffectMode = ShadingEffectMode.None
Chart.DefaultElement.ToolTip = "<b>%name</b><br> %zValue PPM"
Chart.Palette = New Color() { }
Chart.LegendBox.ClearColors()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<script type="text/javascript">
var weekdayLabels = 'S,M,T,W,T,F,S'.split(',');
var ranges = [
{ value: [0, .018], color: '#8ce99a' },
{ value: [.019, .036], color: '#51cf66' },
{ value: [.037, .054], color: '#37b24d' },
{ value: [.055, .059], color: '#ffff8d', legendEntry_lineAbove: true },
{ value: [.06, .065], color: '#ffff00' },
{ value: [.066, .07], color: '#ffea00' },
{ value: [.017, .075], color: '#ffd180', legendEntry_lineAbove: true },
{ value: [.076, .08], color: '#ffab40' },
{ value: [.081, .085], color: '#ff9100' },
{ value: [.086, .092], color: '#ff8a80', legendEntry_lineAbove: true },
{ value: [.093, .098], color: '#ff5252' },
{ value: [.099, .105], color: '#ff1744' },
{ value: [.106, .2], color: '#880e4f', legendEntry_lineAbove: true }
];
</script>
</head>
<body>
<div align="center">
<dnc:Chart ID="Chart" runat="server" />
</div>
</body>
</html>
Previous