fonction : Range selector

[courtil]

Bonjour à tous,

Après avoir introduit dans les Graphs dynamiques avec les conseils éclairés de P.A. Aubert
les fonctions :

- legend

- chart.renderer.image

je souhaiterai maintenant utiliser la fonction " Range selector" de façon à paginer les graphs .

j'ai bien utilisé les données de :

http://www.highcharts.com/stock/demo/data-grouping

Mais impossible de faire apparaitre la légende des boutons : jour , semaine, mois .......

Donc la fonction n''est pas en "fonction" Hi

Cette fonction reprend t'elle une ou plusieurs valeurs dans le graph (température , point de rosée ....)

Pouvez vous m'en dire un peu plus ?

Merci d'avance

Cordialement

Michel

P.S: comment faire apparaitre le terme RESOLU quand le problème posé a trouvé solution.

[Météo Villarzel]

je souhaiterai maintenant utiliser la fonction " Range selector" de façon à paginer les graphs .

j'ai bien utilisé les données de :

http://www.highcharts.com/stock/demo/data-grouping

Je ne comprend pas, tu parles de Range selector et tu regardes data-grouping (grouper les données) ?

Pour le range seclector
http://www.highcharts.com/docs/chart-co ... e-selector
http://api.highcharts.com/highstock#rangeSelector

Attention ne fonctionne qu'avec highstock

A+

[courtil]

Bonjour,

Merci cher Professeur d'avoir remis dans le droit chemin ce vieil autodidacte que je suis.

La leçon a porté ses fruits ....

Voici le site avec ses graphes dynamiques façon maison

http://lecourtilauxepines.eu/

En utilisant l'Api Highstocks la légende ne s'affiche pas ?
D'autre part impossible d'afficher plus de 2 courbes par graphe, bien que sur certain de ces graphes
les valeurs sont existantes et déclarées dans les séries .

A votre bon coeur pour une nouvelle information.

Cordialement

Michel

[PascalWMR]

Salut Michel

En utilisant l'Api Highstocks la légende ne s'affiche pas ?

Normal que tes légendes ne s'affiche pas.

Voici ton code

Code : Tout sélectionner

legend: {
            align: 'center',
            verticalAlign: 'center',
            x: -400,
            y: 10,
            backgroundColor: '#FCFFC5'
        },

En le regardant, on voit que tu met x: -400. Tu positionne donc la légende en dehors du graphique.

Il faut mettre, si tu veux que ta légende soit alignée horizontalement au centre du graphique, x: 0

D'autre part impossible d'afficher plus de 2 courbes par graphe, bien que sur certain de ces graphes
les valeurs sont existantes et déclarées dans les séries

Là, je suppose que tu veux parler du graphique http://www.lecourtilauxepines.eu/pluie_jour.php. C'est le seul que j'ai trouvé qui doit afficher plus de deux séries.
Revois ton code, corrige les erreurs, fait bien attention au virgules, parenthèse, etc etc.
A priori, tes données ne s'affichent pas car il manque des virgules dans les séries.

A+
Pascal

[courtil]

Bonjour Pascal,

Merci de ta réponse.

j'ai modifié legend sans succés :

Code : Tout sélectionner

								legend: {
            align: 'center',
            verticalAlign: 'center',
            x: 0,
            y: 10,
            backgroundColor: '#FCFFC5'
        },

revérifié mes séries RAS l'affichage me parait conforme

Je te mets ci_joint le script d'un graphe température

Code : Tout sélectionner

<?php
// appel du script de connexion
require("mysqli_connect.php");                     
// On récupère le timestamp du dernier enregistrement
$sql="select max(tstamp) from data";
$query=mysqli_query($conn,$sql);                  
$list=mysqli_fetch_array($query);     

// On détermine le stop et le start de façon à récupérer dans la prochaine requête que les données des dernières xx heures
$stop=$list[0];
$start=$stop-(86400*2);

// Récupération des données sur les dernières 48 heures avec un tri ascendant sur le timestamp
$sql = "SELECT tstamp, outdoortemperature, windchill, dewpoint, outdoorheatindex  FROM data where tstamp >= '$start' and  tstamp <= '$stop' ORDER BY 1";  
$query=mysqli_query($conn,$sql);                   
$i=0;
while ($list = mysqli_fetch_assoc($query)) {      
if (date("I",time())==0) { 
	$time[$i]=($list['tstamp'])*1000;
	} 
else {
	$time[$i]=($list['tstamp']+7200)*1000;
  } 

$outdoortemperature[$i]=$list['outdoortemperature']*1;
$windchill[$i]=$list['windchill']*1;	
$dewpoint[$i]=$list['dewpoint']*1;
$outdoorheatindex[$i]=$list['outdoorheatindex']*1;
$i++;
} 	
  ?>

<script type="text/javascript"> 
eval(<?php echo  "'var time =  ".json_encode($time)."'" ?>);
eval(<?php echo  "'var outdoortemperature =  ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo  "'var windchill =  ".json_encode($windchill)."'" ?>);
eval(<?php echo  "'var dewpoint =  ".json_encode($dewpoint)."'" ?>);
eval(<?php echo  "'var outdoorheatindex =  ".json_encode($outdoorheatindex)."'" ?>);  
</script>



      <!-- 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",
            downloadPDF: "Télécharger au format PDF document",
            downloadSVG: "Télécharger au format SVG vector image",
            exportButtonTitle: "Exporter image ou document",
            printChart: "Imprimer le graphique",
            loading: "Laden..."
        }
      });
	chart = new Highcharts.StockChart({
	    
 chart: {
		        renderTo: 'container',
				type: 'arearange',
                marginRight: 40,
                marginBottom: 60,
				plotBorderColor: '#346691',
				plotBorderWidth: 2,
				zoomType: 'x',
				alignTicks: true,
                backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(0, 176, 88)'],
                    [1, 'rgb(255, 255, 255)']
                ]
            },
		    },
		
      rangeSelector: {
	   allButtonsEnabled: true,
                selected: 2,
				buttonSpacing: 45,
				buttons: Array,
				buttons: [{
	type: 'hour',
	count: 1,
	text: '1heure'
}, {
	type: 'hour',
	count: 12,
	text: '12heures'
},	{
	type: 'hour',
	count: 24,
	text: '1jour'
},{
	type: 'day',
	count: 2,
	text: '2jours'
}, 
],
				
            buttonTheme: { // styles for the buttons
                fill: 'none',
                stroke: 'none',
                'stroke-width': 25,
                r: 8,
                style: {
                    color: '#039',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                    },
                    select: {
                        fill: '#039',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },
            inputBoxBorderColor: 'gray',
            inputBoxWidth: 120,
            inputBoxHeight: 18,
            inputStyle: {
                color: '#039',
                fontWeight: 'bold'
            },
            labelStyle: {
                color: 'silver',
                fontWeight: 'bold'
            },
            selected: 0
        },

            title: {
                text: 'Températures Journalières',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: Le Courtil aux Epines',
                x: -20
            },
			credits: {
            text: '© Météo Villarzel',
            href: 'http://www.boock.ch/meteo-villarzel.php'
			},
								legend: {
            align: 'center',
            verticalAlign: 'center',
            x: 0,
            y: 10,
            backgroundColor: '#FCFFC5'
        },
			
		
            xAxis: {
                type: 'datetime',            
				        startOnTick: false,
            },
            yAxis: {
                title: {
                    text: 'Température (°C)'	
                },
               			plotLines: [{
                color: '#ff0000',
				dashStyle: 'spline',
                width: 2,
                value: 0
            }]
            },
	    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 = {
                    'Point de rosée': ' °C',
                    'Température': ' °C',
					'Facteur vent' : '°C',
					'Humidex' : '°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: 'Température',
				zIndex: 1,
                color: '#ff0000',
				lineWidth: 0.7,
				type: 'spline',
                data: comArr(outdoortemperature)  
                },
				{
                name: 'Point de rosée',
                color: '#3399FF',
				lineWidth: 0.7,
				type: 'spline',
                data: comArr(dewpoint)  
                },
				{
                name: 'Facteur vent',
                color: '#40e0d0',
				dashStyle: 'LongDash',
				lineWidth: 0.7,
                data: comArr(windchill),
                },
				{
                name: 'Humidex',
                color: '#bd005c',
				dashStyle: 'ShortDash',
				lineWidth: 0.7,
                data: comArr(outdoorheatindex),
                }
              ]
			  }, function(chart) { // on complete
             	
             chart.renderer.image('logos/blason1.png', 800, 13, 60, 70)
            	.add();
        });
      });
    });

   </script>
 
      <div id="container" style="width: 1250px; height: 500px; margin: 0 auto"></div>

si tu en as le temps donne moi ton avis , je vérifierai les autres par la suite,

donne moi ton avis sur la sélection du timestamp

Merci pour tout

Cordialement

Michel

[Météo Villarzel]

Salut,
tu dois activer la légende

legend: {
enabled: true,
align: 'center',
verticalAlign: 'center',
x: 0,
y: 10,
backgroundColor: '#FCFFC5'
},

résultat
http://www.boock.ch/meteo/graphiques_php/aaaa.php

A+

[courtil]

Re,

OK c'est bon l'essai est transformé localement

Je valide

Merci

Cordialement

Michel

[PascalWMR]

Re Michel

si tu en as le temps donne moi ton avis , je vérifierai les autres par la suite,

donne moi ton avis sur la sélection du timestamp

A mon avis, tu devrais reprendre depuis le tout début et pas à pas le tuto de Pierre-André.http://www.boock.ch/meteo/tuto_mysql_hi ... rts_01.php
, car le graphique que tu veux faire, hormis le design, est exactement celui que Pierre-André explique dans son tuto.

Dans ton code tu a mélangé un peut de tout.
Il ne peut pas fonctionner, car tu n'a pas déclaré les librairies
Tu confond areaspline et arearange.
Arearange c'est plus compliqué et j'ai mis du temps avant de comprendre.
Et je confirme il manque des virgules dans les séries.

Par contre je ne comprend pas ce que tu veux à propos du timestamp.

A+
Pascal

[courtil]

Bonjour Pascal,

Merci de ta réponse.

Comme expliqué à Javier sur la structure de mes scripts

Pour me faciliter la tache (âgé et autodidacte) j'ai décomposé
chaque page de données en 4 parties :

la première (appelée lors de la consultation sur le site) Exemple : temperature_jour.php comprend
entre autre le menu , les librairies et l'appel des trois scripts suivant:

jour_temperature_inc.php : script d'affichage et de traduction des données de la Bd en graphes.

jour_temperature_txt.php : script d'appel des données de Cumulus et son affichage en texte .

images_gw/temperature_48h.jpg : appel de l'image de Graphweather et sa traduction en graphes.

Voila le schéma local d'une page .

En ce qui concerne la méthode employée pour confectionner les scripts, mon livre de chevet est
la page du forum de P.A Aubert que tu m'indique depuis la création de mon site.

Au sujet du terme timestamp , je te demandais si la formulation concernant les appels de date ou période des données
étaient conforme ou peut on utiliser une autre formulation ; déjà lu dans ce forum.

Cordialement

Michel

[PascalWMR]

Salut Michel.

J'ai bien compris comment tu structurait tes pages.
Mais ça n’empêche pas, que dans toutes les pages de scripts php qui font appel à Highcharts ou Highstock tu doit obligatoirement faire appel a leurs librairies respectives.

Pour Highstock ce sont les suivantes

<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="highstock/js/highstock.js"></script>
<script type="text/javascript" src="highstock/js/highcharts-more.js"></script>
<script type="text/javascript" src="highstock/js/modules/exporting.js"></script>
<script type="text/javascript" src="highstock/js/themes/grid.js"></script>

Sans ces librairies, il est impossible que tes graphiques s'affichent, et, dans le code que tu m'a demandé de regarder, elles manquent. Elles doivent êtres placées juste avant cette ligne
<!-- 2. Add the JavaScript to initialize the chart on document ready -->

Quand au virgules, il en manque ici data: comArr(outdoortemperature), et ici data: comArr(dewpoint),

Je pense que c'est pour cela que tu n'a que 2 courbes qui s'affichent au lieu des 4.
Enfin je n'ai pas regardé plus amplement tes codes (je suis dans mon camion avec un ordi portable).

Quand au tstamp si je comprend bien, je dirai qu'il n'y a ni bonne ni mauvaise manière d'extraire des dates.On peut le faire avec le tstamp ou autrement ça épend de ce que l'on veut.

A+
Pascal