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
http://apeldoornmeteo.nl/pws/