<%@ 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 with charts dashboard based on csv data.
chart1.Type = ChartType.Calendar;
chart1.TempDirectory = "temp";
chart1.Debug = false;
chart1.Size = "700x680";
chart1.ChartArea.ClearColors();

chart1.TitleBox.Label.Text = "London, United Kingdom<br>January 2018";
chart1.TitleBox.Label.Font = new Font("Tahoma", 11, FontStyle.Regular);
chart1.TitleBox.ClearColors();
chart1.LegendBox.Visible = false;

chart1.YAxis.DefaultTick.Label.Text = "";
chart1.YAxis.Line.Visible = false;

chart1.DefaultElement.SmartLabel.Padding = 3;
chart1.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near;
chart1.DefaultElement.ShowValue = true;
chart1.DefaultElement.ToolTip = "";
chart1.DefaultElement.Color = Color.Transparent;
chart1.DefaultElement.Outline.Width = 0;
chart1.ShadingEffectMode = ShadingEffectMode.None;
chart1.Palette = new Color[] { }; //prevent adding default DNC Palette

chart1.JS.Enabled = true;
chart1.JS.RenderCallback = "updateChart";
chart1.JS.Calendar.StartDate = new DateTime(2018, 1, 1);
chart1.JS.Calendar.EndDate = new DateTime(2018, 1, 31);
chart1.JS.Calendar.Type = JsOptions.CalendarView.Month;
chart1.JS.Calendar.DefaultEdgeElement.ShowValue = false;
chart1.JS.Calendar.DefaultEdgeElement.ToolTip = "";//disable tooltip
chart1.JS.Calendar.DefaultEdgeElement.Color = Color.Transparent;
chart1.JS.Buttons.EnableExportButton = false;
chart1.JS.Buttons.EnablePrintButton = false;
// Default Point Event
chart1.JS.Settings.Add("defaultPoint.events_click", "js:pointClick");
chart1.JS.Settings.Add("defaultPoint.states_hover.color", "'#f3faff'");
chart1.JS.Settings.Add("defaultPoint.states_select.color", "'#f3faff'");

chart2.Type = ChartType.Combo;
chart2.DefaultSeries.Type = SeriesType.Spline;
chart2.TempDirectory = "temp";
chart2.Debug = false;
chart2.Size = "700x340";
chart2.LegendBox.Visible = false;
chart2.ChartArea.ClearColors();
chart2.JS.Enabled = true;
chart2.JS.RenderCallback = "updateChart2";
chart2.JS.Buttons.EnableExportButton = false;
chart2.JS.Buttons.EnablePrintButton = false;
chart2.TitleBox.Label.Text = "January 1";
chart2.TitleBox.Label.Font = new Font("Tahoma", 14, FontStyle.Bold);
chart2.TitleBox.ClearColors();


chart2.XAxis.DefaultTick.Line.Visible = false;
chart2.XAxis.Line.Width = 0;

chart2.YAxis.Line.Width = 1;
chart2.XAxis.DefaultTick.Line.Color = Color.Transparent;
chart2.XAxis.DefaultTick.GridLine.Color = Color.Transparent;
chart2.XAxis.DefaultMinorTick.Line.Color = Color.Transparent;
chart2.XAxis.DefaultMinorTick.GridLine.Color = Color.Transparent;
chart2.XAxis.DefaultTick.Label.Text = "js:function(v){return ticks[JSC.formatDate(v, 't')]}";
chart2.XAxis.DefaultTick.Label.Font = new Font("Tahoma",11, FontStyle.Regular);
chart2.XAxis.Orientation = dotnetCHARTING.Orientation.Top;

chart2.JS.Settings.Add("xAxis_crosshair_enabled", "true");
chart2.JS.Settings.Add("xAxis_crosshair_outline_width", "0");
chart2.JS.Settings.Add("xAxis_crosshair_gridLine_visible", "true");
chart2.JS.Settings.Add("xAxis_crosshair_gridLine_width", "1");
chart2.JS.Settings.Add("xAxis_crosshair_gridLine_dashStyle", "solid");
chart2.JS.Settings.Add("xAxis_crosshair_gridLine_color", "#dfdfdf");

Series humidity = new Series();
humidity.Name = "Humidity";
humidity.DefaultElement.Color = ColorTranslator.FromHtml("#6db3f0");
humidity.Type = SeriesType.Column;
Axis aHumidity = new Axis();
aHumidity.JsID = "y2";
aHumidity.Orientation = dotnetCHARTING.Orientation.Right;
aHumidity.ScaleRange = new ScaleRange(0,400);
aHumidity.ClearValues=true;
aHumidity.Line.Width = 0;
humidity.YAxis = aHumidity;
chart2.SeriesCollection.Add(humidity);


Series wind = new Series();
wind.Name = "Wind";
wind.DefaultElement.Color = ColorTranslator.FromHtml("#eceff1");
wind.Type = SeriesType.Marker;
Axis aWind = new Axis();
aWind.JsID = "y3";
aWind.Orientation = dotnetCHARTING.Orientation.Right;
aWind.ScaleRange = new ScaleRange(-20,30);
aWind.ClearValues = true;
aWind.Line.Width = 0;
wind.YAxis = aWind;
chart2.SeriesCollection.Add(wind);

Series temperature = new Series();
temperature.Name = "Temperature";
temperature.Type = SeriesType.Line;
temperature.DefaultElement.Marker.Visible = false;
temperature.DefaultElement.Color=ColorTranslator.FromHtml("#1e88e5");
Axis aTemperature = new Axis();
aTemperature.JsID = "y1";
aTemperature.Orientation = dotnetCHARTING.Orientation.Left;
aTemperature.ScaleRange = new ScaleRange(-20, 70);
aTemperature.ClearValues = true;
aTemperature.Line.Width = 0;
temperature.YAxis = aTemperature;
chart2.SeriesCollection.Add(temperature);

//5 Days chart
chart3.Type = ChartType.Variwide;
chart3.JS.Enabled = true;
chart3.JS.RenderCallback = "updateChart3";
chart3.JS.Buttons.EnableExportButton = false;
chart3.JS.Buttons.EnablePrintButton = false;
chart3.Debug = false;
chart3.Size = "700x340";
chart3.TitleBox.Label.Text = "5-day weather";
chart3.TitleBox.Label.Font = new Font("Tahoma", 14, FontStyle.Bold);
chart3.TitleBox.ClearColors();
chart3.ChartArea.ClearColors();
chart3.LegendBox.Visible = false;
chart3.Palette = new Color[] { ColorTranslator.FromHtml("#bbdefb") };
chart3.YAxis.ScaleRange = new ScaleRange(30,65);
chart3.YAxis.Line.Visible = false;
chart3.YAxis.ClearValues = true;

chart3.XAxis.JsID = "x1";
chart3.XAxis.Scale = Scale.Time;
chart3.XAxis.TimeInterval = TimeInterval.Day;
chart3.ChartArea.ClearColors();

chart3.XAxis.Line.Width= 0;
chart3.XAxis.DefaultTick.Label.Text = "js:function(v){return ticks1[JSC.formatDate(v, 'd')]}";
chart3.XAxis.Orientation = dotnetCHARTING.Orientation.Top;
//add an empty series for connecting xAxis, actual series is added in JS made5DayChart
chart3.SeriesCollection.Add(new Series());
Axis xShadow = chart3.XAxis.Calculate("");
xShadow.JsID = "x2";
xShadow.Scale = Scale.Time;
xShadow.TimeInterval = TimeInterval.Day;
xShadow.DefaultTick.Label.Text = "js:function(v){return ticks2[JSC.formatDate(v, 'd')]}";
xShadow.DefaultTick.Label.Font = new Font("Tahoma", 12, FontStyle.Regular);
xShadow.Label.Color = ColorTranslator.FromHtml("#546e7a");
xShadow.Orientation = dotnetCHARTING.Orientation.Bottom;
xShadow.DefaultTick.GridLine.Color = Color.Empty;
xShadow.DefaultTick.Line.Color = Color.Empty;
xShadow.Line.Width = 0;
chart3.AxisCollection.Add(xShadow);
}

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">

</style>
<script type="text/javascript">
function pointClick() {
var point = this;
var pointDate = new Date(point.tokenValue('%date'));
setTimeout(function() {
makeDayChart(pointDate);
made5DayChart(pointDate);
},100);
}
</script>
</head>
<body>
<dnc:Chart ID="chart1" runat="server" Style="max-width: 700px; height: 680px; margin: 0px auto;" />
<dnc:Chart ID="chart2" runat="server" Style="max-width: 700px; height: 340px; margin: 0px auto;" />
<dnc:Chart ID="chart3" runat="server" Style="max-width: 700px; height:340px; margin: 0px auto;" />
<script type="text/javascript">

var windToIcon = {
'E': 90,
'ENE': 67.5,
'ESE': 112.5,
'N': 0,
'NE': 45,
'NNE': 22.5,
'NNW': 337.5,
'NW': 315,
'S': 180,
'SE': 135,
'SSE': 157.5,
'SSW': 202.5,
'SW': 225,
'W': 270,
'WNW': 292.5,
'WSW': 247.5,
};
var weatherToIcon = {
'Cloudy': '<icon name=weather/cloud color=#A5D5F5 ',
'Drizzle': '<icon name=weather/drizzle color=#77B3DB ',
'Light Rain': '<icon name=weather/drizzle color=#77B3DB ',
'Fair': '<icon name=weather/sun color=#FCCE3A ',
'Haze': '<icon name=weather/fog color=#77B3DB ',
'Mist': '<icon name=weather/fog color=#77B3DB ',
'Light Drizzle': '<icon name=weather/mistyrain color=#77B3DB ',
'Mostly Cloudy': '<icon name=weather/variable-sun color=#C5E4F9 ',
'Partly Cloudy': '<icon name=weather/variable-sun color=#C5E4F9 ',
'Rain': '<icon name=weather/rain color=#4E94C4 '
};

var ticks = {};
var ticks1 = {};
var ticks2 = {};
var data;
var myJSC2, myJSC3;
function updateChart2(ch) { myJSC2 = ch };
function updateChart3(ch) { myJSC3 = ch };
function updateChart(ch) { loadData(ch, makeChart); };
function loadData(chart,cb) {
JSC.fetch('./../../data/resources/London_weather.csv')
.then(function(response) { return response.text() })
.then(function (text) {
data = JSC.csv2Json(text);
cb(chart,data)
makeDayChart(new Date(2018, 0, 1));
made5DayChart(new Date(2018, 0, 1));
})
.catch(function(err) { console.error(err) });
}

function makeChart(chart) {
//Format csv data into points that will bind the calendar cells.
var customSeries = getCalendarData();

chart.options({ series: customSeries });
}
function getCalendarData() {
return JSC.nest()
.key({key:'date',pattern:'day'})
.pointRollup(function(key,values){
var result = {
date:key,
selected: false,
attributes:{
weatherIcon: weatherToIcon[values.map(function(a) { return a.condition; })[3]] + 'size=26 margin_bottom=6>',
minTemp: JSC.min(values, "temp"),
maxTemp: JSC.max(values, "temp"),
condition: values.map(function(a) { return a.condition; })[3],
},
label_text:'<span style="align:left;font-size:11px;color:#64b5f6"><b>%name</b></span><br>' + weatherToIcon[values.map(function(a) { return a.condition; })[3]] + 'size=26 margin_bottom=6>' + '<br><span style="font-size:12px; color:#b0bec5">' + values.map(function(a) { return a.condition; })[3] + '</span><br><span style="font-size:16px; color:#546e7a">' + JSC.max(values, "temp") + '�/</span><span style="font-size:12px;color:#b0bec5">' + JSC.min(values, "temp") + '�F</span>'
}
if(JSC.formatDate(key, 'd') == '1/1/2018'){ result.selected = true; }
return result
})
.series(data);
}

function makeDayChart(date) {

var myNest = JSC.nest().key({ key: 'date', pattern: { hour: '*', every: 3 }, range: [JSC.formatDate(date, 'd') + ' 00:00', JSC.formatDate(date, 'd') + ' 22:00'] });
var tempPoints = myNest.pointRollup(function (key, values) {
ticks[JSC.formatDate(key, 't')] = JSC.formatDate(key, 't').replace(/:00/g, "") + '<br>' + weatherToIcon[values.map(function (a) { return a.condition; })[0]] + 'size=40 margin=5><br><span style="font-size:12px; color:#b0bec5">' + values.map(function (a) { return a.condition; })[0] + '</span>';
return {
x: key,
y: values.map(function (a) { return a.temp; })[0],
tooltip: '<b>%seriesName:</b> %value�F',
label: {
visible: true,
text: '%value�F',
verticalAlign: 'top',
align: 'center'
},
}
}).points(data);
var windPoints = myNest.pointRollup(function (key, values) {
return {
x: key,
y: values.map(function (a) { return a.wind_speed; })[0],
tooltip: '<b>%seriesName:</b> ' + values.map(function (a) { return a.wind; })[0] + ' %value mph',
marker: {
visible: true,
type: 'linear/basic/paperplane',
size: 20,
rotate: (windToIcon[values.map(function (a) { return a.wind; })[0]] - 135),
outline_width: 0
}
}
}).points(data);
var humidityPoints = myNest.pointRollup(function (key, values) {
return {
x: key,
y: values.map(function (a) { return a.humidity; })[0],
tooltip: '<b>%seriesName:</b> %value%',
label: {
text: '<icon path="m8.1 10c.3 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.2-.6.6c0 .3.3.6.6.6zm3.8 5c-.3 0-.6.3-.6.6s.3.6.6.6.6-.3.6-.6-.3-.6-.6-.6zm1.6-10.6c-1-1.3-2.1-2.7-2.9-4.1-.2-.2-.4-.3-.6-.3s-.4.1-.5.3c-.9 1.5-1.9 2.8-3 4.1-2.1 2.6-4 5.1-4 8.1 0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5c0-3-2-5.5-4-8.1zm-5.4 3.1c1 0 1.9.8 1.9 1.9s-.8 1.9-1.9 1.9-1.9-.8-1.9-1.9.9-1.9 1.9-1.9zm-.8 8.6c-.1.1-.3.2-.4.2s-.3-.1-.4-.2c-.2-.2-.2-.6 0-.9l6.3-6.3c.2-.2.6-.2.9 0 .2.2.2.6 0 .9zm4.6 1.4c-1 0-1.9-.8-1.9-1.9s.8-1.9 1.9-1.9 1.9.8 1.9 1.9-.9 1.9-1.9 1.9z" size=12> %value%',
placement: 'inside'
}
}
}).points(data);
for (var i = 0; i < myJSC2.seriesCount; i++) {
switch (myJSC2.series(i).name) {
case "Wind":
myJSC2.series(i).options({ points: windPoints });
break;
case "Humidity":
myJSC2.series(i).options({ points: humidityPoints });
break;
case "Temperature":
myJSC2.series(i).options({ points: tempPoints });
break;
default:
break;
}
}
myJSC2.options({ title_label_text: JSC.formatDate(date, 'm')});
}
function made5DayChart(date){
var lastDay = new Date(date.getFullYear(),date.getMonth(),date.getDate()+5);
if(lastDay.getMonth() == 1){
lastDay = new Date(date.getFullYear(),date.getMonth()+1,1)
}
var points = JSC.nest()
.key({key:'date',pattern:'day',range:[date,lastDay]})
.pointRollup(function (key, values) {
ticks1[JSC.formatDate(key, 'd')] = JSC.formatDate(key, 'm') +'<br>'+ weatherToIcon[values.map(function(a) { return a.condition; })[3]] + 'size=40 margin=5><br><span style="font-size:12px; color:#b0bec5">' + values.map(function(a) { return a.condition; })[3] + '</span>';
ticks2[JSC.formatDate(key, 'd')] = '<br><icon path="m8.1 10c.3 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.2-.6.6c0 .3.3.6.6.6zm3.8 5c-.3 0-.6.3-.6.6s.3.6.6.6.6-.3.6-.6-.3-.6-.6-.6zm1.6-10.6c-1-1.3-2.1-2.7-2.9-4.1-.2-.2-.4-.3-.6-.3s-.4.1-.5.3c-.9 1.5-1.9 2.8-3 4.1-2.1 2.6-4 5.1-4 8.1 0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5c0-3-2-5.5-4-8.1zm-5.4 3.1c1 0 1.9.8 1.9 1.9s-.8 1.9-1.9 1.9-1.9-.8-1.9-1.9.9-1.9 1.9-1.9zm-.8 8.6c-.1.1-.3.2-.4.2s-.3-.1-.4-.2c-.2-.2-.2-.6 0-.9l6.3-6.3c.2-.2.6-.2.9 0 .2.2.2.6 0 .9zm4.6 1.4c-1 0-1.9-.8-1.9-1.9s.8-1.9 1.9-1.9 1.9.8 1.9 1.9-.9 1.9-1.9 1.9z" size=14> ' +
JSC.formatNumber(JSC.mean(values, "humidity"), 'n0') + '%<br><br><icon name=linear/basic/paperplane size=14 rotate=' + (windToIcon[values.map(function(a) { return a.wind; })[3]] - 45) + '> ' + JSC.formatNumber(JSC.mean(values, "wind_speed"), 'n0') + ' mph<br>';
return {
x:key,
y:[JSC.min(values, "temp"),JSC.max(values, "temp")],
label_text:'<span style="font-size:14px; color:#546e7a">' + JSC.max(values, "temp") + '�/</span><span style="font-size:12px;color:#b0bec5">' + JSC.min(values, "temp") + '�F</span>',
tooltip:'<b>Humidity:</b> ' + JSC.formatNumber(JSC.mean(values, "humidity"), 'n0') + '%<br>' +
'<b>Wind:</b> ' + values.map(function(a) { return a.wind; })[3] + ' ' + JSC.formatNumber(JSC.mean(values, "wind_speed"), 'n0') + ' mph'
}
})
.points(data);
myJSC3.options({ series: [{ points: points }] }, false);
}
</script>
</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 with charts dashboard based on csv data.
chart1.Type = ChartType.Calendar
chart1.TempDirectory = "temp"
chart1.Debug = False
chart1.Size = "700x680"
chart1.ChartArea.ClearColors()

chart1.TitleBox.Label.Text = "London, United Kingdom<br>January 2018"
chart1.TitleBox.Label.Font = New Font("Tahoma", 11, FontStyle.Regular)
chart1.TitleBox.ClearColors()
chart1.LegendBox.Visible = False

chart1.YAxis.DefaultTick.Label.Text = ""
chart1.YAxis.Line.Visible = False

chart1.DefaultElement.SmartLabel.Padding = 3
chart1.DefaultElement.SmartLabel.LineAlignment = StringAlignment.Near
chart1.DefaultElement.ShowValue = True
chart1.DefaultElement.ToolTip = ""
chart1.DefaultElement.Color = Color.Transparent
chart1.DefaultElement.Outline.Width = 0
chart1.ShadingEffectMode = ShadingEffectMode.None
chart1.Palette = New Color() { } 'prevent adding default DNC Palette

chart1.JS.Enabled = True
chart1.JS.ControlID = "myJSC"
chart1.JS.Calendar.StartDate = New DateTime(2018, 1, 1)
chart1.JS.Calendar.EndDate = New DateTime(2018, 1, 31)
chart1.JS.Calendar.Type = JsOptions.CalendarView.Month
chart1.JS.Calendar.DefaultEdgeElement.ShowValue = False
chart1.JS.Calendar.DefaultEdgeElement.ToolTip = "" 'disable tooltip
chart1.JS.Calendar.DefaultEdgeElement.Color = Color.Transparent
chart1.JS.Buttons.EnableExportButton = False
chart1.JS.Buttons.EnablePrintButton = False
' Default Point Event
chart1.JS.Settings.Add("defaultPoint.events_click", "js:pointClick")
chart1.JS.Settings.Add("defaultPoint.states_hover.color", "'#f3faff'")
chart1.JS.Settings.Add("defaultPoint.states_select.color", "'#f3faff'")

chart2.Type = ChartType.Combo
chart2.DefaultSeries.Type = SeriesType.Spline
chart2.TempDirectory = "temp"
chart2.Debug = False
chart2.Size = "700x340"
chart2.LegendBox.Visible = False
chart2.ChartArea.ClearColors()
chart2.JS.Enabled = True
chart2.JS.ControlID = "myJSC2"
chart2.JS.Buttons.EnableExportButton = False
chart2.JS.Buttons.EnablePrintButton = False
chart2.TitleBox.Label.Text = "January 1"
chart2.TitleBox.Label.Font = New Font("Tahoma", 14, FontStyle.Bold)
chart2.TitleBox.ClearColors()


chart2.XAxis.DefaultTick.Line.Visible = False
chart2.XAxis.Line.Width = 0

chart2.YAxis.Line.Width = 1
chart2.XAxis.DefaultTick.Line.Color = Color.Transparent
chart2.XAxis.DefaultTick.GridLine.Color = Color.Transparent
chart2.XAxis.DefaultMinorTick.Line.Color = Color.Transparent
chart2.XAxis.DefaultMinorTick.GridLine.Color = Color.Transparent
chart2.XAxis.DefaultTick.Label.Text = "js:function(v){return ticks[JSC.formatDate(v, 't')]}"
chart2.XAxis.DefaultTick.Label.Font = New Font("Tahoma",11, FontStyle.Regular)
chart2.XAxis.Orientation = dotnetCHARTING.Orientation.Top

chart2.JS.Settings.Add("xAxis_crosshair_enabled", "true")
chart2.JS.Settings.Add("xAxis_crosshair_outline_width", "0")
chart2.JS.Settings.Add("xAxis_crosshair_gridLine_visible", "true")
chart2.JS.Settings.Add("xAxis_crosshair_gridLine_width", "1")
chart2.JS.Settings.Add("xAxis_crosshair_gridLine_dashStyle", "solid")
chart2.JS.Settings.Add("xAxis_crosshair_gridLine_color", "#dfdfdf")

Dim humidity As Series = New Series()
humidity.Name = "Humidity"
humidity.DefaultElement.Color = ColorTranslator.FromHtml("#6db3f0")
humidity.Type = SeriesType.Column
Dim aHumidity As Axis = New Axis()
aHumidity.JsID = "y2"
aHumidity.Orientation = dotnetCHARTING.Orientation.Right
aHumidity.ScaleRange = New ScaleRange(0,400)
aHumidity.ClearValues=True
aHumidity.Line.Width = 0
humidity.YAxis = aHumidity
chart2.SeriesCollection.Add(humidity)


Dim wind As Series = New Series()
wind.Name = "Wind"
wind.DefaultElement.Color = ColorTranslator.FromHtml("#eceff1")
wind.Type = SeriesType.Marker
Dim aWind As Axis = New Axis()
aWind.JsID = "y3"
aWind.Orientation = dotnetCHARTING.Orientation.Right
aWind.ScaleRange = New ScaleRange(-20,30)
aWind.ClearValues = True
aWind.Line.Width = 0
wind.YAxis = aWind
chart2.SeriesCollection.Add(wind)

Dim temperature As Series = New Series()
temperature.Name = "Temperature"
temperature.Type = SeriesType.Line
temperature.DefaultElement.Marker.Visible = False
temperature.DefaultElement.Color=ColorTranslator.FromHtml("#1e88e5")
Dim aTemperature As Axis = New Axis()
aTemperature.JsID = "y1"
aTemperature.Orientation = dotnetCHARTING.Orientation.Left
aTemperature.ScaleRange = New ScaleRange(-20, 70)
aTemperature.ClearValues = True
aTemperature.Line.Width = 0
temperature.YAxis = aTemperature
chart2.SeriesCollection.Add(temperature)

'5 Days chart
chart3.Type = ChartType.Variwide
chart3.JS.Enabled = True
chart3.JS.ControlID = "myJSC3"
chart3.JS.Buttons.EnableExportButton = False
chart3.JS.Buttons.EnablePrintButton = False
chart3.Debug = False
chart3.Size = "700x340"
chart3.TitleBox.Label.Text = "5-day weather"
chart3.TitleBox.Label.Font = New Font("Tahoma", 14, FontStyle.Bold)
chart3.TitleBox.ClearColors()
chart3.ChartArea.ClearColors()
chart3.LegendBox.Visible = False
chart3.Palette = New Color() { ColorTranslator.FromHtml("#bbdefb") }
chart3.YAxis.ScaleRange = New ScaleRange(30,65)
chart3.YAxis.Line.Visible = False
chart3.YAxis.ClearValues = True

chart3.XAxis.JsID = "x1"
chart3.XAxis.Scale = Scale.Time
chart3.XAxis.TimeInterval = TimeInterval.Day
chart3.ChartArea.ClearColors()

chart3.XAxis.Line.Width= 0
chart3.XAxis.DefaultTick.Label.Text = "js:function(v){return ticks1[JSC.formatDate(v, 'd')]}"
chart3.XAxis.Orientation = dotnetCHARTING.Orientation.Top
'add an empty series for connecting xAxis, actual series is added in JS made5DayChart
chart3.SeriesCollection.Add(New Series())
Dim xShadow As Axis = chart3.XAxis.Calculate("")
xShadow.JsID = "x2"
xShadow.Scale = Scale.Time
xShadow.TimeInterval = TimeInterval.Day
xShadow.DefaultTick.Label.Text = "js:function(v){return ticks2[JSC.formatDate(v, 'd')]}"
xShadow.DefaultTick.Label.Font = New Font("Tahoma", 12, FontStyle.Regular)
xShadow.Label.Color = ColorTranslator.FromHtml("#546e7a")
xShadow.Orientation = dotnetCHARTING.Orientation.Bottom
xShadow.DefaultTick.GridLine.Color = Color.Empty
xShadow.DefaultTick.Line.Color = Color.Empty
xShadow.Line.Width = 0
chart3.AxisCollection.Add(xShadow)
End Sub

</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>.netCHARTING Sample</title>
<style type="text/css">

</style>
<script type="text/javascript">



function pointClick() {
var point = this;
var pointDate = new Date(point.tokenValue('%date'));
setTimeout(function() {
makeDayChart(pointDate);
made5DayChart(pointDate);
},100);
}


</script>
</head>
<body>
<dnc:Chart ID="chart1" runat="server" Style="max-width: 700px; height: 680px; margin: 0px auto;" />
<dnc:Chart ID="chart2" runat="server" Style="max-width: 700px; height: 340px; margin: 0px auto;" />
<dnc:Chart ID="chart3" runat="server" Style="max-width: 700px; height:340px; margin: 0px auto;" />
<script type="text/javascript">

var windToIcon = {
'E': 90,
'ENE': 67.5,
'ESE': 112.5,
'N': 0,
'NE': 45,
'NNE': 22.5,
'NNW': 337.5,
'NW': 315,
'S': 180,
'SE': 135,
'SSE': 157.5,
'SSW': 202.5,
'SW': 225,
'W': 270,
'WNW': 292.5,
'WSW': 247.5,
};
var weatherToIcon = {
'Cloudy': '<icon name=weather/cloud color=#A5D5F5 ',
'Drizzle': '<icon name=weather/drizzle color=#77B3DB ',
'Light Rain': '<icon name=weather/drizzle color=#77B3DB ',
'Fair': '<icon name=weather/sun color=#FCCE3A ',
'Haze': '<icon name=weather/fog color=#77B3DB ',
'Mist': '<icon name=weather/fog color=#77B3DB ',
'Light Drizzle': '<icon name=weather/mistyrain color=#77B3DB ',
'Mostly Cloudy': '<icon name=weather/variable-sun color=#C5E4F9 ',
'Partly Cloudy': '<icon name=weather/variable-sun color=#C5E4F9 ',
'Rain': '<icon name=weather/rain color=#4E94C4 '
};

var ticks = {};
var ticks1 = {};
var ticks2 = {};
var data;

setTimeout(function() {
loadData(makeChart);
},100);

function loadData(cb) {
JSC.fetch('./../../data/resources/London_weather.csv')
.then(function(response) { return response.text() })
.then(function (text) {
data = JSC.csv2Json(text);
cb(data)
makeDayChart(new Date(2018, 0, 1));
made5DayChart(new Date(2018, 0, 1));
})
.catch(function(err) { console.error(err) });
}

function makeChart() {
//Format csv data into points that will bind the calendar cells.
var customSeries = getCalendarData();

myJSC.options({ series: customSeries });
}
function getCalendarData() {
return JSC.nest()
.key({key:'date',pattern:'day'})
.pointRollup(function(key,values){
var result = {
date:key,
selected: false,
attributes:{
weatherIcon: weatherToIcon[values.map(function(a) { return a.condition; })[3]] + 'size=26 margin_bottom=6>',
minTemp: JSC.min(values, "temp"),
maxTemp: JSC.max(values, "temp"),
condition: values.map(function(a) { return a.condition; })[3],
},
label_text:'<span style="align:left;font-size:11px;color:#64b5f6"><b>%name</b></span><br>' + weatherToIcon[values.map(function(a) { return a.condition; })[3]] + 'size=26 margin_bottom=6>' + '<br><span style="font-size:12px; color:#b0bec5">' + values.map(function(a) { return a.condition; })[3] + '</span><br><span style="font-size:16px; color:#546e7a">' + JSC.max(values, "temp") + '�/</span><span style="font-size:12px;color:#b0bec5">' + JSC.min(values, "temp") + '�F</span>'
}
if(JSC.formatDate(key, 'd') == '1/1/2018'){ result.selected = true; }
return result
})
.series(data);
}

function makeDayChart(date) {

var myNest = JSC.nest().key({ key: 'date', pattern: { hour: '*', every: 3 }, range: [JSC.formatDate(date, 'd') + ' 00:00', JSC.formatDate(date, 'd') + ' 22:00'] });
var tempPoints = myNest.pointRollup(function (key, values) {
ticks[JSC.formatDate(key, 't')] = JSC.formatDate(key, 't').replace(/:00/g, "") + '<br>' + weatherToIcon[values.map(function (a) { return a.condition; })[0]] + 'size=40 margin=5><br><span style="font-size:12px; color:#b0bec5">' + values.map(function (a) { return a.condition; })[0] + '</span>';
return {
x: key,
y: values.map(function (a) { return a.temp; })[0],
tooltip: '<b>%seriesName:</b> %value�F',
label: {
visible: true,
text: '%value�F',
verticalAlign: 'top',
align: 'center'
},
}
}).points(data);
var windPoints = myNest.pointRollup(function (key, values) {
return {
x: key,
y: values.map(function (a) { return a.wind_speed; })[0],
tooltip: '<b>%seriesName:</b> ' + values.map(function (a) { return a.wind; })[0] + ' %value mph',
marker: {
visible: true,
type: 'linear/basic/paperplane',
size: 20,
rotate: (windToIcon[values.map(function (a) { return a.wind; })[0]] - 135),
outline_width: 0
}
}
}).points(data);
var humidityPoints = myNest.pointRollup(function (key, values) {
return {
x: key,
y: values.map(function (a) { return a.humidity; })[0],
tooltip: '<b>%seriesName:</b> %value%',
label: {
text: '<icon path="m8.1 10c.3 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.2-.6.6c0 .3.3.6.6.6zm3.8 5c-.3 0-.6.3-.6.6s.3.6.6.6.6-.3.6-.6-.3-.6-.6-.6zm1.6-10.6c-1-1.3-2.1-2.7-2.9-4.1-.2-.2-.4-.3-.6-.3s-.4.1-.5.3c-.9 1.5-1.9 2.8-3 4.1-2.1 2.6-4 5.1-4 8.1 0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5c0-3-2-5.5-4-8.1zm-5.4 3.1c1 0 1.9.8 1.9 1.9s-.8 1.9-1.9 1.9-1.9-.8-1.9-1.9.9-1.9 1.9-1.9zm-.8 8.6c-.1.1-.3.2-.4.2s-.3-.1-.4-.2c-.2-.2-.2-.6 0-.9l6.3-6.3c.2-.2.6-.2.9 0 .2.2.2.6 0 .9zm4.6 1.4c-1 0-1.9-.8-1.9-1.9s.8-1.9 1.9-1.9 1.9.8 1.9 1.9-.9 1.9-1.9 1.9z" size=12> %value%',
placement: 'inside'
}
}
}).points(data);
for (var i = 0; i < myJSC2.seriesCount; i++) {
switch (myJSC2.series(i).name) {
case "Wind":
myJSC2.series(i).options({ points: windPoints });
break;
case "Humidity":
myJSC2.series(i).options({ points: humidityPoints });
break;
case "Temperature":
myJSC2.series(i).options({ points: tempPoints });
break;
default:
break;
}
}
myJSC2.options({ title_label_text: JSC.formatDate(date, 'm')});
}
function made5DayChart(date){
var lastDay = new Date(date.getFullYear(),date.getMonth(),date.getDate()+5);
if(lastDay.getMonth() == 1){
lastDay = new Date(date.getFullYear(),date.getMonth()+1,1)
}
var points = JSC.nest()
.key({key:'date',pattern:'day',range:[date,lastDay]})
.pointRollup(function (key, values) {
ticks1[JSC.formatDate(key, 'd')] = JSC.formatDate(key, 'm') +'<br>'+ weatherToIcon[values.map(function(a) { return a.condition; })[3]] + 'size=40 margin=5><br><span style="font-size:12px; color:#b0bec5">' + values.map(function(a) { return a.condition; })[3] + '</span>';
ticks2[JSC.formatDate(key, 'd')] = '<br><icon path="m8.1 10c.3 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.2-.6.6c0 .3.3.6.6.6zm3.8 5c-.3 0-.6.3-.6.6s.3.6.6.6.6-.3.6-.6-.3-.6-.6-.6zm1.6-10.6c-1-1.3-2.1-2.7-2.9-4.1-.2-.2-.4-.3-.6-.3s-.4.1-.5.3c-.9 1.5-1.9 2.8-3 4.1-2.1 2.6-4 5.1-4 8.1 0 4.1 3.4 7.5 7.5 7.5s7.5-3.4 7.5-7.5c0-3-2-5.5-4-8.1zm-5.4 3.1c1 0 1.9.8 1.9 1.9s-.8 1.9-1.9 1.9-1.9-.8-1.9-1.9.9-1.9 1.9-1.9zm-.8 8.6c-.1.1-.3.2-.4.2s-.3-.1-.4-.2c-.2-.2-.2-.6 0-.9l6.3-6.3c.2-.2.6-.2.9 0 .2.2.2.6 0 .9zm4.6 1.4c-1 0-1.9-.8-1.9-1.9s.8-1.9 1.9-1.9 1.9.8 1.9 1.9-.9 1.9-1.9 1.9z" size=14> ' +
JSC.formatNumber(JSC.mean(values, "humidity"), 'n0') + '%<br><br><icon name=linear/basic/paperplane size=14 rotate=' + (windToIcon[values.map(function(a) { return a.wind; })[3]] - 45) + '> ' + JSC.formatNumber(JSC.mean(values, "wind_speed"), 'n0') + ' mph<br>';
return {
x:key,
y:[JSC.min(values, "temp"),JSC.max(values, "temp")],
label_text:'<span style="font-size:14px; color:#546e7a">' + JSC.max(values, "temp") + '�/</span><span style="font-size:12px;color:#b0bec5">' + JSC.min(values, "temp") + '�F</span>',
tooltip:'<b>Humidity:</b> ' + JSC.formatNumber(JSC.mean(values, "humidity"), 'n0') + '%<br>' +
'<b>Wind:</b> ' + values.map(function(a) { return a.wind; })[3] + ' ' + JSC.formatNumber(JSC.mean(values, "wind_speed"), 'n0') + ' mph'
}
})
.points(data);
myJSC3.options({ series: [{ points: points }] }, false);

}
</script>
</body>
</html>