script using the Database produced by Cumulus Mx
Posted: Mon 13 Jul 2015 12:52 pm
Hello everyone,
Here's a homemade script using the Database produced by Cumulus Mx
This script is an example used to the Station to view graphs of daily temperatures.
At your disposal for explanation and spread of other scripts (month, year) and other measures (relatively Pressure Humidity, Precipitation, Wind)
Hopefully by this contribution help you.
Currently I am looking to use the script and display the data of the month,
a selection is necessary because the significance of file data between the PC memory saturation ....
Best Regards
Michel said Courtil
Here's a homemade script using the Database produced by Cumulus Mx
Code: Select all
<?php
// on se connecte à la Base de données
require("mysqli_connect.php");
// on crée la requête SQL
$sql = "SELECT UNIX_TIMESTAMP(LogDateTime) AS tstamp, temp, wchill, dew, heatindex FROM Realtime ORDER BY LogDateTime ";
// on envoie la requête
$req = mysqli_query($conn,$sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysqli_error());
// Ajustage de l'heure en fonction de l'implantation du site
$i=0;
while ($list = mysqli_fetch_assoc($req)) {
if (date("I",time())==0) {
$time[$i]=($list['tstamp']+7200)*1000;
}
else {
$time[$i]=($list['tstamp']+7200)*1000;
}
$temp[$i]=$list['temp']*1;
$wchill[$i]=$list['wchill']*1;
$dew[$i]=$list['dew']*1;
$heatindex[$i]=$list['heatindex']*1;
$i++;
}
?>
<script type="text/javascript">
eval(<?php echo "'var time = ".json_encode($time)."'" ?>);
eval(<?php echo "'var temp = ".json_encode($temp)."'" ?>);
eval(<?php echo "'var wchill = ".json_encode($wchill)."'" ?>);
eval(<?php echo "'var dew = ".json_encode($dew)."'" ?>);
eval(<?php echo "'var heatindex = ".json_encode($heatindex)."'" ?>);
</script>
<script type="text/javascript">
function comArr(unitsArray) {
var outarr = [];
for (var i = 0; i < time.length; i++) {
outarr[i] = [time[i], unitsArray[i]];
}
return outarr;
}
$(function () {
var chart;
$(document).ready(function() {
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
Highcharts.setOptions({
lang: {
months: ["Janvier "," Février "," Mars "," Avril "," Mai "," Juin "," Juillet "," Août "," Septembre "," Octobre "," Novembre "," Décembre"],
weekdays: ["Dim "," Lun "," Mar "," Mer "," Jeu "," Ven "," Sam"],
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
decimalPoint: ',',
resetZoom: 'Reset zoom',
resetZoomTitle: 'Reset zoom à 1:1',
downloadPNG: "Télécharger au format PNG image",
downloadJPEG: "Télécharger au format JPEG image",
downloadPDF: "Télécharger au format PDF document",
downloadSVG: "Télécharger au format SVG vector image",
exportButtonTitle: "Exporter image ou document",
printChart: "Imprimer le graphique",
loading: "Charge..."
}
});
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 80,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 2,
zoomType: 'x',
alignTicks: true,
borderWidth: 2,
borderRadius: 10,
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(0, 176, 88)'],
[1, 'rgb(255, 255, 255)']
]
},
},
rangeSelector: {
allButtonsEnabled: true,
selected: 2,
buttonSpacing: 45,
buttons: Array,
buttons: [{
type: 'hour',
count: 1,
text: '1heure'
}, {
type: 'hour',
count: 12,
text: '12heures'
}, {
type: 'hour',
count: 24,
text: '1jour'
},{
type: 'day',
count: 2,
text: '2jours'
},
],
buttonTheme: { // Style des boutons.
fill: 'none',
stroke: 'none',
'stroke-width': 25,
r: 8,
style: {
color: '#039',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#039',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: 'gray',
inputBoxWidth: 120,
inputBoxHeight: 18,
inputStyle: {
color: '#039',
fontWeight: 'bold'
},
labelStyle: {
color: 'silver',
fontWeight: 'bold'
},
selected: 0
},
title: {
text: 'Températures Journalières',
x: -20 //center
},
// lieu de la Station Météo à compléter
subtitle: {
text: 'xxxxxxx',
x: -20
},
credits: {
text: '© Higcharts',
href: 'http://www.highcharts.com'
},
legend: {
enabled: true,
backgroundColor: 'lightBlue',
layout: 'horizontal',
floating: true,
align: 'left',
verticalAlign: 'top',
y: 380,
x:135,
labelFormatter: function () {
return this.name + ' (Cliquez pour effacer)';
}
},
xAxis: {
type: 'datetime',
startOnTick: false,
},
yAxis: [{
gridLineWidth: 0,
tickInterval:10,
min:0,
max:40,
labels: {
formatter: function() {
return this.value +'°';
},
style: {
color: 'black'
}
},
title: {
text: 'Température (°C)',
style: {
color: 'black'
}
},
opposite: false
},{
gridLineWidth: 0,
tickInterval:10,
min:0,
max:40,
labels: {
formatter: function() {
return this.value +'°';
},
style: {
color: 'black'
}
},
title: {
text: 'Température (°C)',
style: {
color: '#000000'
}
},
plotLines: [{
color: '#ff0000',
dashStyle: 'spline',
width: 2,
value: 0
},],
},],
tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
backgroundColor: '#edf1c8',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M H', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Point de rosée': '°C',
'Température': '°C',
'Facteur vent' : '°C',
'Humidex' : '°C'
}[this.point.series.name];
s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + '</span> : '
+Highcharts.numberFormat(point.y,1,","," ")
+ '°C';
});
return s;
},
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [
{
name: 'Température',
zIndex: 1,
color: 'red',
lineWidth: 1.0,
type: 'spline',
data: comArr(temp),
},
{
name: 'Point de rosée',
color: 'black',
lineWidth: 1.0,
type: 'spline',
data: comArr(dew),
},
{
name: 'Facteur vent',
color: 'blue',
dashStyle: 'LongDash',
lineWidth: 1.0,
data: comArr(wchill),
},
{
name: 'Humidex',
color: 'green',
dashStyle: 'ShortDash',
lineWidth: 1.0,
data: comArr(heatindex),
}
]
}, function(chart) {
chart.renderer.image('logos/blason1.png', 800, 13, 60, 70)
.add();
});
});
});
</script>
<div id="container" style="width: 1250px; height: 500px; margin: 0 auto"></div>
At your disposal for explanation and spread of other scripts (month, year) and other measures (relatively Pressure Humidity, Precipitation, Wind)
Hopefully by this contribution help you.
Currently I am looking to use the script and display the data of the month,
a selection is necessary because the significance of file data between the PC memory saturation ....
Best Regards
Michel said Courtil