Moyenne journalière

[jturlier]

Salut Domi,
je peux te garantir que la requête fonctionne, je viens de la tester (je n'avais testé que la mensuelle).
Ton problème vient du traitement que tu fais ensuite : tu veux afficher des données quotidiennes avec un pas mensuel !
Pour info, Moy_T n'a pas besoin d'être arrondi à 1 décimale car c'est déjà fait dans la table.
A nouveau, il n'est pas utile de faire un arrondi en PHP, tu peux tout faire dans ta requête quand c'est nécessaire.

$sql= "select ROUND(Moy_T,1) as Moy_T from noaa_jour where Annee=DATE_FORMAT(now(), '%Y');"; pour les températures quotidiennes de l'année.

Le substring n'est pas nécessaire non plus car le champ annee existe dans la table, je n'avais pas fait attention à ça dans mon précédent post, je n'avais fait qu'un copier/coller !
Si tu veux faire le même graphe que celui que tu as mis dans ton lien pour l'année, il vaut mieux utiliser noaa_annee car j'ai bien spécifié que les valeurs étaient des valeurs quotidiennes.Si tu veux les valeurs mensuelles à partir de noaa_jour, il faut rédiger ta requête ainsi, et là il faut bien faire l'arrondi :

$sql= "select ROUND(avg(Moy_T),1) as Moy_T from noaa_jour where Annee=DATE_FORMAT(now(), '%Y');";

[JP54]

J'ai pas mal avancé sur les modifications du graphique.
Pour le nom du mois dans le titre du graphique, j'ai créé une variable $mois1, comme le disais Pascal, petit problème avec les apostrophes, j'ai cherché et j'ai trouvé. Puis j'ai ajouté cette variable dans le titre après encodage json.

Code : Tout sélectionner

$mois1 = array("de janvier","de février","de mars","d\u0027avril","de mai","de juin","de juillet","d\u0027août","de septembre","d\u0027octobre","de novembre","de décembre");

Pour le tooltip, (Ca a été plus compliqué) c'est vrai que Pascal à raison pour le premier jour du mois c'est plus jolie d'écrire 1er que 1.
J'ai créé deux variables $date (pour le premier jour du mois) et $mois2 (pour le mois dans le tooltip) et j'avoue que j'ai fais un copier coller du tooltip de Pascal que j'ai modifié.

Code : Tout sélectionner

$date = array('01'=>'1er','02'=>'2','03'=>'3','04'=>'4','05'=>'5','06'=>'6','07'=>'7','08'=>'8','09'=>'9','10'=>'10','11'=>'11','12'=>'12','13'=>'13','14'=>'14','15'=>'15','16'=>'16','17'=>'17','18'=>'18','19'=>'19','20'=>'20','21'=>'21','22'=>'22','23'=>'23','24'=>'24','25'=>'25','26'=>'26','27'=>'27','28'=>'28','29'=>'29','30'=>'30','31'=>'31');

Code : Tout sélectionner

$mois2 = array("janvier","février","mars","avril","mai","juin","juillet","août","sepembre","octobre","novembre","décembre");

D'ailleurs, j'aimerais des explications sur ce tooltip car je n'y comprends pas grand chose et le site d'Highcharts il y a peu d'explications.

Code : Tout sélectionner

	 tooltip: {
			shared: true,
			useHTML: true,
			formatter: function() {
				var s = '<span style="font-size:10px">' + date[this.x]+' '+mois2[moisencours-1]+ '</span><table width="110px">';
				$.each(this.points, function(i, point) {
					s = s + '<tr><td style="color:'+ point.series.color + '">' + point.series.name + '</td><td style="text-align: center"><b>:</td>'
					s = s + '<td style="text-align: right"><b>' +Highcharts.numberFormat(point.y,1,","," ")+ '</b></td><td style="text-align : left; color:'+ point.series.color + '">°C</td></tr>'
				});
				s = s +'</table>'
				return s;
				},
			},			

Le plus gros morceau afficher le nombre de jours sur l'axe x par rapport au mois en cours. J'ai essayé comme le dis Pascal en passant par des tableaux multidimensionnel, mais sans succès. J'ai demandé l'aide de Dominique qui n'y pas arrivé non plus.
J'ai trouvé une autre solution qui à l'air de fonctionné.
J'ai trouvé un script qui me donne le nombre de jours du mois en cours que j'ai modifié.

Code : Tout sélectionner

$jourmois = cal_days_in_month(CAL_GREGORIAN, $moisencours, $anencours)-1;

encodage json

Code : Tout sélectionner

eval(<?php echo  "'var jourmois =  ".json_encode($jourmois)."'" ?>);

l'axe x

Code : Tout sélectionner

            xAxis: {
                categories: dLabelj,
				max:jourmois,
                labels: {
                    rotation: 0,
                    align: 'center',
                    style: {
                        fontSize: '8px',
                        fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },

Pour vérifié si mon script fonctionne, je modifie les variables $moisencours et $anencours.

Code : Tout sélectionner

$moisencours= date("m");
$anencours= date("Y");

https://www.meteo-jarny.com/DY-graphiqu ... inique.php

J'aimerais l'avis des experts sur toutes ses modifications et pour ne pas mourir bête la solution de l'axe x avec les tableaux multidimensionnel, je suis curieux et ça me travaille de ne pas avoir trouvé.
Encore merci à Pascal pour toutes les pistes et les indications, ça m'a bien aidé.

[PascalWMR]

Salut à tous

Bien JP les tableaux sont la solutions
Pour les apostrophes c'est une solution que tu as trouvé.
Ma solution est d'écrire les mois normalement en PHP mais la différence ce fait lors de l'encodage json. Voici la ligne de commande

Code : Tout sélectionner

eval(<?php echo  "'var tabmois1 =  ".json_encode($tabmois1, JSON_HEX_QUOT | JSON_HEX_APOS)."'" ?>);

Pour les 1er du mois, c'est la bonne solution.

Pour le nombre de jours à afficher en fonction du mois, je ne sait pas si ta solution fonctionne, mais je ne procède pas comme cela.
Je créer une variable avec mktime, ensuite je la teste avec la fonction PHP date("L") qui teste si l'année est bissextile ou non. La fonction retourne 1 si l'année est bissextile et 0 dans le cas contraire.
En fonction de cela, je défini un tableau. duquel j’extrais le nombre de jour à tracer ($nbjat)

Code : Tout sélectionner

$moisanselect=mktime(0, 0, 0, $moisencours, 1, $anencours);
if(date("L",$moisanselect)==1){
	$nbjm=array('01'=>31,'02'=>29,'03'=>31,'04'=>30,'05'=>31,'06'=>30,'07'=>31,'08'=>31,'09'=>30,'10'=>31,'11'=>30,'12'=>31);
}
else{$nbjm=array('01'=>31,'02'=>28,'03'=>31,'04'=>30,'05'=>31,'06'=>30,'07'=>31,'08'=>31,'09'=>30,'10'=>31,'11'=>30,'12'=>31);
}
$nbjat=$nbjm[$moisencours];

J'encode en json cette variable $nbjat puis comme tu l'a fait dans ton code Highchart, je défini la valeur max de l'xAxis.
Attention cependant, lorsque l'on encode cette variable, il faut lui retirer 1 (l'xAxis commence à 0 et non pas à 1)

Code : Tout sélectionner

eval(<?php echo  "'var nbjat =  ".json_encode($nbjat-1)."'" ?>);

Code : Tout sélectionner

            xAxis: {
                categories: dLabelj,
				max:nbjat,
                labels: {
                    rotation: 0,
                    align: 'center',
                    style: {
                        fontSize: '6px',
                        fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },

Pour le tooltip, ce sont des balises HTML (c'est un tableau) insérés dans du javascript et avec les mots clés propre à Highcharts.
Je m'explique

useHTML: true, : On dit à Highcharts que l'on va utiliser du HTML (sinon, ça marche pas)
formatter: function() { : c'est une fonction javaScript qui s'appelle formatter dont le but est de mettre en forme la bulle. Çà fait partie du code Highcharts.
var s = '<span style="font-size:10px">' + xlabel_j_ord[this.x]+' '+tabmois2[moisencours-1]+ '</span><table width="110px">';
On déclare ici la variable s (ça peut être n'importe quoi d'autre). En fait, cette variable s contient tout le code HTML du tooltip.
Dans le code on voit s = s+ ; C'est simplement pour scinder le code pour qu'il soit plus lisible. On peut très bien écrire tous le code d'un coup
Ensuite, <span></span> style <table> width sont des balises HTML
xlabel_j_ord[this.x] pointe dans le tableau xlabel_j_ord l'intitulé du jour (1er ou 2 ... 31). l'index est donné par [this.x]
Dans un tooltip normal on utilise dans le header {point.key}. [this.x] est son équivalent dans les tooltips utilisant le HTML
tabmois2[moisencours-1] pointe dans le tableau tabmois2 le nom du mois en cours
$.each(this.points, function(i, point) {
Ça, c'est du jQuery. C'est un itérateur qui remplace une boucle for next.
En clair, ça veut dire, pour chaque point y de chaque point x (il peut y avoir plusieurs points y pour chaque point x car il peut y avoir plusieurs courbes (température, windchill, etc..) ayant en commun le même point x), exécuter la fonction (de mise en forme du texte). C'est expliqué ici https://learn.jquery.com/using-jquery-core/iterating/

La couleur du point avant le nom de la série de données sont déterminé par les mot clés Highcharts point.serie.color et point.serie.name
A savoir, que sur un graphique en colonne avec un dégradé de couleur (comme c'est le cas ici sur le graphique de JP) le point de couleur avant le nom de la série n'apparait pas.
Highcharts.numberFormat(point.y,1,","," ") : Ceci est une fonction Highcharts pour limiter l'affichage de la valeur à 1 chiffre après la virgule.
Ensuite on retrouve les balises HTML <tr> (ligne), <td> (colonne) <b> (bold(gras))
Dans ce genre de tooltip, l'on peut utiliser toutes sortes de balise HTML. Regardez dans le code des rapports NOAA, je trace des lignes dans les tooltips.
Enfin dans les 2 dernières lignes, l'on retrouve la balse HTML de fermeture du tableau </table> et return s qui est le code JavaScript qui renvoie le résultat à afficher

Alors pourquoi utiliser ce type de tooltip bien plus compliqué que l'autre? Tout simplement parce-que c'est bien plus flexible que l'autre.
Dans ce genre de tooltip, l'on peut personnaliser la bulle à souhait, ce qui n'est pas le cas avec l'autre .
Avec un tooltip normal, il y a un headerFormat, un pointFormat et un footerFormat. Le footerFormat n'accepte que des chaines de caractères. on ne peut pas y passer de variables
Le headerFormat n'accepte que 3 variables point.key, series.name et series.color. Pour en utiliser d'autres, c'est la croix et la bannière et il faut utiliser d'autres options comme xDateFormat
Pour le pointFormat, c'est pareil. Le nombre de variables est très limité. Il accepte généreusement tooltip.valuePrefix et tooltip.valueSuffix

Voila, j'epère avoir été clair

A+
Pascal

[JP54]

Deux solutions pour l'axe x et pour les apostrophes, le principal c'est que ça fonctionne, ça prouve que l'on peut trouvé différences solutions à un problème.
J'ai trouvé le script pour l'axe x ici
http://www.lephpfacile.com/manuel-php/f ... -month.php

[muchistic]

Merci Pascal pour toutes ces explications, je ne dirais pas que c'est hyper clair pour moi mais j'y vois nettement mieux dans le tooltip grâce à tes explications.

bonne fin de WE à tous