Je développe en ce moment des graphiques dynamiques avec highcharts en local pour remplacer ceux de graphweather.
J'ai 7 pages pour les graphiques (température, humidité, point de rosée, pression, vent, pluie, tout les paramètres), sur la page est présent une liste déroulante qui permet de choisir l'intervalle de temps définie sur 24h, 7j, 30j et 365j, puis en dessous le graphique inséré dans une DIV qui est display en none ou block grâce au sélécteur.
J'inclus donc tous les fichiers highcharts pour 24h, 7j,30j et 365j avec un include, chaque fichier highcharts n'a juste en différence que le time, subtitle, title etc..., le problème c'est que quand j'inclus tout les fichiers php highcharts l'uns après l'autres, le graphique généré sera toujours celui qui est inclus en dernier peut importe la liste déroulante, je pense que le seul pris en compte pour faire le graphique est le dernier inclus.
y'a t il un moyen de prendre un seul fichier highcharts et mettre des variables pour subtitle title time etc... ? style faire juste un include comme cela :
Code : Tout sélectionner
<?php
$time='86400';
$title='Température';
$subtitle='Graphique sur 24H';
include('graph_dyn/temperature.php');
?>CODE d'une page d'un graphique (ici température) :
Code : Tout sélectionner
<?php
mysql_connect('localhost', 'user', 'pass');
mysql_select_db('highcharts');
?>
<script type="text/javascript" src="highcharts3/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="highcharts3/js/overlib.js"></script>
<script type="text/javascript" src="highcharts3/js/overlib_fade.js"></script>
<script type="text/javascript" src="highcharts3/js/highcharts.js"></script>
<script type="text/javascript" src="highcharts3/js/themes/grid.js"></script>
<script type="text/javascript" src="highcharts3/js/modules/exporting.js"></script>
<!-- SCRIPT DE LA LISTE DEROULANTE POUR CHOISIR LA DIV A AFFICHER OU NON !-->
<script type="text/javascript">
function change(period)
{
if (period == '0')
{
document.getElementById('ctn_temp_24').style.display='block';
}else{
document.getElementById('ctn_temp_24').style.display='none';
}
if (period == '1')
{
document.getElementById('ctn_temp_7').style.display='block';
}else{
document.getElementById('ctn_temp_7').style.display='none';
}
if (period == '2')
{
document.getElementById('ctn_temp_30').style.display='block';
}else{
document.getElementById('ctn_temp_30').style.display='none';
}
if (period == '3')
{
document.getElementById('ctn_temp_365').style.display='block';
}else{
document.getElementById('ctn_temp_365').style.display='none';
}
}
</script>
<!-- FIN DU SCRIPT !-->
<center>
<select name="period" id="period" onChange="change(this.value)">
<option value="0" selected>sur 24H</option>
<option value="1">sur 7 jours</option>
<option value="2">sur 30 jours</option>
<option value="3">sur 365 jours</option>
</select>
</center>
<?php include('graph_dyn/temperature_24h.php'); ?>
<?php include('graph_dyn/temperature_7j.php'); ?>
<?php include('graph_dyn/temperature_30j.php'); ?>
<?php include('graph_dyn/temperature_365j.php'); ?>
</head>
<body>
<div id="ctn_temp_24" style="width: 900px; height: 500px; margin: 0 auto"></div>
<div id="ctn_temp_7" style="display:none; width: 900px; height: 500px; margin: 0 auto"></div>
<div id="ctn_temp_30" style="display:none; width: 900px; height: 500px; margin: 0 auto"></div>
<div id="ctn_temp_365" style="display:none; width: 900px; height: 500px; margin: 0 auto"></div>
</div>Code : Tout sélectionner
<!-- Début Script graphique !-->
<?php
$sql="select max(tstamp) from data";
$query=mysql_query($sql);
$list=mysql_fetch_array($query);
$stop=$list[0];
$start=$stop-(86400*1); // 86400 = 24h
$sql = "SELECT tstamp, outdoortemperature FROM data where tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1";
$query=mysql_query($sql);
$i=0;
while ($list = mysql_fetch_assoc($query)) {
if (date("I",time())==0) {
$time[$i]=($list['tstamp']+3600)*1000;
}
else {
$time[$i]=($list['tstamp']+7200)*1000;
}
$outdoortemperature[$i]=$list['outdoortemperature']*1;
$i++;
}
?>
<script type="text/javascript">
eval(<?php echo "'var time = ".json_encode($time)."'" ?>);
eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>);
</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: 'Réinitialiser zoom',
resetZoomTitle: 'Réinitialiser 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: "Chargement..."
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'ctn_temp_24',
zoomType: 'x',
type: 'spline',
marginRight: 10,
marginBottom: 60,
plotBorderColor: '#346691',
plotBorderWidth: 1,
},
title: {
text: 'Température',
x: -20 //center
},
subtitle: {
text: 'Graphique des derniers 24H',
x: -20
},
xAxis: {
type: 'datetime',
startOnTick: false,
},
yAxis: {
title: {
text: 'Température (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#FF0000'
}]
},
tooltip: {
crosshairs:[true],
borderColor: '#4b85b7',
shared: true,
backgroundColor: '#edf1c8',
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M',
this.x) +'</b>';
$.each(this.points, function(i, point) {
var unit = {
'Température': '°C'
}[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: {
marker: {
enabled: false
}
}
},
series: [
{
name: 'Température',
zIndex: 1,
color: '#FF0000',
data: comArr(outdoortemperature)
}
]
});
});
});
</script>
<!-- Fin Script graphique !-->
Cordialement
