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
		Cliquez sur Download, puis sur Highcharts 3.x
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
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.

 

 

page 01 Chargement de la base de donnée page 02 Accèder à la base de données page 03 Récupération et mise en forme des données. page 04 Highcharts, mon premier graphique. page 05 Highcharts, mon premier graphique, récapitulatif. page 06 Mon deuxième graphique, la pluviométrie. page 07 Un graphique avec plusieurs axes Y page 08 Personnalisation avec l'api Highcharts page 09 Highstock Késako ? page 10 Le forum Highcharts 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.