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 :
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
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
},
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
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
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.
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.