/* eslint-env browser, jquery */
/* eslint consistent-this: ["error", "that"] */
/* global Highcharts */
var chart;
$(function () {
chart = new Highcharts.Chart({
chart: {
type : 'heatmap',
margin : [60, 10, 80, 50],
renderTo: 'graph_container'
},
boost: {
useGPUTranslations: true
},
title: {
text : 'Ségur-Le-Château zoom carte',
align: 'left',
x : 40
},
lang: {
loading: ''
},
subtitle: {
// text: 'Temperature variation by day and hour through 2013',
align: 'left',
x : 40
},
tooltip: {
backgroundColor: null,
borderWidth : 0,
distance : 10,
shadow : false,
useHTML : true,
style : {
padding: 0,
color : 'black'
}
},
xAxis: {
labels: {
align : 'left',
x : 5,
format: '{value:%B}' // long month
},
showLastLabel: true,
tickLength : 16
},
yAxis: {
title : {text: null},
labels : {format: '{value}:00'},
minPadding : 0,
maxPadding : 0,
startOnTick : false,
endOnTick : false,
tickPositions: [0, 6, 12, 18, 23],
// tickWidth: 1,
tickWidth : 0,
min : 0,
max : 23,
reversed : true
},
colorAxis: {
stops: [
[0.1, '#a050bf'],
[0.3, '#3060cf'],
[0.35, '#3060cf'],
[0.5, '#30cf60'],
[0.7, '#fffbbc'],
[0.85, '#c4463a'],
[1.0, '#ef80ef']
],
min : -15,
max : 35,
startOnTick : false,
endOnTick : false,
labels : {format: '{value}C'},
tickPositions : [-10, 0, 10, 20, 30],
showFirstLabel: true,
showLastLabel : true
},
series: [{
borderWidth: 0,
nullColor : '#202020',
colsize : 24 * 36e5, // one day
tooltip : {
headerFormat: 'Temperature
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value:.1f} C'
}
// turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
});
var start = new Date();
var update = function (metric, year) {
var titles = {
Temp : 'Températures par jours et par heures pour ',
Dewpoint : 'Dewpoint variation by day and hour through ',
RainRate : 'Rainfall rate variation by day and hour through ',
Windgust : 'Wind gust speed by day and hour through ',
Windspeed : 'Wind average speed by day and hour through ',
sunPct : 'Percentage Sunshine by day and hour through ',
SolarRad : 'Radiations solaire par jours et par heures pour ',
Humidity : 'Relative humidity by day and hour through ',
WindBearing: 'Wind direction by day and hour through '
};
start = new Date();
try {
chart.showLoading();
} catch (e) {
// Ignore this error
}
year = !year ? start.getFullYear() : +year;
$.ajax({
url : '../utils/getHeatmapData.php?year=' + year + '&value=' + metric,
datatype: 'json',
success : function (resp) {
// clear the canvas so we don't leave anything behind
// chart.series[0].getContext().canvas.width = chart.series[0].getContext().canvas.width;
// not required as series.update() destroys/recreates the canvas
// change any settings
chart.colorAxis[0].update(colorAxis[metric], false);
chart.series[0].update(series[metric], false);
chart.setTitle({}, {text: titles[metric] + year}, false);
// load the new data
chart.series[0].setData(resp, false, false, false);
chart.xAxis[0].update({
min : Date.UTC(year, 0, 1),
max : Date.UTC(year + 1, 0, 1),
tickPositions: [
Date.UTC(year, 0, 1),
Date.UTC(year, 1, 1),
Date.UTC(year, 2, 1),
Date.UTC(year, 3, 1),
Date.UTC(year, 4, 1),
Date.UTC(year, 5, 1),
Date.UTC(year, 6, 1),
Date.UTC(year, 7, 1),
Date.UTC(year, 8, 1),
Date.UTC(year, 9, 1),
Date.UTC(year, 10, 1),
Date.UTC(year, 11, 1)
]},
false
);
chart.hideLoading();
chart.redraw();
// console.log('Rendered in ' + (new Date() - start) + ' ms');
}
});
};
$('#btn_go').click(function () {
update($('#sel_metric').val(), $('#sel_year').val());
});
$('#sel_year option[value=' + start.getFullYear() + ']').prop('selected', true);
$('#sel_metric option[value=temp]').prop('selected', true);
update('Temp', start.getFullYear());
});
var colorAxis = {
Temp: {
stops: [
[0.1, '#a050bf'],
[0.3, '#3060cf'],
[0.35, '#3060cf'],
[0.5, '#30cf60'],
[0.7, '#fffbbc'],
[0.85, '#c4463a'],
[1.0, '#ef80ef']
],
min : -15,
max : 35,
startOnTick: false,
endOnTick : false,
labels : {
format : '{value}C',
formatter: null
},
tickPositions : [-10, 0, 10, 20, 30],
showFirstLabel: true,
showLastLabel : true
},
Dewpoint: {
stops: [
[0.1, '#a050bf'],
[0.3, '#3060cf'],
[0.35, '#3060cf'],
[0.5, '#30cf60'],
[0.7, '#fffbbc'],
[0.85, '#c4463a'],
[1.0, '#ef80ef']
],
min : -15,
max : 25,
startOnTick: false,
endOnTick : false,
labels : {
format : '{value}C',
formatter: null
},
tickPositions : [-10, 0, 10, 20],
showFirstLabel: true,
showLastLabel : true
},
RainRate: {
stops: [
[0.00, '#3060cf'],
[0.02, '#30cf60'],
[0.3, '#c4463a'],
[1.0, '#ef80ef']
],
min : 0,
max : 225,
startOnTick: true,
endOnTick : false,
labels : {
format : '{value}',
formatter: null
},
tickPositions : [0, 50, 100, 150, 200],
showFirstLabel: true,
showLastLabel : true
},
Windgust: {
stops: [
[0.0, '#3060cf'],
[0.2, '#30cf60'],
[0.4, '#fffbbc'],
[0.8, '#c4463a']
],
min : 0,
max : 55,
startOnTick: true,
endOnTick : false,
labels : {
format : '{value}',
formatter: null
},
tickPositions : [0, 10, 20, 30, 40, 50],
showFirstLabel: true,
showLastLabel : true
},
Windspeed: {
stops: [
[0.0, '#3060cf'],
[0.2, '#30cf60'],
[0.4, '#fffbbc'],
[0.8, '#c4463a']
],
min : 0,
max : 30,
startOnTick: true,
endOnTick : false,
labels : {
format : '{value}',
formatter: null
},
tickPositions : [0, 5, 10, 15, 20, 25],
showFirstLabel: true,
showLastLabel : true
},
sunPct: {
stops: [
// [0, '#000060'],
// [0.1, '#BF7700'],
// [0.8, '#FFD700'],
// [1.0, '#FFFFFF']
[0.000, '#3FBAD8'],
[0.001, '#FF6C01'],
[0.500, '#FFFF00'],
[1.000, '#FFFFFF']
],
min : 0,
max : 105,
startOnTick: true,
endOnTick : false,
labels : {
format : '{value}',
formatter: null
},
tickPositions : [0, 25, 50, 75, 100],
showFirstLabel: true,
showLastLabel : true
},
SolarRad: {
stops: [
// [0.0, '#90FF9F'],
// [0.001, '#33FB3B'],
// [0.4, '#fffbbc'],
// [1.0, '#c4463a']
[0.000, '#3FBAD8'],
[0.001, '#FF6C01'],
[0.500, '#FFFF00'],
[1.000, '#FFFFFF']
],
min : 0,
max : 1500,
startOnTick: true,
endOnTick : false,
labels : {
format : '{value}',
formatter: null
},
tickPositions : [0, 250, 500, 750, 1000, 1250],
showFirstLabel: true,
showLastLabel : true
},
Humidity: {
stops: [
[0.0, '#0A3BAF'],
[0.2, '#00CCCC'],
[0.3, '#00FA78'],
[0.5, '#00FA78'],
[0.6, '#00FA78'],
[0.8, '#bA8600'],
[0.9, '#dfdbac'],
[1.0, '#ff261a']
],
min : 0,
max : 105,
startOnTick: true,
endOnTick : false,
labels : {
format : '{value}',
formatter: null
},
tickPositions : [0, 20, 40, 60, 80, 100],
showFirstLabel: true,
showLastLabel : true
},
WindBearing: {
stops: [
[0.0, '#2c2c2c'],
[0.25, '#46c43a'],
[0.5, '#e0e0e0'],
[0.75, '#c4463a'],
[1.0, '#2c2c2c']
],
min : 0,
max : 360,
startOnTick: true,
endOnTick : true,
labels : {
formatter: function () {
switch (this.value) {
case 0:
case 360:
return 'N';
case 90:
return 'E';
case 180:
return 'S';
case 270:
return 'W';
}
}
},
tickPositions : [0, 90, 180, 270, 360],
showFirstLabel: true,
showLastLabel : true
}
};
var series = {
Temp: {
tooltip: {
headerFormat: 'Temperature
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value:.1f} C'
}
},
Dewpoint: {
tooltip: {
headerFormat: 'Dewpoint
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value:.1f} C'
}
},
RainRate: {
tooltip: {
headerFormat: 'Rainfall rate
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value:.1f} mm/h'
}
},
Windgust: {
tooltip: {
headerFormat: 'Wind gust
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value} mph'
}
},
Windspeed: {
tooltip: {
headerFormat: 'Wind average
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value:.1f} mph'
}
},
sunPct: {
tooltip: {
headerFormat: 'Sunshine percent
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value} %'
}
},
SolarRad: {
tooltip: {
headerFormat: 'Solar irradiation
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value} W/m²'
}
},
Humidity: {
tooltip: {
headerFormat: 'Relative humidity
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value} %'
}
},
WindBearing: {
tooltip: {
headerFormat: 'Wind direction
',
pointFormat : '{point.x:%e %b, %Y} {point.y}:00: {point.value} C'
/*
formatter: function () {
var coords = ["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];
return 'Wind direction
' +
Highcharts.dateFormat('%e %b, %Y', this.x) +
' ' + this.y + ' ' +
coords[Math.floor((this.point.value + 11.25) / 22.5) % 16] +
'';
}
*/
}
}
};