Amelioration de mes Graphes [résolu]

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

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

Re: Amelioration de mes Graphes

Message par Météo Villarzel » 06 avr. 2015, 14:56

backgroundcolor change toute la couleur du graphique si tu ne spécifies pas une couleur pour la zone de traçage.
plotbackgroundcolor modifie uniquement la zone de traçage

Si tu vas sur ces liens et que tu changes des valeurs sur la zone JS à gauche, par exemple la couleur, backgroundColor: '#00000', et que tu fais RUN en haut à gauche, tu vois les modification sur le graphique.

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

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

Difficile de t'en dire plus, car ta page contient beaucoup de variable en JS et il y a peux-être une variable qui empêche les modifications.
Mets le code en entier, on verra peux-être ce qui empêche ces changements.

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

Avatar du membre
helmain
Administrateur du site
Messages : 54
Enregistré le : 09 févr. 2014, 12:44
Localisation : FRANCE - Lagny-sur-Marne (77)
Contact :

Re: Amelioration de mes Graphes

Message par helmain » 06 avr. 2015, 15:15

Bonjour b.gwen,

Pourquoi n'as-tu pas visité le site mentionné par Pierre-André ==> http://api.highcharts.com/highcharts
Tu y aurais trouvé une mine de renseignements !!
Selon ce que je comprends, tu veux modifier la couleur du fond de ton graphique.
Le fond, en anglais, c'est le "background", si tu recherches sur le site indiqué par Pierre-André tu vas trouver cette page : http://api.highcharts.com/highcharts#ch ... roundColor
Puis en cliquant sur le mot "Color" du pavé "backgroundColor: Color" à droite dans la page, tu vas te retrouver sur cette nouvelle page :
http://jsfiddle.net/gh/get/jquery/1.7.2 ... lor-color/
Là c'est très simple ton écran est divisé en deux dans le sens vertical. Le code à gauche et le résultat à droite.
Pour le moment, sur le graphique le fond est jaune. Si tu veux changer la couleur e celui-ci, il faut modifier la valeur du code couleur à la ligne 4 : backgroundColor: '#FCFFC5',
Si par exemple tu le veux de couleur rose pale il faut mettre le code #FFCCFF à la place #FCFFC5 et cliquer sur "Run" dans la barre de titre de la page, et aussitôt de façon dynamique la couleur du graphique est modifiée.
Mais plutôt que le code couleur tu aurais pu aussi indiquer 'pink' ou 'green' ou 'orange', ou n'importe quel nom figurant dans cette liste : http://www.toutes-les-couleurs.com/code ... r-html.php
Il te suffit de changer ce que tu veux et quand tu as trouvé ce qui te convient, de mettre la même chose dans le script de ton graphique.
Pour une autre partie de ton graphique, essaie de faire de la même manière.
Un conseil, cherche et essaie de trouver par toi même, tu retiendras mieux et apprendras beaucoup plus que si nous te donnons la solution tout de suite sans aucune recherche de ta part.

Bon courage !!
Jean-Michel
Station Vantage Pro2 + Soil/Leaf + Anémomètre déporté - Weatherlink 6.0.3 - Weather Display 10.37S build 84 - Cumulus 1.9.4 build 1099 - GraphWeather 3.0.28 - Windows 10/64 - VP2SQL + WDTU 1.2 pour Envoy8x - Hébergé par o2switch (MySql/PgSql)

Image

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Re: Amelioration de mes Graphes

Message par b.gwen » 06 avr. 2015, 15:16

Effectivement il doit y avoir une boulette dans mon code , j'ai aussi essayé de changer la couleur de la ligne du graph ligne 245 series: [] et la çà me plante tout le graph , il disparait ! dans quelle galère je suis encore parti !

Voila mon code en entier

Code : Tout sélectionner

  
      
         
      
      $(document).ready(function() {

        $.ajax({
          type: "GET",
          url: GetChartXml(),
          dataType: "xml",
          success: function(xml) {
            var series = []

            //define series
            $(xml).find("entry").each(function() {
               var seriesOptions;

             
              seriesOptions = {
                name: GetSerieName($(this).text()),
                yAxis: GetSerieYAxis($(this).text()),
		data: []

               }
              options.series.push(seriesOptions);

            });

            //populate with data
            $(xml).find("row").each(function() {
              var t = parseInt($(this).find("t").text()) * 1000

              $(this).find("v").each(function(index) {
                var v = parseFloat($(this).text())
                v = v || null
                if (v != null) {
                  options.series[index].data.push([t, v])
                };
              });
            });

            options.title.text = GetChartTitle();
            $.each(series, function(index) {
              options.series.push(series[index]);
            });

            //add sunrise and sunset
            options.xAxis.plotBands = []

            var nday= GetNumberOfDays();



            if(nday>0)
            for (var i = nday; i >= 0; i--) {
              var d = new Date();
              d.setHours(0,0,0,0);
              d.setDate(d.getDate()-i);
              var sunrise = d.getTime()+computeSunrise(dayOfYear(), true);
              var sunset = d.getTime()+computeSunrise(dayOfYear(), false);
              options.xAxis.plotBands.push({
                from: sunrise,
                to: sunset,
                color: '#000000'  
              });  
            };

            chart = new Highcharts.Chart(options);
          }
        });
      });


    </script>

 
</body>
</html>




Modifié en dernier par b.gwen le 11 avr. 2015, 20:53, modifié 2 fois.

Avatar du membre
helmain
Administrateur du site
Messages : 54
Enregistré le : 09 févr. 2014, 12:44
Localisation : FRANCE - Lagny-sur-Marne (77)
Contact :

Re: Amelioration de mes Graphes

Message par helmain » 06 avr. 2015, 15:17

Indique nous l'url pour voir ton graphique stp
Station Vantage Pro2 + Soil/Leaf + Anémomètre déporté - Weatherlink 6.0.3 - Weather Display 10.37S build 84 - Cumulus 1.9.4 build 1099 - GraphWeather 3.0.28 - Windows 10/64 - VP2SQL + WDTU 1.2 pour Envoy8x - Hébergé par o2switch (MySql/PgSql)

Image

Avatar du membre
helmain
Administrateur du site
Messages : 54
Enregistré le : 09 févr. 2014, 12:44
Localisation : FRANCE - Lagny-sur-Marne (77)
Contact :

Re: Amelioration de mes Graphes

Message par helmain » 06 avr. 2015, 15:29

Pascal à raison, modifie la valeur de plotBackgroundColor quand celle-ci est définie.
Celle-ci sur ton script est à '#000000', tâche de mettre une autre valeur pour voir, ca devrait marcher !
Station Vantage Pro2 + Soil/Leaf + Anémomètre déporté - Weatherlink 6.0.3 - Weather Display 10.37S build 84 - Cumulus 1.9.4 build 1099 - GraphWeather 3.0.28 - Windows 10/64 - VP2SQL + WDTU 1.2 pour Envoy8x - Hébergé par o2switch (MySql/PgSql)

Image

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Re: Amelioration de mes Graphes

Message par b.gwen » 06 avr. 2015, 15:30

Bonjour helmain , ça je ne peux pas car je travail en local .

Avatar du membre
helmain
Administrateur du site
Messages : 54
Enregistré le : 09 févr. 2014, 12:44
Localisation : FRANCE - Lagny-sur-Marne (77)
Contact :

Re: Amelioration de mes Graphes

Message par helmain » 06 avr. 2015, 15:37

b.gwen a écrit :Bonjour helmain , ça je ne peux pas car je travail en local .
T'es en local sur le forum aussi ?
Station Vantage Pro2 + Soil/Leaf + Anémomètre déporté - Weatherlink 6.0.3 - Weather Display 10.37S build 84 - Cumulus 1.9.4 build 1099 - GraphWeather 3.0.28 - Windows 10/64 - VP2SQL + WDTU 1.2 pour Envoy8x - Hébergé par o2switch (MySql/PgSql)

Image

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Re: Amelioration de mes Graphes

Message par b.gwen » 06 avr. 2015, 15:45

je ne suis pas en local sur le forum !! ma page html est sur un raspberry , mon raspberry n'est pas accessible de l’extérieur sur ce raspberry j'ai une sonde de température ambiante qui va me générer un graph et tout cela en local .
j'ai essayé de changer plotBackgroundColor: '#008000', ( vert) et ca ne fonctionne qu'a moitié sur le graph 3 H c'est toujours jaune sur le graph 24 jaune et vert !!


[img]Sans%20titre-4.png[/img]
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.

Avatar du membre
helmain
Administrateur du site
Messages : 54
Enregistré le : 09 févr. 2014, 12:44
Localisation : FRANCE - Lagny-sur-Marne (77)
Contact :

Re: Amelioration de mes Graphes

Message par helmain » 06 avr. 2015, 15:55

As-tu essayé dans ton script de remplacer tous les codes couleur '#FCFFC5' par '#008000' ??
Il me semble que pendant la nuit on est jaune et que le jour on est vert !!
Station Vantage Pro2 + Soil/Leaf + Anémomètre déporté - Weatherlink 6.0.3 - Weather Display 10.37S build 84 - Cumulus 1.9.4 build 1099 - GraphWeather 3.0.28 - Windows 10/64 - VP2SQL + WDTU 1.2 pour Envoy8x - Hébergé par o2switch (MySql/PgSql)

Image

b.gwen
Messages : 25
Enregistré le : 04 avr. 2015, 18:12

Re: Amelioration de mes Graphes

Message par b.gwen » 06 avr. 2015, 16:06

Trop fort helmain tu a trouver !!! tout en bas de mon script color: '#000000'

Code : Tout sélectionner

if(nday>0)
            for (var i = nday; i >= 0; i--) {
              var d = new Date();
              d.setHours(0,0,0,0);
              d.setDate(d.getDate()-i);
              var sunrise = d.getTime()+computeSunrise(dayOfYear(), true);
              var sunset = d.getTime()+computeSunrise(dayOfYear(), false);
              options.xAxis.plotBands.push({
                from: sunrise,
                to: sunset,
                color: '#000000'  
Maintenant comment changer la ligne du graph en rouge ?

Répondre