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 HighCharts

Tutoriel MySQL - Highcharts

Récupération et mise en forme des données.

Nous allons commencer à créer notre graphique, mais avant il faut installer la librairie Highcharts.
Rendez-vous sur http://www.highcharts.com

HighCharts Cliquez sur Download, puis sur Highcharts 3.x
HighCharts

Décompresser l'archive dans un répertoire, par exemple highcharts3.

Vous aurez aussi besoin du fichier jquery.min.js,  si vous n'avez pas la librairie jquery
installée, vous pouvez télécharger juste ce fichier ici
Décompressez l'archive dans votre dossier de script ou directement dans le dossier de vos graphiques

 

Bon, on commence ce fameux graphique ?
Oui, mais il faut d'abord récupérer les données que l'on veut mettre dans ce graphique et le mettre en forme pour qu'elles soient compréhensibles pour Highcharts, nous allons utiliser le format Json.

Ouvrez un nouveau fichier avec votre éditeur de texte et nommez-le par exemple, 48h_temperature.php
     

C'est du php, donc on va placer notre code entre ces balises,  tapez :
<?php
?>

Maintenant on appel notre fichier de connexion à la base de données (celui que l'on a créé à la page précédente)
Pour rappel, les lignes qui commence par
// en vert dans ce tuto, sont des commentaires, vous êtes libre de les laisser ou pas.

<?php
// appel du script de connexion
require("mysql_connect.php");
?>

et voilà, on est connecté à notre base de données, simple, non !!! bon il faut maintenant reprendre les valeurs.

On commence par la date et l'heure, dans la table data on sélectionne le champs tstamp, c'est le temps en format Unix

<?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);

?>

 

Pour rappel, depuis PhpMyadmin

Mysql

On indique avec start et stop la plage de temps que l'on veut mettre dans le graphique
<?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*2);
//86400=24 heures donc 86400*2=48 heures
?>

Maintenant nous allons sélectionner les valeurs qui devront apparaitre dans notre graphique.
Avec la commande "SELECT" on sélectionne, la date unix, la température ext., le facteur vent, le point de rosée et l'humidex.
Avec "FROM" on indique que ces données proviennent de la table "data" puis, "where" tstamp détermine le point de départ et de fin (start-stop défini plus haut) et enfin on trie avec "ORDER"

<?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*2);
//86400=24 heures donc 86400*2=48 heures
// Récupération des données sur les dernières 48 heures avec un tri ascendant sur le timestamp
$sql = "SELECT tstamp, outdoortemperature, windchill, dewpoint, outdoorheatindex FROM data where tstamp >= '$start' and tstamp <= '$stop' ORDER BY 1";
$query=mysql_query($sql);
$i=0;

?>

Maintenant nous allons faire une boucle "while" pour lister nos valeurs.

C'est la fin de la partie php, on ferme la balise avec ?>

<?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*2);
//86400=24 heures donc 86400*2=48 heures
// Récupération des données sur les dernières 48 heures avec un tri ascendant sur le timestamp
$sql = "SELECT tstamp, outdoortemperature, windchill, dewpoint, outdoorheatindex 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;
$windchill[$i]=$list['windchill']*1;
$dewpoint[$i]=$list['dewpoint']*1;
$outdoorheatindex[$i]=$list['outdoorheatindex']*1;
$i++;
}

?>

Avant d'attaquer la partie Highcharts, nous devons encore mettre ces données en format Json
<script type="text/javascript"> 
eval(<?php echo "'var time = ".json_encode($time)."'" ?>);
eval(<?php echo "'var outdoortemperature = ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo "'var windchill = ".json_encode($windchill)."'" ?>);
eval(<?php echo "'var dewpoint = ".json_encode($dewpoint)."'" ?>);
eval(<?php echo "'var outdoorheatindex = ".json_encode($outdoorheatindex)."'" ?>);
</script>
Ce qui va vous donner un tableau du genre.

Il vous faut bien comprendre le processus expliqué ci-dessous, on récupère un champ de la base de données, ici "outdoortemperature" on fait une liste avec ces valeurs et à la fin on les transforme en Json.
Vous avez compris que, si maintenant vous voulez tracer un autre champ de la base de données, par exemple la vitesse du vent, vous remplacez le champ "outdoortemperature" par le champ "winspeed".

Dans la sélection "SELECT" ne gardez que les valeurs que vous voulez tracer, vous pouvez en mettre le nombre que vous voulez, il n'y a pas de limite, bien entendu, si vous voulez tracer 5 valeurs, vous devez aussi rajouter ces valeurs dans le while et en bas dans le json_encode.

PHP Mysql
 

 

 

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°3
Récupération et mise en forme des données.