Code : Tout sélectionner
<?php
// appel du script de connexion
require("xxxxxxxxxxxxx.php");
// On récupère le timestamp du dernier enregistrement
$sql="select max(tstamp) from extremes";
$query=mysql_query($sql);
$list=mysql_fetch_array($query);
$sql = "SELECT tstamp, pluie_jour FROM extremes where tstamp ";
$query=mysql_query($sql);
$i=0;
while ($list = mysql_fetch_assoc($query)) {
if (date("I",time())==0) {
$dtime[$i]=($list['tstamp']+3600)*1000;
}
else {
$dtime[$i]=($list['tstamp']+7200)*1000;
}
$pluie_jour[$i]=$list['pluie_jour']*1;
$i++;
}
?>
<script type="text/javascript">
eval(<?php echo "'var dTime = ".json_encode($dtime)."'" ?>);
eval(<?php echo "'var pluie_jour = ".json_encode($pluie_jour)."'" ?>);
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META NAME="SUBJECT" CONTENT="Graphique Vantage Pro Davis">
<META NAME="DESCRIPTION" CONTENT="graphique dynamique">
<META NAME="KEYWORDS" CONTENT=" météo, pluie, vent, température, temperature, station, Vantage, Davis, Pro, Davis Vantage Pro,pression, UV, soleil,">
<META NAME="REVISIT-AFTER" CONTENT="5 DAYS">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=9" >
<META NAME="LANGUAGE" CONTENT="FR">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1">
<title>Graphique dynamique pluviométrie</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery.min.js"></script>
<script src="highstock5/code/highstock.js"></script>
<script src="highstock5/code/highcharts-more.js"></script>
<script src="highstock5/code/modules/exporting.js"></script>
<script src="highstock5/code/js/themes/grid.js"></script>
<!--<script src="highstock/code/js/themes/gray.js"></script>-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
function comArr(unitsArray) {
var outarr = [];
for (var i = 0; i < dTime.length; i++) {
outarr[i] = [dTime[i], unitsArray[i]];
}
return outarr;
}
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
},
lang: {
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
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",
printButtonTitle: "Imprimer le graphique",
loading: "Laden..."
}
});
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x',
alignTicks: true,
},
rangeSelector : {
buttonTheme: {
width:70
},
buttons: [{
type: 'month',
count: 3,
text: '3 mois'
}, {
type: 'month',
count: 6,
text: '6 mois'
},{
type: 'year',
count: 1,
text: '1 an'
},{
type: 'all',
count: 1,
text: 'Tous'
}],
inputEnabled: true,
selected : 3,
},
credits: {
text: 'Météo Aubépin',
href: 'http://www.meteo-aubepin.fr'
},
legend: {
enabled: true,
align: 'top',
layout: 'horizontal',
verticalAlign: 'top',
y: 0,
x: 20,
shadow: true
},
title: {
text: 'Pluviométrie - détail par jour',
style: {
color: '#000000',
fontWeight: 'bold'}
},
yAxis: [{
opposite: false,
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#000000'
}
},
title: {
text: 'Pluviométrie',
style: {
color: '#000000'
},
}
}],
tooltip: {
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('Le %e %B %Y', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Pluviométrie ': ' mm'
}[this.point.series.name];
s = s + '<br/>' + '<span style="color:'+ point.series.color +'"></span>'+ point.series.name + '<b>'+Highcharts.numberFormat(point.y,1,","," ")+'</b>'
+ unit;
});
return s;
},
shared: true
},
series: [{
name: 'Pluviométrie ',
type: 'column',
color: '#1e90ff',
data: comArr(pluie_jour),
dataGrouping: {
units: [[
'day',
],]
},
},
]
});
});
</script>
</head>
<body>
<div id="container" style="width: 790px; height: 500px; margin: 0 auto"></div>
</body>
</html>