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.

 

 

 

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.