Météo Villarzel Suisse

Impacts de foudre
Ephéméride - PDA Prévisions Alertes - Dangers Température Pression - Humidité Solaire et UV Rayonnement solaire Pluviométrie Vent Agriculture Chauffage Danger feux de forêt Info station Activité sismique Astronomie Divers / Liens / Explications Créations / GW / Tutoriels Evénement météo

Hors météo Broye Mon étang Consommation électrique Pompe à chaleur Panneaux solaire Serre

Livre d'Or

Forum Highcharts

Privé

Version pour mobile




Merci à nos donateurs:
M. Blanc
M. JavierMartinez
M. Viktor
M. Emanuel Roggen
M. Raphaël Chochon
M. José Luis Sanchez
M. Daniel Stuyck
M. Jean-Pierre Tonnele
M. Benoist Lerouge
M. Pierre Sabatier

M. Patrick Ollivier
M. Michel Le Viol
M. César López
M. Didier Mestric
M. Francesco Paolo Trapani
M. Charles Durand
M. Philippe Blanchard
M. Benjamin Leblic
Philippe Dupertuys
M. Jaume Mas Ferrer
M. Daniel Lavocat
M. Jean-Pierre Bernard
M.Gérard Egger
M. Jean-Claude Birade
M. Dominique Herraire
M. Eric Lemoine
M. Jean Gabriel Boulet
M. Olivier Bovel
M. Arnaud Rahier
M. Bruno Goyac
M. Jean Michel Vouillot
M. Sarah Cordeau
M. Jean-Pierre Grieu
M. Loic Roulin
M. Michel Beel
M. Dominique Gautheron
M. Hubert Verwilghen
Picardie WebMarketing
M. Patrick Puydebois
M. Thierry Hauuy
M. Francis Mirante


 

Visiteurs depuis le 07.01.2010

 

 

Visites du jour :

 

 

Service Cron Gratuit

 

Tutoriel HighCharts

Tutoriel MySQL - Highstock

Graphique avec axes multiples

 

Si vous voulez tracer un graphique avec plusieurs données différentes, par exemple température, humidité et pression, le graphique sera plus lisible si vous mettez plusieurs axes.

Comme par exemple ce graphique que nous allons créer

Vous connaissez déjà le début, vous constaterez juste que nous avons sélectionné 5 valeurs en plus de la date
<?php
// appel du script de connexion
require("mysql_connect.php");
// On récupère le timestamp du dernier enregistrement
$sql="select max(tstamp) from data";
$query=mysql_query($sql);
$list=mysql_fetch_array($query);

// On détermine le stop et le start de façon à récupérer dans la prochaine requête que les données des dernières 24 heures
$stop=$list[0];
$start=$stop-(86400);

// Récupération des données sur les dernières 24 heures avec un tri ascendant sur le timestamp
$sql = "SELECT tstamp, outdoortemperature, dewpoint, instantrain, sealevelpressure, outdoorhumidity 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) {
$dtime[$i]=($list['tstamp']+3600)*1000;
}
else {
$dtime[$i]=($list['tstamp']+7200)*1000;
}

$outdoortemperature[$i]=$list['outdoortemperature']*1; // Température extérieure
$outdoorhumidity[$i]=$list['outdoorhumidity']*1; // Humidité extérieure
$dewpoint[$i]=$list['dewpoint']*1; // Point de rosée
$instantrain[$i]=$list['instantrain']*1; // Pluie
$sealevelpressure[$i]=$list['sealevelpressure']*1; // Pression

$i++; } ?>

 
On encode les données en Json
<script type="text/javascript"> 
eval(<?php echo "'var dTime = ".json_encode($dtime)."'" ?>);
eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo "'var outdoorhumidity = ".json_encode($outdoorhumidity)."'" ?>);
eval(<?php echo "'var dewpoint = ".json_encode($dewpoint)."'" ?>);
eval(<?php echo "'var instantrain = ".json_encode($instantrain)."'" ?>);
eval(<?php echo "'var sealevelpressure = ".json_encode($sealevelpressure)."'" ?>);
</script>
On appelle les librairies
<script type="text/javascript" src="jquery.min.js"></script>           
<script type="text/javascript" src="../highcharts3/js/highcharts.js"></script>
<script type="text/javascript" src="../highcharts3/themes/grid.js"></script>
<script type="text/javascript" src="../highcharts3/js/modules/exporting.js"></script>
On commence le graphique, la base reste la même que pour les graphiques précédents
 <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 () {
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"],
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..."
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
alignTicks: false,
},

title: { text: 'Température,Pression relative, Humidié et Point de rosée des dernières 24 heures', x: -0 },

credits: { text: 'Météo Villarzel', href: 'http://www.boock.ch/meteo-villarzel.php' },
xAxis: {
type: 'datetime', },

Maitenant nous allons définir nos 4 axes Y, pourquoi 4 alors que nous avons 5 valeurs à tracer ?
Simplement par ce que la température et le point de rosée seront sur le même axe en °C

Donc, pour le premier axe 'Température et Point de rosée', nous avons
yAxis: [{ // 1er yAxis (numero 0)
gridLineWidth: 0,
labels: {formatter: function() {return this.value +'°C';
},
style: {
color: '#FF0000'
}
},
title: {
text: 'Température et Point de rosée',
style: {
color: '#FF0000'
}
},
},
Nous avons défini pour cet axe, une unité (°C) une couleur et un texte (title)
On fait la même chose pour l'axe de la pression
{ // 2ème yaxis (numero 1)
gridLineWidth: 0,
min:980,
title: {
text: 'Pression',
style: {
color: '#2E8B57'
}
},
labels: {
formatter: function() {
return this.value +' hPa';
},
style: {
color: '#2E8B57'
}
},
opposite: true
},
Vous avez remarqué qu'il y a deux nouvelles instructions,
min:980, ceci permet de fixer le minimum de l'échelle à 980 hPa dans cet exemple
oppsite: true cette instruction place l'échelle à l'opposé de celle par défaut, c'est-à-dire à droite du graphique
Maintenant l'axe pour l'humidité
{ // 3ème yaxis (numero 2)
gridLineWidth: 0,
tickInterval:10,
min:0,
max: 100,
title: {
text: 'Humidité',
style: {
color: '#0000FF'
}
},
labels: {
formatter: function() {
return this.value +' %';
},
style: {
color: '#0000FF'
}
},
opposite: true
},
On a fixé les valeurs de l'échelle de 0 à 100% et on l'a placée à droite.
Le dernier axe, les précipitations
{ // 4ème yaxis (numero 3)
gridLineWidth: 0,
min:0,
tickInterval:0.2,
title: {
text: 'Précipitations',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +' mm';
},
style: {
color: '#4572A7'
}
},

}],

Vous avez remarqué qu'il y a 4 axes, elles sont numérotées 0, 1, 2, et 3, c'est important pour définir dans les séries, quelles données sont affectées à quelle échelle.

}], bien fermer tous les crochets [ ], les parenthèses ( ) , les accolades { } et de ne pas oublier une virgule, sinon votre graphique ne d'afficheras pas.

Comme pour les autres graphiques, on défini le tooltip (infobulle)
tooltip: {
crosshairs:true,
shared: true,
borderColor: '#4b85b7',
valueDecimals: 1,
formatter: function() {
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M UTC', this.x) +'</b>';

$.each(this.points, function(i, point) {
var unit = {
'Pression': ' mb',
'Température': '°C',
'Humidité' : '%',
'Point de rosée' : '°C',
'Précipitations' : 'mm'
}[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;
},

},
On va désactiver les marqueurs dans les options générales du graphique, ceci va éviter de le faire pour chaque série.
On ajoute aussi pour le fun, un temps (animation) de 3 secondes pour le traçage des lignes du graphique, c'est en milli seconde.
plotOptions: {
series: {
marker: {
enabled: false
},animation: {
duration: 3000
}
}
},
Il reste à définir les séries, on commence avec la température, mais l'ordre n'a pas d'importance.
series: [ 
{
name: 'Température',
zIndex: 1,
yAxis: 0,
color: '#ff0000',
lineWidth: 3,
type: 'spline',
data: comArr(outdoortemperature),
},
On l'associe au premier axe, c'est-à-dire, 0, souvenez-vous ce que l'on a dit plus haut sur la numérotation des axes,
Idem pour la pression, c'est le deuxième axe, donc yAxis: 1
{
name: 'Pression',
color: '#2E8B57',
yAxis: 1,
type: 'spline',
data: comArr(sealevelpressure)
},
La série humidité sur l'axe 2
{
name: 'Humidité',
color: '#233aff',
yAxis: 2,
type: 'spline',
data: comArr(outdoorhumidity),
},
La série point de rosée sur l'axe 0, c'est la même échelle que la température
{
name: 'Point de rosée',
color: '#3399FF',
yAxis: 0,
zIndex: 2,
type: 'spline',
data: comArr(dewpoint),
},
La série précipitation sur l'axe 3, on change aussi le type du tracé, on ne vas pas afficher ces données en ligne mais en colonne (column)
{
name: 'Précipitations',
color: '#4572A7',
pointPadding: -0.2,
yAxis: 3,
type: 'column',
data: comArr(instantrain),
}
]
On termine la partie du graphique en fermant toutes les instructions et en fermant la balise script
        });
});
}); </script>
Si vous avez mis une balise head, on la ferme, on apelle le graphique dans le body avec les dimensions désirées et on ferme la balise html
</head>
<body> <div id="container" style="width: 750px; height: 400px; margin: 0 auto"></div> </body>
</html>
Voilà c'est terminé.
Téléchargez le fichier complet.
 
 

 

 

Untitled Document


Este tutorial también está disponible en español
This tutorial is also available in in English
Vous avez aimé ce tutoriel, il vous a rendu service,
alors dites-le-moi.
Ou aidez-moi à maintenir ce site en fonction.
  Untitled Document
Station Davis Vantage Pro 2 + station agricole - Weatherlink 6.0.0 - GraphWeather 3.0.15
© 2010-2013, Météo Villarzel - Webmaster Aubert Pierre-André

Attention, les données météo publiées sur ce site sont issues d'une station météo personnelle et ne sont données qu'à titre indicatif,
elles ne peuvent en aucun cas être utilisées pour garantir la protection des personnes ou de biens quelconques.
Stations amies

 

MySQL - Highcharts  page n°7
Un graphique avec plusieurs axes Y.