Graphique rose des vents

Ce forum est dédié aux discussions qui concernent les graphiques réalisés avec la librairie Highcharts, Une question, un bug ?

Modérateurs : jturlier, Météo Villarzel

Répondre
Guillaume_67370
Messages : 3
Enregistré le : 12 sept. 2020, 15:09

Graphique rose des vents

Message par Guillaume_67370 » 13 sept. 2020, 13:38

Bonjour à tous,

Je viens d'arriver sur ce forum en connaissant déjà depuis longtemps le site de Meteo Villarzel.

J'ai un site internet de 2013 qui a été construit par un ami : Christian de Meteo Kogenheim qui a fait un énorme travail pour que le site puisse voir le jour assez rapidement.

Pour votre information je travaille avec les logiciels Cumulus et WsWin qui est en mode surveillance de fichier Weatherlink. Ma BDD a un pas de 10 minutes.

Certaines anomalies ont été constatées et je me suis mis en relation avec Pascal de Meteo Conflans en Jarnisy qui m'a bien aidé pour corriger un certain nombre de points et je le remercie encore !!!

Aujourd'hui j'ai deux points qui restent encore ouverts sur mes graphiques de rose des vents.

Je vais commencer par vous exposer mon premier problème sur ma page relevés en cours:
http://www.meteo-offenheim.fr/releves_en_cours.php

Le cumul des pourcentage de la rose des vents ne fait pas 100%, la raison, la programmation a été effectuée de telle sorte à ce que l'on part d’un diviseur fixe (144 pour 24 heures : come indiqué j'ai un pas de 10 minutes dans ma BDD). Mais ça maintenant c’est faux étant donné que je ne tiens plus compte des valeurs de rafales à zéro. Comment corriger ce premier point ?

Désolé mais comme vous pouvez le comprendre je suis amateur dans tout cela....

Vous trouverez ci dessous le script :

<!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=iso-8859-15">
<title>Météo Stutzheim-Offenheim / Graphique dynamique girouette sur 24 heures</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="../highcharts3/js/highcharts.js"></script>
<script type="text/javascript" src="../highcharts3/js/highcharts-more.js"></script>
<script type="text/javascript" src="../highcharts3/js/modules/data.js"></script>
<script type="text/javascript" src="../highcharts3/js/themes/grid.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jq ... ery-ui.css" rel="stylesheet"/>
<style type ='text/css'></style>
<script type="text/javascript">
$(function () {
// Parse the data from an inline table using the Highcharts Data plugin
Highcharts.data({
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 7,
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: 'area',
borderWidth: 2,
borderColor: '#8eb5d8',
borderRadius: 15,
marginTop: 8,
marginBottom: 30,
marginLeft: 8,
marginRight: 8,
backgroundColor: '#cce0ed'
},
title: {
text: ''
},
credits: { enabled: false },
pane: {
size: '85%'
},
legend: {
layout: 'horizontal',
align: 'center',
x: 10,
verticalAlign: 'bottom',
y: 10,
floating: true,
backgroundColor: false,
borderColor: null,
itemStyle: { color: 'black', font: 'normal 11px sans-serif', paddingBottom: '2px'}
},

xAxis: {
tickmarkPlacement: 'on'
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
title: {
text: 'Pourcentage (%)'
},
labels: {
formatter: function () {
return this.value + '%';
}
}
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
}));
}
});
});

<?php
// $nb_enreg = 143 ;
$nb_enreg = 144 ;
require_once ("../Includes/DBConn.php");
//memorisation de la date et de l'heure
// $date_actuelle = mktime(date("H"),(intval(date("i")*0.1))*10,0,date("m"),date("d"),date("Y")) + date("Z") ;
$date_actuelle = mktime(date("H"),(intval(date("i")*0.1))*10,0,date("m"),date("d"),date("Y")) ;
// connexion à la base mysql
$link = connectToDB() ;
// calcul l'heure du premier relevé
$date_recherche = date("Y-m-d", $date_actuelle - 86400) ;
$heure_recherche = date("H:i:s" , $date_actuelle - 86400) ;
$depart = strtotime($date_recherche . " " . $heure_recherche)*1000 ;
//lance le chargement des données
for ($i = 1 ; $i <= 16 ; $i++) {
$pos[$i] = 0 ;
}
for ($i = 0 ; $i <= $nb_enreg ; $i++) {
//calcul la date et l'heure à chercher
$date_recherche = date("Y-m-d", $date_actuelle - (86400-($i*600))) ;
$heure_recherche = date("H:i:s" , $date_actuelle - (86400-($i*600))) ;
//recherche dans la base
$strQuery = "select * from wswin where date='" . $date_recherche . "' and horaire='" . $heure_recherche . "' and rafale>'0'" ;
$result = mysqli_query($link,$strQuery) or die(mysql_error()) ;
//lecture des réponses
$trouve = 0 ;
if ($result) {
while($data = mysqli_fetch_array($result)) {
if (($data["direction"]>=349) || ($data["direction"]<=11)) {
$pos[1] += 1 ;
}
if (($data["direction"]>=12) && ($data["direction"]<=33)) {
$pos[2] += 1 ;
}
if (($data["direction"]>=34) && ($data["direction"]<=55)) {
$pos[3] += 1 ;
}
if (($data["direction"]>=56) && ($data["direction"]<=78)) {
$pos[4] += 1 ;
}
if (($data["direction"]>=79) && ($data["direction"]<=101)) {
$pos[5] += 1 ;
}
if (($data["direction"]>=102) && ($data["direction"]<=123)) {
$pos[6] += 1 ;
}
if (($data["direction"]>=124) && ($data["direction"]<=146)) {
$pos[7] += 1 ;
}
if (($data["direction"]>=147) && ($data["direction"]<=168)) {
$pos[8] += 1 ;
}
if (($data["direction"]>=169) && ($data["direction"]<=190)) {
$pos[9] += 1 ;
}
if (($data["direction"]>=191) && ($data["direction"]<=213)) {
$pos[10] += 1 ;
}
if (($data["direction"]>=214) && ($data["direction"]<=235)) {
$pos[11] += 1 ;
}
if (($data["direction"]>=236) && ($data["direction"]<=258)) {
$pos[12] += 1 ;
}
if (($data["direction"]>=259) && ($data["direction"]<=281)) {
$pos[13] += 1 ;
}
if (($data["direction"]>=282) && ($data["direction"]<=303)) {
$pos[14] += 1 ;
}
if (($data["direction"]>=304) && ($data["direction"]<=326)) {
$pos[15] += 1 ;
}
if (($data["direction"]>=327) && ($data["direction"]<=348)) {
$pos[16] += 1 ;
}
}
}
}
// calcul le total de positions
$total = 0 ;
for ($i = 1 ; $i <= 16 ; $i++) {
$total += $pos[$i] ;
}
// calcul le pourcentage de chaque position et l'intègre dans les données pour le graphique
$donnees[] = ($pos[1] * 100) / $total ;
for ($i = 16 ; $i >= 2 ; $i--) {
$donnees[] = ($pos[$i] * 100) / $total ;
}
//déconnexion de la base
mysqli_close($link) ;
?>
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 390px; height: 370px; 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">Table of Frequencies (percent)</th>
</tr>
<tr nowrap bgcolor="#CCCCFF">
<th class="freq">Direction</th>
<th class="freq">% de distribution du vent</th>
</tr>
<tr nowrap>
<td class="dir">N</td>
<td class="data"><?php echo $pos[1]; ?></td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">NNE</td>
<td class="data"><?php echo $pos[2]; ?></td>
</tr>
<tr nowrap>
<td class="dir">NE</td>
<td class="data"><?php echo $pos[3]; ?></td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">ENE</td>
<td class="data"><?php echo $pos[4]; ?></td>
</tr>
<tr nowrap>
<td class="dir">E</td>
<td class="data"><?php echo $pos[5]; ?></td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">ESE</td>
<td class="data"><?php echo $pos[6]; ?></td>
</tr>
<tr nowrap>
<td class="dir">SE</td>
<td class="data"><?php echo $pos[7]; ?></td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">SSE</td>
<td class="data"><?php echo $pos[8]; ?></td>
</tr>
<tr nowrap>
<td class="dir">S</td>
<td class="data"><?php echo $pos[9]; ?></td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">SSO</td>
<td class="data"><?php echo $pos[10]; ?></td>
</tr>
<tr nowrap>
<td class="dir">SO</td>
<td class="data"><?php echo $pos[11]; ?></td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">WSO</td>
<td class="data"><?php echo $pos[12]; ?></td>
</tr>
<tr nowrap>
<td class="dir">O</td>
<td class="data"><?php echo $pos[13]; ?></td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">ONO</td>
<td class="data"><?php echo $pos[14]; ?></td>
</tr>
<tr nowrap>
<td class="dir">NO</td>
<td class="data"><?php echo $pos[15]; ?></td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">NNO</td>
<td class="data"><?php echo $pos[16]; ?></td>
</tr>
</table>
</div>

</body>
</html>

D'avance merci
Guillaume
www.meteo-offenheim.fr

ma config : Cumulus 1.9.4, WsWin, Weatherlink, GraphWeather, Windows 7 Professionnal

Avatar du membre
jturlier
Administrateur du site
Messages : 393
Enregistré le : 10 déc. 2014, 10:20
Localisation : Sérignan 34410
Contact :

Re: Graphique rose des vents

Message par jturlier » 18 sept. 2020, 12:23

Bonjour Guillaume,
n'oublie pas que la rose des vents est utilisée de façon visuelle et qu'il ne doit y avoir que peu de différences pour l'affichage qu'on ait 95 ou 100%.
Le fait que certaines rafales soient à 0 est en général assez peu fréquent et que les roulements de anémomètre peuvent fort bien commencer à gripper. (ce n'est pas une situation exceptionnelle et c'est ce qui m'a décidé de passer à un anémomètre à ultrasons - cher mais pour moi cela en valait la peine).
Par contre, ton calcul des rafales est extrêmement lourd, et j'aurais plutôt suggéré qq chose comme ça. Je ne me suis pas particulièrement penché sur le reste de ton code, mais ce truc m'a vraiment interpelé.
while($data = mysqli_fetch_array($result)) {
$ix=(round($data / 22.5 , 0) %16);
$pos($ix)+=1;
}

Explications : $data / 22.5 va te donner une valeur numérique ou décimale entre 1 et 16.
round($data / 22.5 , 0) va supprimer les décimales et arrondir à l'entier inférieur ou supérieur (plus besoin de +11)
%16 est la fonction modulo qui te permet en cas de valeur retournée de $ix=16, de la transformer en valeur $ix=0

Si vraiment tu veux un % = 100 il va falloir que tu testes la valeur des rafales, et si elles sont à 0 faire le calcul du pourcentage avec ce nombre. Beaucoup de code pour pas grand chose (à mon avis) !!!!
Jean

Station :
VP2pro + anémomètre ultrasons et console Vue
Cumulus 1.9.4 + Cumulus2SQL + MySQL

Audio :
FR
PC :
W10 64bits migré
http://meteoserignan.ddns.net
Image

Guillaume_67370
Messages : 3
Enregistré le : 12 sept. 2020, 15:09

Re: Graphique rose des vents

Message par Guillaume_67370 » 18 sept. 2020, 18:26

Merci beaucoup pour ton retour Jean,
Lorsque je fais le cumul des pourcentages de la direction des vents il dépasse très largement les 100%
Normal ? Je vois que sur le graphique de Pascal la somme des différentes directions atteints 100%

Le code que tu me proposes de mettre c'est à la place de quoi? Je dois supprimer quelle partie et la remplacer par ta suggestion ?

N'hésite pas si tu y vois d'autres anomalies

Un grand merci pour ton aide !!!
Guillaume
www.meteo-offenheim.fr

ma config : Cumulus 1.9.4, WsWin, Weatherlink, GraphWeather, Windows 7 Professionnal

Avatar du membre
jturlier
Administrateur du site
Messages : 393
Enregistré le : 10 déc. 2014, 10:20
Localisation : Sérignan 34410
Contact :

Re: Graphique rose des vents

Message par jturlier » 18 sept. 2020, 20:54

Re-bonsoir,
comme je l'ai dit dans mon précédent message,ce code remplace celui des rafales qui est inclus dans le "while".
Si tu n'es pas à l'aise avec ça, conserve ce que tu as et laisse tomber cette modification.
Si ton cumul est faux à ce point, il est probable que tu as des erreurs dans tes tables, soit à l'enregistrement, soit à la lecture (plage de dates de récupération des données incorrectement définie). Comme c'est issu de WsWin, je ne peux pas t'aider pour trouver les anomalies (pas le temps et d'autres projets prioritaires en cours).
Jean

Avatar du membre
PascalWMR
Messages : 323
Enregistré le : 16 févr. 2014, 09:28
Localisation : CONFLANS EN JARNISY (F54800)
Contact :

Re: Graphique rose des vents

Message par PascalWMR » 19 sept. 2020, 11:25

Bonjour

Également, on peut simplement utiliser une requête SQL select count(*).
Comme dans le code que je t'ai envoyé par mail qui est celui-ci

Code : Tout sélectionner

<?php

// appel du script de connexion
require("../Scripts/PHP/mysqli_connect.php");                     
// On récupère le timestamp du dernier enregistrement
$sql="select max(tstamp) from data";
$query = mysqli_query($conn,$sql);                  
$list=mysqli_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 24 heures
$stop=$list[0];
$start=$stop-(86400);
mysqli_free_result($query);

// On initialise les directions
$provN=0; 	$dirN=0;
$provNNE=0; $dirNNE=0;
$provNE=0; 	$dirNE=0;
$provENE=0; $dirENE=0;
$provE=0; 	$dirE=0;
$provESE=0; $dirESE=0;
$provSE=0; 	$dirSE=0;
$provSSE=0;	$dirSSE=0;
$provS=0;	$dirS=0;
$provSSO=0;	$dirSSO=0;
$provSO=0;	$dirSO=0;
$provOSO=0;	$dirOSO=0;
$provO=0;	$dirO=0;
$provONO=0;	$dirONO=0;
$provNO=0;	$dirNO=0;
$provNNO=0;	$dirNNO=0;

// Pour la plage horaire déterminée, on compte le nombre total d'enregistrements avec vent non nul (wingust>0) et on ne selectionne que les enregistrements avec vent non nul (traitement des données plus rapide).
$sql = 'Select COUNT(*) as Total from data where tstamp > '.$start.' and tstamp <= '.$stop.' and windgust > 0';
$query = mysqli_query($conn,$sql);                   
$list=mysqli_fetch_array($query);
$nombre=$list['Total'];
mysqli_free_result($query);
$i=0;
$sql = 'SELECT winddir FROM data where tstamp >= '.$start.' and  tstamp <= '.$stop.' and windgust > 0';  
$query = mysqli_query($conn,$sql);                   
// On compte le nombre d'enregistrements pour chaque directions
while ($list = mysqli_fetch_assoc($query)) {      
	$dirvent[$i]=$list['winddir']*1;
		if (($dirvent[$i]==0)||($dirvent[$i]==360)) {$provN++ ;}
		elseif (($dirvent[$i]==22) || ($dirvent[$i]==22.5)) {$provNNE++ ;}
		elseif ($dirvent[$i]==45) {$provNE++ ;}
		elseif (($dirvent[$i]==67.5) || ($dirvent[$i]==68)) {$provENE++ ;}
		elseif ($dirvent[$i]==90) {$provE++ ;}
		elseif (($dirvent[$i]==112) || ($dirvent[$i]==112.5)) {$provESE++ ;}
		elseif ($dirvent[$i]==135) {$provSE++ ;}
		elseif (($dirvent[$i]==157.5) || ($dirvent[$i]==158)) {$provSSE++ ;}
		elseif ($dirvent[$i]==180) {$provS++ ;}
		elseif (($dirvent[$i]==202) || ($dirvent[$i]==202.5)) {$provSSO++ ;}
		elseif ($dirvent[$i]==225) {$provSO++ ;}
		elseif (($dirvent[$i]==247.5) || ($dirvent[$i]==248)) {$provOSO++ ;}
		elseif ($dirvent[$i]==270) {$provO++ ;}
		elseif (($dirvent[$i]==292) || ($dirvent[$i]==292.5)) {$provONO++ ;}
		elseif ($dirvent[$i]==315) {$provNO++ ;}
		elseif (($dirvent[$i]==337.5) || ($dirvent[$i]==338)) {$provNNO++ ;}
$i++;		
};
mysqli_free_result($query);
mysqli_close($conn);
// On calcule la répartition en pourcentage pour chaque directions avec 2 chiffres après la virgule.
$dirN=round($provN/$nombre*100,2);
$dirNNE=round($provNNE/$nombre*100,2);
$dirNE=round($provNE/$nombre*100,2);
$dirENE=round($provENE/$nombre*100,2);
$dirE=round($provE/$nombre*100,2);
$dirESE=round($provESE/$nombre*100,2);
$dirSE=round($provSE/$nombre*100,2);
$dirSSE=round($provSSE/$nombre*100,2);
$dirS=round($provS/$nombre*100,2);
$dirSSO=round($provSSO/$nombre*100,2);
$dirSO=round($provSO/$nombre*100,2);
$dirOSO=round($provOSO/$nombre*100,2);
$dirO=round($provO/$nombre*100,2);
$dirONO=round($provONO/$nombre*100,2);
$dirNO=round($provNO/$nombre*100,2);
$dirNNO=round($provNNO/$nombre*100,2);
?>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Provenance des vents dominants ces dernières 48 heures à Conflans en Jarnisy</title>
<meta name="description" content="Graphique dynamique de type radar de la provenance des vents dominants relevé par la station Davis Instrument Vantage PRO2 Plus de Météo Conflans en Jarnisy">
<meta name="robots" content="index,follow">
<meta name="category" content="education, information, weather, météo">
<meta http-equiv="Content-Language" content="fr" />
<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous">
</script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script> 
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>
</head>

<body background="../Images/PapierGris.jpg">
<table width="1060" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="820" align="center" valign="top">

<table id="freq" border="0" cellspacing="0" cellpadding="0" style="display:none">
<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é le même)-->
<tr nowrap bgcolor="#CCCCFF">
<th class="freq">Direction</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">Nord</td>
<td class="data"><?php echo $dirN;?></td>
</tr>
<!--Direction NNE-->
<tr nowrap bgcolor="#DDDDDD"> <!--Alternance bgcolor ="#DDDDDD" un bloc sur deux-->
<td class="dir">Nord-Nord-Est</td>
<td class="data"><?php echo $dirNNE;?></td> 
</tr>
<!--Direction NE-->
<tr nowrap > 
<td class="dir">Nord-Est</td>
<td class="data"><?php echo $dirNE;?></td> 
</tr>
<!--Direction ENE-->
<tr nowrap bgcolor="#DDDDDD"> <!--Alternance bgcolor ="#DDDDDD" un bloc sur deux-->
<td class="dir">Est-Nord-Est</td>
<td class="data"><?php echo $dirENE;?></td> 
</tr>
<!--Direction E-->
<tr nowrap > 
<td class="dir">Est</td>
<td class="data"><?php echo $dirE;?></td> 
</tr>
<!--Direction ESE-->
<tr nowrap bgcolor="#DDDDDD"> <!--Alternance bgcolor ="#DDDDDD" un bloc sur deux-->
<td class="dir">Est-Sud-Est</td>
<td class="data"><?php echo $dirESE;?></td> 
</tr>
<!--Direction SE-->
<tr nowrap > 
<td class="dir">Sud-Est</td>
<td class="data"><?php echo $dirSE;?></td> 
</tr>
<!--Direction SSE-->
<tr nowrap bgcolor="#DDDDDD"> <!--Alternance bgcolor ="#DDDDDD" un bloc sur deux-->
<td class="dir">Sud-Sud-Est</td>
<td class="data"><?php echo $dirSSE;?></td> 
</tr>
<!--Direction S-->
<tr nowrap > 
<td class="dir">Sud</td>
<td class="data"><?php echo $dirS;?></td> 
</tr>
<!--Direction SSO-->
<tr nowrap bgcolor="#DDDDDD"> <!--Alternance bgcolor ="#DDDDDD" un bloc sur deux-->
<td class="dir">Sud-Sud-Ouest</td>
<td class="data"><?php echo $dirSSO;?></td> 
</tr>
<!--Direction SO-->
<tr nowrap > 
<td class="dir">Sud-Ouest</td>
<td class="data"><?php echo $dirSO;?></td> 
</tr>
<!--Direction OSO-->
<tr nowrap bgcolor="#DDDDDD"> <!--Alternance bgcolor ="#DDDDDD" un bloc sur deux-->
<td class="dir">Ouest-Sud-Ouest</td>
<td class="data"><?php echo $dirOSO;?></td> 
</tr>
<!--Direction O-->
<tr nowrap > 
<td class="dir">Ouest</td>
<td class="data"><?php echo $dirO;?></td> 
</tr>
<!--Direction ONO-->
<tr nowrap bgcolor="#DDDDDD"> <!--Alternance bgcolor ="#DDDDDD" un bloc sur deux-->
<td class="dir">Ouest-Nord-Ouest</td>
<td class="data"><?php echo $dirONO;?></td> 
</tr>
<!--Direction NO-->
<tr nowrap > 
<td class="dir">Nord-Ouest</td>
<td class="data"><?php echo $dirNO;?></td> 
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">Nord-Nord-Ouest</td>
<td class="data"><?php echo $dirNNO;?></td> 
</tr>
</table>
<!--C'est fait le tableau est terminé ! Maintenant il reste le javascript HighCharts-->

      <!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">  
$(function () {
    // On analyse les données d'une table en ligne en utilisant le plugin Highcharts Data
    Highcharts.data({
        table: 'freq',
        startRow: 1,
        endRow: 17,
        endColumn: 7, // endColumn 8 (pour afficher le total)
        complete: function (options) {
            // Une option de traitement
            options.series.reverse(); // pour obtenir un empilage à droite
            // Création du graphique
            window.chart = new Highcharts.Chart(Highcharts.merge(options, {
                
                chart: {
                    renderTo: 'container',
					polar: true,
                    type: 'area',
					plotShadow: true,
					spacingLeft: 1,
					spacingRight: 5,
					marginTop: 70,
					marginLeft: 250,
					marginRight: 250,
					marginBottom: 25,
					borderRadius: 10,
					backgroundColor: {
						linearGradient: [0, 0, 0, 570],
						stops: [
							[0, '#EBEBEB'],
							[1, '#B2B2B2'],
						]
					},
					plotBorderColor: '#000000',
					plotBorderWidth: 1,
					plotBackgroundColor: '#006600',
					plotShadow: true,
                },
				title: {
					text: 'Répartition des vents dominant des dernières 24 heures',
					align: 'center',
					style: {
						font: 'italic bold 18px "Comic Sans MS", Verdana, sans-serif',
						color: '#0000A0',
						},
					x: 0 //center
				},
				subtitle: {
					text: 'Source : Météo Conflans en Jarnisy',
					align: 'center',
					x: 0
				},
				credits: {
				text: '© Météo Conflans en Jarnisy 2016',
				href: ''
				},
                pane: {
                    size: '87%'
                },
                
                legend: {
					enabled: false,
                    reversed: true,
					align: 'center',
					verticalAlign: 'center',
					x: 0,
					y: 500,
					borderColor: 'royalblue',
					borderWidth: 1,
					borderRadius: 5,
					backgroundColor: {
						linearGradient: [0, 0, 0, 20],
						stops: [
								[0, '#EBEBEB'],
								[1, '#B2B2B2'],
						]
					},				
					layout: 'horizontal',
					shadow: true,
				},
                xAxis: {
					lineColor: '#FFFF00',
           			labels: {
						style: {
							font: 'normal 9px sans-serif',
							color: '#FFFF00'
						}
					},
                    tickmarkPlacement: 'on'
                },
                    
                yAxis: {
                    min: 0,
                    endOnTick: false,
                    showLastLabel: true,
                    gridLineWidth: 1,
					minorGridLineWidth: 0,
					title: {
                        text: '',
                        style:{color : '#CCCCCC',font: 'normal 9.2px sans-serif'}
                    },
                    labels: {
                        style: {
							font: 'normal 9px sans-serif',
							color: '#FFFF00'
						},
						formatter: function () {
                            return this.value + ' %';
                        }
                    }
                },
                
                tooltip: {
				borderColor: '#4682b4',
				borderWidth: 2,
				backgroundColor: {
					linearGradient: {
						x1: 0, 
						y1: 0, 
						x2: 0, 
						y2: 1
					},
					stops: [
						[0, '#EBEBEB'],
						[1, '#B2B2B2'],
					]},
                valueSuffix: '%'                                           
                },    
                plotOptions: {
                    series: {
                        stacking: 'normal',
                        shadow: false,
                        groupPadding: 0,
                        pointPlacement: 'on',
						marker: {
							fillColor: '#00CCFF',
							lineWidth: 1,
							radius: 3,
							lineColor: null // inherit from series
                		},
                    }
                } 
            }),
                function(chart) {
					chart.renderer.text('Nombre d\'enregistrements avec vent non nul: '+ <?php echo $nombre;?> , 12, 550)
						.css({
						color: '#000000',
						font: 'italic 9.2px sans-serif'
						})
					.add();
    			});
            
        }
    });
});
</script>
<div align="center">
    	<span class="TitreDePage">Le vent</span>
</div>
<br>
<div id="container" style="width: 1060px; height: 570px; margin: 0; top: 0px;"></div><br>
    </td>
  </tr>
</table>
</body>
</html>
.

Tout y est.
Il faut juste remplacer le $start et $stop de mon script par tes dates heures d'extraction puisque tu n'utilise pas de tstamp

Le problème, je te le répète, c'est ton, WsWin qui sort des directions au degré près qui viennent on ne sait d'ou.

Sur les VP2, je te le répète, les directions du vent sur la rose des vents sont au nombre de 16 incrémentées de 22.5° en 22.5° de 0° à 360° ou 0 ou 360 indique le Nord

A+
Pascal
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Image

Guillaume_67370
Messages : 3
Enregistré le : 12 sept. 2020, 15:09

Re: Graphique rose des vents

Message par Guillaume_67370 » 21 sept. 2020, 16:10

Pour info : Mon problème a été corrigé très très facilement et je me retrouve avec un graphique même encore plus intéressant avec un affichage du pourcentage des valeurs nulles :) Bref génial je suis trop content, les graphiques sur mes pages statistiques vont aussi être corrigées.

Chez moi WsWin ne sort pas du tout des directions au degrès près je travaille avec Weatherlink en fichier de surveillance active sur Wswin donc tout est correct, j'ai seulement 16 directions de vent.

Oufff pas à recommencer tout mon site Pascal :)

Merci à vous tous tout de même pour votre aide !!!
Guillaume
www.meteo-offenheim.fr

ma config : Cumulus 1.9.4, WsWin, Weatherlink, GraphWeather, Windows 7 Professionnal

Répondre