$(function() {
var year = "2015";
var page = ("json.php?year=" + year);
$.getJSON(page, function(json) {
console.log("success");
date = [];
temperatur = [];
luftdruck = [];
luftfeuchtigkeit = [];
taupunkt = [];
cputemp = [];
$.each(json, function(key, value) {
temperatur.push([value[0], value[1]]);
luftdruck.push([value[0], value[2]]);
luftfeuchtigkeit.push([value[0], value[3]]);
taupunkt.push([value[0], value[4]]);
cputemp.push([value[0], value[5]]);
});
Highcharts.setOptions({
global: {
useUTC: false
}
}); // Create a timer
var start = +new Date();
//****TEMPERATUR + TAUPUNKT****
$('#temperature').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
});
}
},
zoomType: 'x',
backgroundColor: "rgba(255, 255, 255, 0.7)"
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1hr'
}, {
type: 'hour',
count: 3,
text: '3hr'
}, {
type: 'hour',
count: 12,
text: '12hr'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 5,
text: '5d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'day',
count: 14,
text: '14d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'month',
count: 9,
text: '9m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 13
},
yAxis: {
title: {
text: 'Temperatur (C)'
}
},
title: {
text: '
Verlauf Temperatur/Taupunkt',
style: {
fontWeight: 'bold',
fontSize: '20px'
}
},
subtitle: {
},
series: [{
name: 'Temperatur',
color: '#0B2F3A',
data: temperatur,
tooltip: {
valueDecimals: 2,
valueSuffix: 'C'
},
dataLabels: {
enabled: true,
formatter: function() {
druck = this.y + ' °C';
return null;
}
}
}, {
name: 'Taupunkt',
color: '#0000B2',
data: taupunkt,
tooltip: {
valueDecimals: 2,
valueSuffix: 'C'
},
dataLabels: {
enabled: true,
formatter: function() {
druck = this.y + ' °C';
return null;
}
}
}]
});
//****LUFTDRUCK****
var minD = this.dataMin;
var maxD = this.dataMax;
// Create the chart
$('#pressure').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
});
}
},
zoomType: 'x',
backgroundColor: "rgba(255, 255, 255, 0.7)"
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1hr'
}, {
type: 'hour',
count: 3,
text: '3hr'
}, {
type: 'hour',
count: 12,
text: '12hr'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 5,
text: '5d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'day',
count: 14,
text: '14d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'month',
count: 9,
text: '9m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 13
},
yAxis: {
id: 'yAxisPres',
title: {
text: 'Luftdruck in hPa'
},
min: 960,
max: maxD,
minRange: 5
},
title: {
text: '
Verlauf Luftdruck',
style: {
fontWeight: 'bold',
fontSize: '20px'
}
},
series: [{
name: 'Luftdruck',
type: 'area',
fillColor: {
linearGradient: [0, 0, 0, 250],
stops: [
[0, "#00CED1"],
[1, "rgba(0,0,0,0)"],
]},
data: luftdruck,
tooltip: {
valueDecimals: 2,
valueSuffix: 'hPa'
},
dataLabels: {
enabled: true,
formatter: function() {
druck = this.y + ' hPa';
return null;
}
}
}]
});
//****LUFTFEUCHTIGKEIT****
$('#humidity').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
});
}
},
zoomType: 'x',
backgroundColor: "rgba(255, 255, 255, 0.7)"
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1hr'
}, {
type: 'hour',
count: 3,
text: '3hr'
}, {
type: 'hour',
count: 12,
text: '12hr'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 5,
text: '5d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'day',
count: 14,
text: '14d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'month',
count: 9,
text: '9m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 13
},
yAxis: {
title: {
text: 'Luftfeuchtigkeit (%)'
}
},
title: {
text: '
Verlauf Luftfeuchtigkeit',
style: {
fontWeight: 'bold',
fontSize: '20px'
}
},
subtitle: {
},
series: [{
name: 'Luftfeuchtigkeit',
type: 'area',
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, "#1E90FF"],
[1, "rgba(0,0,0,0)"]
]},
data: luftfeuchtigkeit,
tooltip: {
valueDecimals: 2,
valueSuffix: '%'
},
dataLabels: {
enabled: true,
formatter: function() {
feuchte = this.y + ' %';
return null;
}
}
}]
});
//****CPUTEMPERATUR****
$('#cputemp').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
});
}
},
zoomType: 'x',
backgroundColor: "rgba(255, 255, 255, 0.7)"
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1hr'
}, {
type: 'hour',
count: 3,
text: '3hr'
}, {
type: 'hour',
count: 12,
text: '12hr'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 5,
text: '5d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'day',
count: 14,
text: '14d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'month',
count: 9,
text: '9m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 13
},
yAxis: {
title: {
text: 'Temperature (C)'
}
},
title: {
text: '
Verlauf RPi CPU/SOC Temperatur',
style: {
fontWeight: 'bold',
fontSize: '20px'
}
},
subtitle: {
},
series: [{
name: 'CPUTemperature',
color: '#bb1c42',
data: cputemp,
tooltip: {
valueDecimals: 2,
valueSuffix: 'C'
}
}]
}, function(chart) {
// Last point in graph...
showLastPointTooltip(chart);
});
});
function showLastPointTooltip(objHighStockchart) {
// show tooltip for last point
var points = [];
if (objHighStockchart) {
for (var i = 0; i < objHighStockchart.series.length; i++)
points.push(objHighStockchart.series[i].points[objHighStockchart.series[i].points.length - 1]);
objHighStockchart.tooltip.refresh(points);
}
}
});