xAxis de 0h à 24h

[JP54]

Bonjour,
J'ai fait un graphique tout simple de la température sur 24 heures https://www.meteo-jarny.com/DY-graphiqu ... rature.php, sur mon graphique xAxis affiche les heures suivant la courbe de température, est-ce possible de forcé xAxis à commencer à 0h et terminer à 24h. Pour l'intervalle, peu importe, je le règlerais après.

[JP54]

J'ai une solution, je ne sais pas si c'est la meilleure, mais c'est la seule que j'ai trouvé en javascript.
J'ai ajouté

Code : Tout sélectionner

var today = new Date(); today.setHours(24,0,0,0);

qui me donne si j'ai bien compris le minuit du jour suivant. Dans xAxis j'ai ajouté

Code : Tout sélectionner

max: today

Donc le maxi de xAxis et minuit du jour suivant. Et comme le start de mon graphique c'est minuit de jour en cours xAxis affiche minuit du jour en cours jusque minuit du jour suivant.
https://www.meteo-jarny.com/DY-graphiqu ... ture-1.php
J'espère avoir des avis sur cette méthode.

[jturlier]

Salut Pascal,
ça fonctionne, c'est tout ce qu'il y a à savoir, de plus c'est très logique donc je ne vois pas trop ce que tu pourrais faire de mieux !

[JP54]

Bonjour Jean,
Je pensais qu'il serait peut-être possible de la faire avec le tstamp. Comme je veux que xAxis affiche les heures de 0h à 24h du jour en cours, on a le tstamp de départ (0 h du jour en cours), il est très facile d'avoir le tstamp de fin, le tstamp de départ + 86400 secondes. Mais je ne sais pas trop comment faire. Ma solution n'est certainement pas la meilleure, mais elle fonctionne.

[PascalWMR]

Salut Pascal

Oui c'est possible je l'utilise avec mes mini graph.
J'expliquerai tout ça ce Week-end quand je serai rentré.

A+
Pascal

[PascalWMR]

Bonjour à tous

Tout d'abord, Joyeux Noël.

Pascal, sur ma page d'accueil, j'ai un mini graphique pour les précipitations journalière qui fait exactement ce que tu veux.
Voici comment je procède.
Pour la partie PHP d'extraction des données

1. Changer le date_default_timezone_set pour le définir sur 'Europe/Paris' (pour ceux dont c'est le fuseau horaire bien sur)
   sinon les données extraites ne correspondront pas au données du jour.
2. Créer une variable $start avec la fonction PHP mktime(),
3. Créer une variable $stop en ajoutant 86400 à la variable $start,
4. Extraire les données voulues,
5. Créer une variable $debut égale à la 1ère donnée extraite ou encore en multipliant $start * 1000,
6. Créer une variable $fin égale à $stop * 1000,

Ensuite encoder le tout en Json avec JavaScript.

Code : Tout sélectionner

<?php
date_default_timezone_set('Europe/Paris');
setlocale(LC_ALL,"fr_FR.UTF-8");
// appel du script de connexion
require("mysqli_connect.php");
// On récupère le timestamp du 1er et du dernier enregistrement
$start = mktime(0 ,0 ,0 , date("n"), date("j"), date("Y"));
$stop = $start + 86400;
// Récupération des données sur les dernières 24 heures avec un tri ascendant sur le timestamp
$sql = 'SELECT tstamp, instantrain FROM data WHERE tstamp >='.$start.' AND tstamp <= '.$stop.' ORDER BY 1';  
$query = mysqli_query($conn,$sql);                   
$i=0;
while ($list = mysqli_fetch_assoc($query)) {      
	$dTime[$i]=$list['tstamp']*1000;
	$dPluie[$i]=$list['instantrain']*1;
	if($dPluie[$i] == 0){$dPluie[$i]=NULL;}
	$i++;
}
$debut=$dTime[0];
$fin=$stop*1000;
mysqli_free_result($query);
mysqli_close($conn);
?>

Code : Tout sélectionner

<script language="JavaScript" type="text/javascript">
	eval(<?php echo  "'var dTime =  ".json_encode($dTime)."'" ?>);
	eval(<?php echo  "'var dPluie =  ".json_encode($dPluie)."'" ?>);
	eval(<?php echo  "'var dDebut =  ".json_encode($debut)."'" ?>);
	eval(<?php echo  "'var dFin =  ".json_encode($fin)."'" ?>);
</script>

Le code présenté ici concerne les précipitations journalières.
Alors, petite astuce pour que les valeur 0 ne s'affichent pas sur le graphique Highcharts, lorsque la valeur est 0 alors on la force à avoir la valeur NULL. Ainsi, à condition d'avoir défini le paramètre connectNulls: de la rubrique series[()] sur false, les valeurs NULL ne s'affichent pas sur le graphique.

Les deux variables dDebut et dFin servent elle à définir le max et le min de xAxis.

Code : Tout sélectionner

	max: dFin,
	min: dDebut,

De cette façon, on forcera l'affichage des dates heures sur l'axe xAxis de 00h00 à 24h00 même s'il n’existe pas encore de données.

RAPPEL: Je précise, que j'utilise toujours les dernières librairies Highcharts et en particulier la rubrique time{}.
J'en ai parlé dans ce post viewtopic.php?f=9&t=276&p=2192#p2192


Voili voilu

A+
Pascal

[PascalWMR]

Salut Pascal

J'avais pas vu ton graph.
Effectivement ça fonctionne. C'est une autre façon d'y arriver et c'est le principal

a+
Pascal

[JP54]

Bonjour Pascal,
Merci pour tes explications. Je ne connaissais pas la petite astuce connectNulls: pour ne pas afficher les 0, j'ai appris quelques chose.
On a deux solutions pour un même résultat, les deux fonctionnent , c'est l'essentiel.