je suis en train de créer un graphique avec l'humidité mensuelle sur l'année en cours. sous forme de baragraphe j'ai voulu mettre l'indication au dessus et bien que je veuille être précis, je crois que la c'est un peu trop , j'arrive a des valeurs 10 chiffres après la virgules
http://www.meteo-canejan.fr/graphique/h ... -annee.php
Code : Tout sélectionner
<?php
// appel du script de connexion
require("mysql_connect.php");
// Rcupration des donnes en faisant la somme de t_out_moy en crant une variable AnneeMois et en groupant les donnes sur cette variable AnneeMois.
$sql = "SELECT tstamp, AVG(h_out_moy), substr(recdateTZ,1,6) AS AnneeMois FROM `MiniMaxidatavp2` GROUP BY AnneeMois";
$query = mysql_query($sql);
$i=0;
while ($list = mysql_fetch_assoc($query)) {
if (date("I",time())==0) {
$time[$i]=($list['tstamp']+7200)*1000;
}
else {
$time[$i]=($list['tstamp']+7200)*1000;
}
$h_out_moy[$i]=$list['AVG(h_out_moy)']*1;
$i++;
}
?>
<script type="text/javascript">
eval(<?php echo "'var time = ".json_encode($time)."'" ?>);
eval(<?php echo "'var h_out_moy = ".json_encode($h_out_moy)."'" ?>);
</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 Jarny (54)">
<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/html;charset=UTF-8" />
<title>Météo Canéjan</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script src="highstock/js/highstock.js"></script>
<script src="highstock/js//highcharts-more.js"></script>
<script src="highstock/js/modules/exporting.js"></script>
<script src="highstock/js/themes/grid.js"></script>
<link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.all.css">
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="jquery/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script src="jquery/development-bundle/demos/datepicker/jquery.ui.datepicker-fr.js"></script>
<link rel="stylesheet" href="jquery/development-bundle/demos/demos.css">
<script type="text/javascript" src="jquery/overlib.js"></script>
<script type="text/javascript" src="jquery/overlib_fade.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<style type ='text/css'>
</style> <!--<script src="../highstock/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 < 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: 'Réinitialiser le zoom',
resetZoomTitle: 'Réinitialiser le 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",
printChart: "Imprimer le graphique",
loading: "Chargement en cours...",
rangeSelectorFrom: "Du",
rangeSelectorTo: "Au"
}
});
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x',
alignTicks: false,
type: 'spline',
marginRight: 20,
marginBottom: 10,
marginTop: 35,
plotBorderColor: '#ff6691',
plotBorderWidth: 1,
borderColor: '#EBBA95',
borderWidth: 1,
plotBackgroundColor: '#F7F8E0',
backgroundColor: '#67C9F1',
},
navigator: {
top: 475
},
title: {
text: 'Humidité moyenne mensuelle',
style:{font: 'bold 14px sans-serif', color: '#000000'},
x: -20 //center
},
subtitle: {
text: 'Source : Météo Canéjan',
align: 'center',
x: 0
},
credits: {
text: ' Météo Canéjan',
href: 'http://meteo-canejan.fr'
},
rangeSelector : {
buttonTheme: { // styles for the buttons
width: 100,
fill: 'white',
stroke: 'none',
'stroke-width': 1,
r: 3,
// style: {
// color: '#0000A0',
// fontWeight: 'bold'
// },
// states: {
// hover: {
// fill: '#FF0000',
// style: {
// color: '#FFFF00'
// }
// },
// select: {
// fill: '#0000A0',
// style: {
// color: 'white'
// }
// }
// }
},
buttons: [{
enabled: false,
type: 'ytd',
count: 1,
text: 'Cette année'
}],
inputEnabled: false,
selected : 0,
},
legend: {
enabled: true,
align: 'top',
layout: 'horizontal',
// verticalAlign: 'top',
// y: 25,
x: 250,
shadow: true
},
xAxis: {
type: 'datetime',
labels: {
format: '{value: %b<br/>%Y}',
align: 'center',
}
},
yAxis: { // 1er yAxis (numero 0)
opposite:false,
showFirstLabel: true,
showLastLabel: true,
labels: {
formatter: function() {
return this.value +' %';
},
align : 'right',
x : -10,
y : 3,
style: {
color: '#FF0000'
}
},
title: {
text: 'Humidité en %',
style: {
color: '#000000'
}
}
},
tooltip: {
crosshairs: true,
borderColor: 'royalblue',
valueDecimals: 2,
shared: true,
backgroundColor: '#F5ECCE',
borderRadius: 5,
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%B %Y', this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Humidité': ' %',
}[this.point.series.name];
s = s + '<br/>' + '<span style="color:'+ point.series.color +'">' + point.series.name + '</span> : ' +Highcharts.numberFormat(point.y,1,","," ")
+ unit;
});
return s;
},
},
plotOptions: {
series: {
borderWidth: 0.5,
borderColor: 'black'
},
},
series: [{
name: 'Humidité',
id :'Humidité',
type: 'column',
pointPadding: 0,
pointWidth: 15,
dataLabels: {
enabled: true,
format: '{y} %',
color:'#000000',
x: 0,
y: 0
},
color: '#3F36F2',
data: comArr(h_out_moy),
},
]
},
function(chart) {// on complete
chart.renderer.image('http://www.meteo-canejan.fr/graphique/blason1.png', 10, 3, 43, 50)
.add();
});
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<table align="center">
<tr>
<td><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<div align="center"></div>
</td>
</tr>
</table>
</body>
</html>
Dominique