Tuto "Rose des Vents" HighCharts

[helmain]

Les requêtes indiquées dans ce tuto sont faites sur une base MySql créée avec le logiciel Data2Sql de Jean TURLIER.
Si votre table ou vos rubriques ont été crées par un autre soft, il convient de changer les noms de la table et de la rubrique indiqués dans ce tutoriel.
*******************************************************************************************************************************************************************************
Préambule.

Contrairement aux graphiques en courbes, en colonnes ou circulaires, le graphique "Rose des Vents" ne s'appuie pas sur des suites de données séparées par une virgule pour être constitué, mais sur un tableau HTML tout à fait traditionnel et a besoin d'un plugin spécial : le plugin "data".

Recherche des données.

Avant toute chose, il faut commencer par déterminer la période couverte par le graphique. Deux méthodes sont possibles selon les périodes choisies.

• Cas des dernières 24 heures
Dans ce cas il faudra rechercher le dernier enregistrement contenu dans la base, cet élément déterminera la fin de la période, pour le trouver il suffit d'une simple requête sql :
Select max(tstamp) from data; (data = nom de la table, tstamp = nom de la rubrique)

Une fois le résultat obtenu, il faut le communique à php
$stop = $timestamp;

S'agissant des dernières 24 heures le point de départ de la période se détermine aisément.
Puisque nous connaissons le timestamp de fin, il suffit de lui retirer 24 heures soit 86400 secondes pour avoir le point de départ de la période :
$start = $stop -86400;

• Cas de la journée du 1er janvier 2014, mais on peut prendre n'importe laquelle.
Ici, c'est le timestamp du point de départ qui va être déterminé en premier, pour cela nous allons utiliser php :
$start = mktime(0,0,0,1,1,2014);

Puis à l'inverse du premier cas, déterminer le timestamp de fin en ajoutant 86400 secondes :
$stop = $start + 86400;

Les timestamp de début et de fin étant déterminés on peut maintenant rechercher dans la base toutes les données utiles à l'élaboration du graphique.
Cependant avant de commencer regardons un peu un graphique terminé. On peut voir qu'il est divisé d'une part en direction (N, NNE, NE, etc…) mais aussi en plages de vitesses de vent (< 5km, 5-15 km, etc…), autre information importante, les indications relatives aux différentes directions sont exprimées en %.

Pour déterminer un pourcentage, pour chaque plage de vitesse, il faut connaitre le nombre d'enregistrements qu'il y a eu durant ces 24 heures.
Pour cela on exécute la requête suivante dans la table :
Select count(*) from data
where tstamp > '$start'
and tstamp <= '$stop';

ATTENTION, il faut commencer au 1er enregistrement après le timestamp de départ.
En effet pour bien comprendre prenons le cas d'une journée entière allant de zéro heure à minuit.
Le premier enregistrement daté du jour est celui de 00:00, mais cet enregistrement concerne des données antérieures à 00:00, il ne faut donc pas le prendre, inversement l'enregistrement de 00:00 daté du lendemain doit être sélectionné car il est relatif à des données de la période choisie.

Et j'enregistre le résultat en php :
$nombre = $result;

Cette variable $nombre va être utilisée plus loin pour tous les calculs de pourcentage.

Maintenant commençons à rechercher le nombre d'enregistrements pour chaque direction, mais en démarrant par le premier palier c’est-à-dire les vents < 5km/hr :
Select winddir, count(*) from data
where tstamp > '$start'
and tstamp <= '$stop'
and windgust < 5
group by 1
order by 1;

Suivi d'une boucle php dans laquelle on trouve ce code :
If($dir[$i]==0) {$gustN1=round($gust[$i]/$nombre*100,2);}

Sachant que $dir = la direction et $gustN1= le nombre d'enregistrements <5km/h
On peut lire en français, si la direction est Nord, la variable $gustN1 est égale au pourcentage, arrondi à deux décimales, des enregistrements < 5km/h*100,

Pour la requête ci-dessus, voici le contenu total de la boucle, c’est-à-dire avec le test détaillé plus haut effectué pour chaque direction :
if ($dir[$i]==0) {$gustN1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==22) {$gustNNE1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==45) {$gustNE1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==68) {$gustENE1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==90) {$gustE1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==112) {$gustESE1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==135) {$gustSE1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==158) {$gustSSE1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==180) {$gustS1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==202) {$gustSSO1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==225){$gustSO1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==248){$gustOSO1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==270){$gustO1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==292){$gustONO1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==315){$gustNO1=round($gust[$i]/$nombre*100,2);}
else {$gustNNO1=round($gust[$i]/$nombre*100,2);}

Autre chose importante, dans une journée, peut-être l'avez-vous remarqué, il y a des directions desquelles le vent n'a pas soufflé. Si tel est le cas, la requête n'a donné aucun résultat pour ces directions. Or pour le graphique il est indispensable que toutes les directions soient présentes. Il faut donc rechercher ces directions et les forcer à 0.00.

C'est encore avec php que l'on fait cette recherche :
if(!isset($gustN1)) {$gustN1="0.00";}
Ce qui se traduit par : si $gustN1 n'est pas trouvé, alors la variable $gustN1 est égale à 0.00.
Comme précédemment, ce test est effectué pour toutes les directions :

if(!isset($gustN1)) {$gustN1="0.00";}
if(!isset($gustNNE1)) {$gustNNE1="0.00";}
if(!isset($gustNE1)) {$gustNE1="0.00";}
if(!isset($gustENE1)) {$gustENE1="0.00";}
if(!isset($gustE1)) {$gustE1="0.00";}
if(!isset($gustESE1)) {$gustESE1="0.00";}
if(!isset($gustSE1)) {$gustSE1="0.00";}
if(!isset($gustSSE1)) {$gustSSE1="0.00";}
if(!isset($gustS1)) {$gustS1="0.00";}
if(!isset($gustSSO1)) {$gustSSO1="0.00";}
if(!isset($gustSO1)) {$gustSO1="0.00";}
if(!isset($gustOSO1)) {$gustOSO1="0.00";}
if(!isset($gustO1)) {$gustO1="0.00";}
if(!isset($gustONO1)) {$gustONO1="0.00";}
if(!isset($gustNO1)) {$gustNO1="0.00";}
if(!isset($gustNNO1)) {$gustNNO1="0.00";}

Voila, c'est fini pour les vents <5 km/h

Mais la même chose à l'identique va être faite pour les vents compris entre 5 – 15 km/h
La requête :
SELECT winddir, count(*) FROM data
where tstamp > '$start'
and tstamp <= '$stop'
and windgust >= 5
and windgust < 16
group by 1
order by 1";

Le test dans la boucle :
if ($dir[$i]==0) {$gustN2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==22) {$gustNNE2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==45) {$gustNE2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==68) {$gustENE2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==90) {$gustE2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==112) {$gustESE2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==135) {$gustSE2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==158) {$gustSSE2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==180) {$gustS2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==202) {$gustSSO2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==225){$gustSO2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==248){$gustOSO2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==270){$gustO2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==292){$gustONO2=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==315){$gustNO2=round($gust[$i]/$nombre*100,2);}
else {$gustNNO2=round($gust[$i]/$nombre*100,2);}

Et le test en sortie de boucle :
if(!isset($gustN2)) {$gustN2="0.00";}
if(!isset($gustNNE2)) {$gustNNE2="0.00";}
if(!isset($gustNE2)) {$gustNE2="0.00";}
if(!isset($gustENE2)) {$gustENE2="0.00";}
if(!isset($gustE2)) {$gustE2="0.00";}
if(!isset($gustESE2)) {$gustESE2="0.00";}
if(!isset($gustSE2)) {$gustSE2="0.00";}
if(!isset($gustSSE2)) {$gustSSE2="0.00";}
if(!isset($gustS2)) {$gustS2="0.00";}
if(!isset($gustSSO2)) {$gustSSO2="0.00";}
if(!isset($gustSO2)) {$gustSO2="0.00";}
if(!isset($gustOSO2)) {$gustOSO2="0.00";}
if(!isset($gustO2)) {$gustO2="0.00";}
if(!isset($gustONO2)) {$gustONO2="0.00";}
if(!isset($gustNO2)) {$gustNO2="0.00";}
if(!isset($gustNNO2)) {$gustNNO2="0.00";}

Vous avez sans doute remarqué que pour les pourcentages, le nom de la variable php était composé des éléments suivants $-gust-direction-chiffre.
Ainsi, pour le Nord, pour les vents < 5km/h la variable s'appelait $gustN1, pour les vents compris 5-15 km/h elle s'appelle $gustN2, pour les vents compris entre 16 – 25 ce sera $gustN3 et ainsi de suite jusqu' à $gustN7.

Vous l'avez compris, les opérations faites pour les vents < 5km/h et 5–15 km/h sont à reproduire pour chaque plage jusqu' aux vents > 80 km/h

Le tableau HTML

Comme indiqué en préambule, HighCharts a besoin d'un tableau HTML pour construire le graphique "Rose de Vents".

Après la section php, continuons sur le même script avec une section HTML pour y construire notre tableau :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Rose des Vents</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="../highcharts/js/highcharts-more.js"></script>
<script type="text/javascript" src="../highcharts/js/modules/data.js"></script> ⇐ Absolument nécessaire
<script type="text/javascript" src="../highcharts/js/themes/grid.js"></script>
<!-- 1a) Optional: the exporting module -->
<script type="text/javascript" src="../highcharts/js/modules/exporting.js"></script>

<div id="container" style="width: 500px; height: 300px; margin: 0 auto"></div>

<div style="display:none">
<table id="freq" border="0" cellspacing="0" cellpadding="0">
<tr nowrap bgcolor="#CCCCFF">
<th colspan="9" class="hdr">Tableau des pourcentages</th>
</tr>
Ici les titres du tableau avec utilisation de la balise th, la class "freq" fait le lien avec HighCharts, vous pouvez mettre le nom que vous voulez, à la condition qu'il soit identique à celui défini dans HighCharts (moi j'ai laissé e même)
<tr nowrap bgcolor="#CCCCFF">
<th class="freq">Direction</th>
<th class="freq">< 5 km/h</th>
<th class="freq">5-15 km/h</th>
<th class="freq">16-25 km/h</th>
<th class="freq">26-35 km/h</th>
<th class="freq">36-50 km/h</th>
<th class="freq">51-80 km/h</th>
<th class="freq">> 80 km/h</th>
<th class="freq">Total</th>
</tr>
Maintenant affichons les pourcentages pour la direction NORD en insérant du code php dans le code HTML, et en faisant un total sur la dernière ligne.
Idem pour la class "data"
<tr nowrap>
<td class="dir">N</td>
<td class="data"><?php echo $gustN1;?></td>
<td class="data"><?php echo $gustN2;?></td>
<td class="data"><?php echo $gustN3;?></td>
<td class="data"><?php echo $gustN4;?></td>
<td class="data"><?php echo $gustN5;?></td>
<td class="data"><?php echo $gustN6;?></td>
<td class="data"><?php echo $gustN7;?></td>
<td class="data"><?php echo $gustN1+$gustN2+$gustN3+$gustN4+$gustN5+$gustN6+$gustN7;?></td>
</tr>
Même chose pour le direction NNE
<tr nowrap bgcolor="#DDDDDD"> Alternance bgcolor ="#DDDDDD" un bloc sur deux
<td class="dir">NNE</td>
<td class="data"><?php echo $gustNNE1;?></td>
<td class="data"><?php echo $gustNNE2;?></td>
<td class="data"><?php echo $gustNNE3;?></td>
<td class="data"><?php echo $gustNNE4;?></td>
<td class="data"><?php echo $gustNNE5;?></td>
<td class="data"><?php echo $gustNNE6;?></td>
<td class="data"><?php echo $gustNNE7;?></td>
<td class="data"><?php echo $gustNNE1+$gustNNE2+$gustNNE3+$gustNNE4+$gustNNE5+$gustNNE6+$gustNNE7;?></td>
</tr>
Jusqu'à :
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">NNO</td>
<td class="data"><?php echo $gustNNO1;?></td>
<td class="data"><?php echo $gustNNO2;?></td>
<td class="data"><?php echo $gustNNO3;?></td>
<td class="data"><?php echo $gustNNO4;?></td>
<td class="data"><?php echo $gustNNO5;?></td>
<td class="data"><?php echo $gustNNO6;?></td>
<td class="data"><?php echo $gustNNO7;?></td>
<td class="data"><?php echo $gustNNO1+$gustNNO2+$gustNNO3+$gustNNO4+$gustNNO5+$gustNNO6+$gustNNO7;?></td>
</tr>
</table>
</div>

C'est fait le tableau est terminé ! Maintenant il reste le javascript HighCharts
<script type="text/javascript">
$(function () {
// Parse the data from an inline table using the Highcharts Data plugin
Highcharts.data({
table: 'freq', ⇐ correspond à la class utilisée en début de tableau HTML
startRow: 1, ⇐ départ sens horaire, correspond à la position N
endRow: 17, ⇐ arrivée se chevauche sur N
endColumn: 8, ⇐ nombre de colonnes (7 plage de vitesses + 1 total)

complete: function (options) {

// Some further processing of the options
options.series.reverse(); // to get the stacking right


// Create the chart
window.chart = new Highcharts.Chart(Highcharts.merge(options, {

chart: {
renderTo: 'container',
polar: true,
type: 'column'
},
credits: { enabled: false },
title: {
text: '', ⇐ Place du titres
margin: 10
},

subtitle: {text: ''}, ⇐ Place du sous-titre
pane: {
size: '80%' ⇐ Taille
},

legend: {
reversed: true,
align: 'right', ⇐ emplacement de la légende
verticalAlign: 'top', ⇐ idem
y: 50, ⇐ idem
layout: 'vertical' ⇐ orientation
},

xAxis: {
tickmarkPlacement: 'on'
},

yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
title: {
text: 'Fréquence (%)', ⇐ Ne sert à rien, n'est pas affiché, même sur leur démo,
style:{color : '#919191',font: 'normal 9.2px sans-serif'}
},
labels: {
formatter: function () {
return this.value + '%';
}
}
},

tooltip: {
backgroundColor: {linearGradient:[0, 0, 0, 30], stops: [[0, '#D8D8D8'], [1, '#FFFFFF']]},
borderColor: "#222",
borderRadius: 3,
borderWidth: 0.5,
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
}),
);

}
});
});
</script>

[Météo Villarzel]

Merci Jean-Michel pour ce tutoriel complet et bien documenté.

A+

[Javier]

Il me semble un joli graphique.
Merci beaucoup pour le tutoriel


------------------------------------------------
Me parece un gráfico muy bonito.
Muchas gracias por el tutorial

[JP54]

Mieux que ça, je ne penses que puisse faire.
Bravo pour ce tuto très complet

[Yoann]

BOnjour,

J'avoue que j'ai un peu de mal même avec ce tuto, surtout avec la partie php

[helmain]

Bonjour Yoann,

A quel niveau le php te pose des problèmes ?
Il est quasiment écrit en totalité, sauf que comme il y a plusieurs vitesses je n'ai indiqué le détail que pour la première.
Les $start et $stop sont les mêmes à chaque fois, il n'y a donc pas lieu de les définir à nouveau.
La requête sql est également donnée, il suffit de modifier les valeurs des bornes pour chaque vitesse de vent.
Ensuite, c'est du html…
Si je peux t'aider, sans t'écrire le script, sinon tu n'avanceras jamais, tu me dis où ça coince pour toi.

[Javier]

Le graphique ci-dessous est également très bon.

http://www.boock.ch/meteo/graphiques_ph ... nddir2.php

Apparemment plus facile que la première, mais difficile pour un novice.

Aucune aide à créer?

[Météo Villarzel]

http://www.boock.ch/meteo/graphiques_ph ... nddir2.php

Apparemment plus facile que la première, mais difficile pour un novice.

Salut Javier,
C'est exactement le même graphique, sauf dans la partie Highcharts il faut changer le type du graphique

type: 'column'
à
type: 'area'

C'est tout

[Javier]

Uppppp

merci beaucoup

[Landéda]

Je commence à mettre le nez dans ce très beau tuto
Première question ( et sans doute pas la dernière)
Dans la boucle pour les (vents < 5km/hr) , on commence à dir=o et on termine à dir=338 donc on a fait le tour du cercle et on a envisagé tous les secteurs de N à NNO pourquoi la série des "elseif" ne se termine pas par un "else( .......)".
Ou alors, et c'est la suite de ma question, c'est à ça que sert la série des "if(!isset )" dont je crois avoir compris le rôle( pas de vent du tout) mais dont je ne sais pas bien quoi faire ?
Merci pour votre aide
Jean
Plus tard
Est ce que ça peut commencer comme ça:

<?php

require("mysql_connect.php");

$sql="select max(tstamp) from data";
$query=mysql_query($sql);
$list=mysql_fetch_array($query);

$stop=$list[0];
$start=$stop-(86400);

$sql = "Select count(*) from data where tstamp > '$start'and tstamp <= '$stop'";
$nombre = $result;
$sql = "Select winddir, count(*) from data where tstamp > '$start' and tstamp <= '$stop' and windgust < 5 group by 1 order by 1";

$i=0;
if ($dir[$i]==0) {$gustN1=round($gust[$i]/$nombre*100,2);}
elseif ($dir[$i]==22) {$gustNNE1=round($gust[$i]/$nombre*100,2);}
.....
elseif ($dir[$i]==338){$gustNNO1=round($gust[$i]/$nombre*100,2);}
else{(if(!isset($gustN1)) {$gustN1="0.00";}
.......
if(!isset($gustNNO1)) {$gustNNO1="0.00";};}
$i++;}
?>
Courage
Jean