Toujours en quête d'amélioré mes graphiques, j'essaie d'adapté le script de Pascal pour comparé le nombre de jour de gel des mois de janvier aux normales avec les écarts pour ce graphique.
J'ai repris les explications de Pascal, j'ai modifié mon graphique et je pense ne pas être trop loin de la vérité, a moins que je me fasse des illusions.
Code : Tout sélectionner
<script type="text/javascript">
eval('var NBJG02 = [[2004,20],[2005,19],[2006,23],[2007,7],[2008,12],[2009,27],[2010,21],[2011,11]]');
eval('var NormaleMensuelle = [17.3,17.3,17.3,17.3,17.3,17.3,17.3,17.3]');
eval('var Ecart = [2.7,1.7,5.7,-10.3,-5.3,9.7,3.7,-6.3]');
</script>
J'ai bien les donnés, la normale et les écarts, mais j'ai une page blanche.
Donc j'ai un problème je ne sais pas trop à quel endroit, partie php sans doute, une virgule, une parenthèse, j'ai vérifié à priori c'est bon.
Code : Tout sélectionner
<?php
// appel du script de connexion
require("mysql_connect.php");
$sql = "SELECT substr(recdateTZ,1,4) AS Annee, sum(t_out_mini <= 0) AS NBJG FROM MiniMaxidata WHERE substr(recdateTZ,5,2)='01' GROUP BY 1";
$query = mysql_query($sql);
$i=0;
$NBJG02 = array();
while ($list = mysql_fetch_assoc($query)) {
$Annee[$i]=$list['Annee']*1;
$NBJG[$i]=$list['NBJG']*1;
if (date("m",$time[$i]/1000)==1) {$NormaleMensuelle[$i]=17.3;}
$NBJG02[] = array($Annee[$i],(float)$NBJG[$i]);
$Ecart[$i]=$NBJG[$i]-$NormaleMensuelle[$i];
$i++;
}
?>
<script type="text/javascript">
eval(<?php echo "'var NBJG02 = ".json_encode($NBJG02)."'" ?>);
eval(<?php echo "'var NormaleMensuelle = ".json_encode($NormaleMensuelle)."'" ?>);
eval(<?php echo "'var Ecart = ".json_encode($Ecart)."'" ?>);
</script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Météo Jarny (54)</title>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highcharts-more.src.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/themes/grid.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
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..."
}
});
$('#container').highcharts({
chart: {
renderTo: 'container',
zoomType: 'x',
alignTicks: true,
margin: [ 60, 30, 65, 65],
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(176, 176, 176)'],
[1, 'rgb(255, 255, 255)']
]
},
},
credits: {
text: '© Météo Jarny',
href: ''
},
subtitle: {
text: 'Source : Météo-Jarny',
align: 'center',
x: 0
},
legend: {
align: 'top',
enabled: true,
layout: 'horizontal',
x: 70,
// y: 100
shadow: true
},
title: {
text: 'Jours de gel des mois de janvier',
style: {
color: '#000000',
fontWeight: 'bold'},
},
xAxis: {
},
yAxis: [{ // 1er yAxis (numero 0)
gridLineWidth: 0,
lineColor: '#B70000',
lineWidth: 2,
tickColor: '#B70000',
tickWidth: 2,
labels: {
formatter: function() {
return this.value +' J';
},
style: {
color: '#B70000'
}
},
title: {
text: 'Nombre de jour de gel',
style: {
color: '#B70000'
}
},
plotLines: [{
value: 17.3,
width: 2,
color: '#ff0000',
dashStyle: 'shortdash',
width : 2,
zIndex: 3,
label: {
text: '------ Norme 1981-2010 Janvier 17.3 jours',
align: 'right',
x: -60,
y: 147,
style: {
color:'#ff0000'
}
}
}]
},
],
tooltip: {
backgroundColor: '#ffffff',
borderColor: '#000000',
crosshairs: true,
valueSuffix: ' J.'
},
series: [{
name: 'Nombe de jour de gel',
color: '#6e738b',
yAxis: 0,
type: 'column',
data: NBJG02,
},{
name: 'Ecart',
id : 'Ecart',
type: 'column',
color: {
linearGradient: { x1: 0, x2: 0, y1: 1, y1: 1.5 },
stops: [
[0, 'rgba(255, 0, 0, .9)'],
[1, 'rgba(255, 255, 0, .8)']
]
},
data: comArr(Ecart),
},{
name: 'Normales 1981-2010',
id : 'Normales',
type: 'spline',
color: '#FF0000',
lineWidth : 0,
marker : {
enabled : true,
symbol: 'circle',
radius : 3
},
data: comArr(NormaleMensuelle),
},
]
});
});
</script>
</head>
<body>
<div id="container" style="width: 600px; height: 300px; margin: 0"></div><br>
</body>
</html>
Bien sûr je continue à chercher, on ne s'est jamais...