• modifier la couleur d'une ligne dans un graph

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

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+

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!!

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

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

Javier

bonjour a tous, bonjour Javier
oui, très intéressant

que la doc est complexe

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

modifier la couleur d'une ligne dans un graph

modifier la couleur d'une ligne dans un graph

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

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

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

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