modifier la couleur d'une ligne dans un graph

Postez ici vos astuces pour en faire profiter la communauté

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

Répondre
alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

modifier la couleur d'une ligne dans un graph

Message par alain » 03 févr. 2015, 15:03

bonjour
j'ai fait le tour des sites météo et j'ai vue que dans les graphiques les lignes avaient toujours une couleur fixe.
Pour ma part j'avais besoin de tracer une ligne qui change de couleur en fonction de certaines condition.
le plus difficile pour moi a été de trouver une ruse pour non pas changer la totalité de la couleur de la ligne, mais que cette ligne affiches des couleurs différentes selon les conditions choisit.
En fait comme toujours c'est très simple, sauf que j'ai cherché plusieurs jours.
Aussi je vous donne la solution que j'ai trouvé, je suis débutant ce n'est certainement pas optimisé mais cela donne les bases.

L’idée que l'on pourrais prendre comme exemple: c'est je fait un graph des températures, et si elles deviennent négative, je change la couleur de la portion négative.
j’espère que vous allez comprendre car je n'ai pas le verbe facile, sinon, n’hésitez pas a éditer et corriger ;)

donc si l'on veut tracer une ligne en général on fait comme ceci (la c'est une ligne "WATT")

Code : Tout sélectionner

$i=0;
while ($list = mysqli_fetch_assoc($query)) { 
$WATT[$i]=$list['WATT']*1;
$i++;
}


puis on encode cette tigne au format Json

Code : Tout sélectionner

<script type="text/javascript"> 
eval(<?php echo  "'var WATT =  ".json_encode($WATT)."'" ?>);
</script>
puis il n'y a plus qu’a tracer cette ligne

Code : Tout sélectionner

series: [ 
		{
                name: 'Puissance',
		zIndex: 1,
                color: '#ff0000',
		dashStyle: 'Solid',
		 lineWidth: 1,
                data: comArr(WATT)  
                },	
           ]
Maintenant comment avoir que des portion d'une autre couleur, par exemple je trace ma température en bleu, mais chaque fois quelle passe sous zéro la ligne devient rouge.
Il faut prévoir deux lignes.
Une que l'on affecte a la température au dessus de zéro, l'autre que l'on affecte a la température au dessous de zéro
Il faut prévoir deux série ( série +0 et série -0)
mais pour pas que les lignes se chevauches ( la bleu sur la rouge) il faut passer a null la valeur de la sérié +0 si au meme moment il y a une information sur la série -0

en fait ça donne un peut ça:

Code : Tout sélectionner

10,  11, 12,  10  ,9,   8    ,7   ,6,   5   ,4    ,3,  2,   null,null,null,
null,null,null,null,null,null,null,null,null,null,null,null,-1  ,-2   ,-3
voici par l'exemple
pour ce faire il suffit juste d'ajouter une condition sur le champ voulu. Dans mon exemple je trace une ligne watt, et j' ai un champ tarif en cours (PTEC)
donc si je suis en HP je trace en rouge, des que mon champs (PTEC) passe en HC je trace en bleu

voila la modification faite dans le while ($list = mysqli_fetch_assoc($query))

Code : Tout sélectionner

$i=0;
while ($list = mysqli_fetch_assoc($query)) {
if (date("I",time())==0)
    {
    $time[$i]=($list['tpUnix'])*1000;
    }


    if ( $list["PTEC"] == "HP" )      // Test si heures pleines.
    {
    $WATTHP[$i]= ($list['WATT'])*1;
    $WATTHC[$i]= ($list = null);  // affecte des null pour l'encodage Json
    }
    else
    {
    $WATTHC[$i]= ($list['WATT'])*1; 
    $WATTHP[$i]= ($list = null);   // affecte des null pour l'encodage Json
    }
$i++;
puis on encode cette tigne au format Json

Code : Tout sélectionner

<script type="text/javascript"> 
eval(<?php echo  "'var time =  ".json_encode($time)."'" ?>);
eval(<?php echo  "'var WATTHP =  ".json_encode($WATTHP)."'" ?>);
eval(<?php echo  "'var WATTHC =  ".json_encode($WATTHC)."'" ?>);
</script>
puis il n'y a plus qu’a tracer cette ligne avec deux portions de couleurs possible

Code : Tout sélectionner

series: [ 
		{
                name: 'Puissance',
		zIndex: 1,
                color: '#ff0000',
		dashStyle: 'Solid',
		 lineWidth: 1,
                data: comArr(WATTHP)
                },
				
				{
                name: 'Puissance',
		color: '#2D1FC4',
		dashStyle: 'Solid',
		lineWidth: 1,
                data: comArr(WATTHC) 
                },
                
				
            ]
		
Voila si cela peut aider.
La visualisation provisoire du rendu est ici
je vous conseille de regarder sur plusieurs jours pour avoir une idée du rendu, car par exemple ce jour la jonction HC/HP se fait mal, mais le code n'est pas en cause je suis sur DB4FREE et parfois j'ai des trous dans ma base ( connexion impossible)
http://mapetitemeteo.esy.es/48h_teleinfo.php
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
Modifié en dernier par alain le 03 févr. 2015, 17:24, modifié 1 fois.
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

Avatar du membre
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: modifier la couleur d'une ligne dans un graph

Message par Météo Villarzel » 03 févr. 2015, 15:56

Salut Alain,
Merci, c'est très intéressant, par contre si c'est juste pour la température inférieure à 0, il y a beaucoup plus simple

series: [{
name: 'Temperature',
data: data,
negativeColor: '#0088FF',
color: '#ff4500',
}]

http://jsfiddle.net/gh/get/jquery/1.7.2 ... ive-color/

A+
Station Vantage Pro2+ avec station agricole - Weatherlink - GraphWeather 3.0.15b - Cumulus 1.9.4 - Windows 7/64
Graphique dynamique à partir d'une bd MySql - VP2SQL

Image

alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

Re: modifier la couleur d'une ligne dans un graph

Message par alain » 03 févr. 2015, 17:14

bonjour
par contre je ne trouve pas de bonne idée titre si il y meilleure idée pour adapter le titre, en fait c'est plus proche de : une ligne avec des portions de couleurs différentes: autant de couleurs que de conditions
Bah,pour la température c'est po grave!! :lol:
on va bien un jour trouver une utilisation de cette ruse ;)
l'essentiel c'est de retenir que Json accepte NULL et du coups Hicharts accepte faire des graph avec des trous
si ça tombe c'est implémenté dans Hicharts, mais bon sang que la doc est épaisse :(
tiens on peut l'utiliser pour tracer des pics de température sur son solaire (dégradation du glycol).
bonne journée a tous
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

Javier
Messages : 263
Enregistré le : 15 févr. 2014, 09:23
Localisation : San Sebastián, España
Contact :

Re: modifier la couleur d'une ligne dans un graph

Message par Javier » 08 juil. 2015, 21:24

Salut

Je pense que la solution idéale est la possibilité de Highcharts: zones

Code : Tout sélectionner

series: [
				{
				name: 'Record Highs',
				zones: [{
                value: 15,
                color: 'Orange'// Color hasta los 15 ºC
            }, {
                value: 30,
                color: 'Orange'// Color hasta los 30 ºC
            }, {
                color: 'Crimson'// Color por encima de 30 ºC
            }],
 				lineWidth: 1,
				pointPadding: -0.1,
        pointWidth: 30,
				yAxis: 0,
				type: 'line',
				data: (rechdata),
				},
Permet à la fois les lignes et les colonnes, créent toutes les conditions que nous voulons changer la ligne de couleur; Voici quelques exemples:

http://kocher.es/weatherdisplay/wxnoaatemps2-hc.php

http://kocher.es/weatherdisplay/climate ... a-hc-2.php

http://kocher.es/tendencia_temp.php

Espero que les guste :D

Javier
Davis Vantage Pro2 +, Windows 10, Windows 7 (64), Graphweather 3.0.15, Weatherlink 6.0.3, template Pierre-André, template Jachym
Image

alain
Messages : 101
Enregistré le : 21 nov. 2014, 20:23

Re: modifier la couleur d'une ligne dans un graph

Message par alain » 08 juil. 2015, 21:54

bonjour a tous, bonjour Javier
oui, très intéressant ;)
que la doc est complexe :cry:

en effet caché dans les méandre de la doc:
http://jsfiddle.net/gh/get/jquery/1.7.2 ... oneaxis-x/

http://jsfiddle.net/gh/get/jquery/1.7.2 ... nes-simple
Merci a toi Alain
station Orégon WMR 200
logiciel Xnet version 2012-03-17a et Graphweather V 3.0.15
windows XP SP3 sur vieux portable destiné a la météo
Windows7 sur mon portable, permet de tester les applications qui ne veulent plus de XP
http://mapetitemeteo.esy.es/

Répondre