Graphique Rose des vents ...

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

Répondre
giniyann
Messages : 16
Enregistré le : 31 août 2016, 15:12

Graphique Rose des vents ...

Message par giniyann » 10 nov. 2016, 11:04

Bonjour,
Après avoir crée plusieurs graphiques dynamiques (température, pluie, ...) avec l'aide précieuse des tutoriels de Pierre-André, j'essaie à présent d'en faire un concernant l'orientation du vent ... et j'avoue que là c'est un peu plus compliqué
Voici ce à quoi j'arrive ! Que manque t'il ? Que signifie "Slice" ?
Image

Voici une partie du code:

Code : Tout sélectionner

      <!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript"> 
	  
    function comArr(unitsArray) { 
        var outarr = [];
        for (var i = 0; i < time.length; i++) {
         outarr[i] = [time[i], unitsArray[i]];
        }
      return outarr;
    } 
    
$(function () {
    var chart;        
         $(document).ready(function() { 
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);		 
         Highcharts.setOptions({
        lang: {
            months: ["Janvier "," Février "," Mars "," Avril "," Mai "," Juin "," Juillet "," Août "," Septembre "," Octobre "," Novembre "," Décembre"],
            weekdays: ["Dim "," Lun "," Mar "," Mer "," Jeu "," Ven "," Sam"],
			shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
            decimalPoint: ',',
            resetZoom: 'Reset zoom',
            resetZoomTitle: 'Reset zoom à 1:1',
            downloadPNG: "Télécharger au format PNG image",
            downloadJPEG: "Télécharger au format JPEG image",
            exportButtonTitle: "Exporter image ou document",
            printChart: "Imprimer le graphique",
            loading: "Laden..."
        }
      });
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
				zoomType: 'x',
                type: 'pie',
                marginRight: 10,
                marginBottom: 60,
				plotBorderColor: '#346691',
				plotBorderWidth: 1,
            },

            title: {
                text: 'Direction du vent des dernières 24 heures',
                x: -20 //center
            },
            subtitle: {
                text: 'Station Météo Aubépin - Altitude 880 m',
                x: -20
            },
			credits: {
            text: '© Météo Aubépin',
            href: 'http://www.meteo-aubepin.fr'
			},
		
            xAxis: {
                type: 'datetime',            
				        startOnTick: true,
            },
            yAxis: {
                title: {
                    text: 'Direction du vent (°C)'	
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#FF0000'
                }]
            },
	    tooltip: {
				crosshairs:[true],
				borderColor: '#4b85b7',
				shared: true,
				backgroundColor: '#edf1c8',
				formatter: function() {
                var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', this.x) +'</b>';
                $.each(this.points, function(i, point) {
					var unit = {
						'Direction du vent': ' °C'

                    }[this.point.series.name];
				    s = s + '<br>' + '<span style="color:'+ point.series.color +'">' + point.series.name + '</span> : '  
+Highcharts.numberFormat(point.y,1,","," ")
                       + unit;
                });
                return s;
            },
            },
		
	    plotOptions: {
				series: {
					marker: {
						enabled: false
					}
				}
			},
            series: [ 
				{
                name: 'Direction du vent',
				zIndex: 1,
                color: '#ff0000',
                data: comArr(vent_deg)  
                },
				 
              ]
			  
        });
      });
    });

   </script>
   </head>
   <body>
      <div id="container" style="width: 790px; height: 500px; margin: 0 auto"></div>
   </body>
</html>
Station Davis Instruments Vantage Pro2 - Windows 7 - Weatherlink IP - Graphweather - MySQL
Site: http://www.meteo-aubepin.fr

Image

Avatar du membre
jturlier
Administrateur du site
Messages : 393
Enregistré le : 10 déc. 2014, 10:20
Localisation : Sérignan 34410
Contact :

Re: Graphique Rose des vents ...

Message par jturlier » 10 nov. 2016, 13:10

Salut Yann,
slice c'est une tranche, par ex d'un gâteau
Par contre, si tu fais des tranches trop petites, ça rend ton graphique peu lisible
Jean

Station :
VP2pro + anémomètre ultrasons et console Vue
Cumulus 1.9.4 + Cumulus2SQL + MySQL

Audio :
FR
PC :
W10 64bits migré
http://meteoserignan.ddns.net
Image

Avatar du membre
PascalWMR
Messages : 323
Enregistré le : 16 févr. 2014, 09:28
Localisation : CONFLANS EN JARNISY (F54800)
Contact :

Re: Graphique Rose des vents ...

Message par PascalWMR » 13 nov. 2016, 12:27

Bonjour

As tu regardé cet excellent tuto Tuto "Rose des Vents" HighCharts.

Dans ton graphique, effectivement si tu prend toutes les données, ça sera illisible.

Le tuto en question donne ceci Répartition des vents dominants des dernières 48 heures.

A+
Pascal
Station VP2Plus, Windows 10 64 bits,WeatherLink 6.0.5, VP2SQL, Graphiques Dynamiques à partir d'une BDD MySQL
Météo Conflans-en-Jarnisy
Image

giniyann
Messages : 16
Enregistré le : 31 août 2016, 15:12

Re: Graphique Rose des vents ...

Message par giniyann » 14 nov. 2016, 12:41

Oui, j'ai vu ce tuto, mais j'ai quand même un peu de mal à comprendre !
Station Davis Instruments Vantage Pro2 - Windows 7 - Weatherlink IP - Graphweather - MySQL
Site: http://www.meteo-aubepin.fr

Image

Répondre