Mto 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 Highstock

Tutoriel MySQL - Highcharts

Un deuxième graphique avec la pluviométrie

Pour bien comprendre le procédé, on va créer un deuxième graphique sur la base du premier, mais avec d'autres données.
On va tracer un graphique avec la pluviométrie sur 10 jours.
Je vous montre uniquement les différences entre les deux graphiques.

On commence comme le précédent graphique, on ouvre un fichier vide et on ajoute inclus le fichier de connexion à la base de données, ainsi que les valeurs à tracer

<?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 xx heures

$stop=$list[0];
$start=$stop-(86400*10); // 86400=24 heures, donc pour 10 jours 86400*10

// Récupération des données sur 10 jours avec un tri ascendant sur le timestamp
$sql = "SELECT tstamp, instantrain, rain_hourly, last24hrrain 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;
} $instantrain[$i]=$list['instantrain']*1;
$rain_hourly[$i]=$list['rain_hourly']*1;
$last24hrrain[$i]=$list['last24hrrain']*1;
$i++;
}
?> <script type="text/javascript">
eval(<?php echo "'var time = ".json_encode($time)."'" ?>);
eval(<?php echo "'var instantrain = ".json_encode($instantrain)."'" ?>);
eval(<?php echo "'var rain_hourly = ".json_encode($rain_hourly)."'" ?>);
eval(<?php echo "'var last24hrrain = ".json_encode($last24hrrain)."'" ?>);
</script>
Donc, nous avons juste modifier le temps à tracer et les valeurs à reprendre dans la base de données.
instantrain, rain_hourly et last24hrrain
La partie html et l'appel des librairies ne change pas, dans la partie java de Highcharts, nous allons modifier :
Le titre du graphique
title: {
text: 'Pluviométrie sur les 10 derniers jours',
x: -20
},
Le titre de l'axe y
yAxis: {
title: {
text: 'Pluie (mm)'
},
 
Les unités dans le tooltip
	    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 = {
'Pluviométrie': ' mm',
'Cumul 1h': ' mm',
'Cumul 24h' : ' 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;
},
},
Et bien sur les séries
series: [ 
{
name: 'Pluviométrie',
zIndex: 1,
color: '#1e90ff',
type: 'area',
data: comArr(instantrain)
},
{
name: 'Cumul 1h',
color: '#ff0000',
data: comArr(rain_hourly)
},
{
name: 'Cumul 24h',
color: '#008000',
data: comArr(last24hrrain),
}
]
Le type de graphique a été modifié pour la pluviométrie, pour les autres valeurs nous avons une ligne "spline" et pour cette valeur nous allons la tracer sous forme d'air (area).
Votre graphique doit resembler à ceci.
Je ne mets pas le fichier complet en téléchargement, car pour pouvoir continuer à faire vos graphiques, vous devez être capable de réaliser celui-ci.

 

 

 

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°6
Mon deuxième graphique, la pluviométrie.