Date décalée sur xAsis

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
JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Date décalée sur xAsis

Message par JP54 » 07 déc. 2014, 16:23

Bonjour,
Un petit souci avec les années qui sont décalées sur xAsis, les graphiques sont totalement identique, j'ai juste modifié la requête php afin de faire les mois de janvier février mars etc.
Sur le graphique des mois de janvier, c'est correct
http://www.meteo-jarny.com/graphiques-d ... 01-gel.php

sur le graphique des mois de février il y un petit décalage
http://www.meteo-jarny.com/graphiques-d ... 02-gel.php

et le décalage est encore accentué sur le mois de mars
http://www.meteo-jarny.com/graphiques-d ... 03-gel.php

Je n'ai pas fais les autres mois, mais je pense que le décalage va être encore plus important. ma question est simple, pourquoi ce décalage et comment le résoudre.
merci d'avance
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

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

Re: Date décalée sur xAsis

Message par PascalWMR » 07 déc. 2014, 18:45

Salut JP

En regardant le code source de tes graphiques, il y a un truc bizarre. On s’aperçoit que tes données dtime et t_out_mini sont encodées 2 fois :!: dont la première fois très bizarrement :!: :!: :!:

1er fois en début de code html
eval('var dtime = [1073004900000,1104541500000,1136077500000,1167613500000,1199149500000,1230771900000,1262307900000,1294362300000]');
eval('var t_out_mini <= 0 = [20,19,23,7,12,27,21,11]');

2ème fois à la fin du code html
eval('var dTime = [1073004900000,1104541500000,1136077500000,1167613500000,1199149500000,1230771900000,1262307900000,1294362300000]');
eval('var t_out_mini = [20,19,23,7,12,27,21,11]');

Essaie aussi de rajouter les options
maxPadding et startOnTick: true, à l'axe xAxis.

Tes graphiques n'ayant pas de bouton de navigation, essaie de les faire avec Highcharts au lieu de Highstock. De plus vu comment sont encodées tes données, tu n'a pas besoin de fonction dataGrouping.

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

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Date décalée sur xAsis

Message par JP54 » 07 déc. 2014, 18:52

Effectivement, il y des doublons.
je vais reprendre complètement mes graphiques avec Highcharts, ça sera plus simple
Merci
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Date décalée sur xAsis

Message par JP54 » 08 déc. 2014, 18:40

J'ai quand même essayer en ajoutant maxPadding et startOnTick: true, à l'axe xAxis, mais c'est toujours pareil.
Suite au conseil de Pascal, j'ai créé un autre graphique avec highcharts mais mon graphique ne s'affiche pas, j'ai un page blanche. Ca fait une paire d'heures que je suis dessus mais je ne trouve pas mon erreur. Est ce qu'une âme charitable pourrait jeté un oeil sur mon code et m'aider à trouver mon ou mes erreurs.

Code : Tout sélectionner

<?php
require("mysql_connect.php");

     $sql = "SELECT tstamp, SUM(t_out_mini <= 0) FROM MiniMaxidata WHERE substr(recdateTZ,5,2)='01' group by substr(recdateTZ,1,6) order by 1.";


    $query=mysql_query($sql);                   
    $i=0;
    while ($list = mysql_fetch_assoc($query)) { 
     
    $dtime[$i]=($list['tstamp']+7200)*1000;           
    $t_out_mini[$i]=$list['SUM(t_out_mini <= 0)']*1;                     
    $i++;
    }
      ?>

    <script type="text/javascript">
    eval(<?php echo  "'var dtime =  ".json_encode($dtime)."'" ?>);
    eval(<?php echo  "'var t_out_mini <= 0 =  ".json_encode($t_out_mini)."'" ?>); 

    </script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META NAME="SUBJECT" CONTENT="Graphique Vantage Pro Davis">
<META NAME="DESCRIPTION" CONTENT="graphique dynamique">
<META NAME="KEYWORDS" CONTENT=" météo, pluie, vent, température, temperature, station, Vantage, Davis, Pro, Davis Vantage Pro,pression, UV, soleil,">
<META NAME="REVISIT-AFTER" CONTENT="5 DAYS">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=9" >
<META NAME="LANGUAGE" CONTENT="FR">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1"> 
<title>Météo Jarny (54)</title>

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

		
<link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript"src="jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="jquery/development-bundle/demos/datepicker/jquery.ui.datepicker-fr.js"></script>
<link rel="stylesheet" href="jquery/development-bundle/demos/demos.css">	
<script type="text/javascript" src="jquery/overlib.js"></script>
<script type="text/javascript" src="jquery/overlib_fade.js"></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.Chart({
            chart: {
                renderTo: 'container',
				zoomType: 'x',
				alignTicks: true,
                marginRight: 10,
                marginBottom: 60,
				plotBorderColor: '#346691',
				plotBorderWidth: 1,
                   },

            title: {
                text: 'Jours de gel des mois de janvier',
                x: -20 //center
                   },
            subtitle: {
                text: 'Source: Météo Jarny',
                x: -20
                      },
			credits: {
            text: '© Météo Jarny',
            href: 'http://www.meteo-jarny.com/'
		           	},
		
            xAxis: {
			type: 'datetime',
			labels: {
			format: '{value:%Y}',
			align: 'center',
			step: 1
		        	}
                    },
            yAxis: {
                title: {
                    text: 'JOurs de gel (J.)'	
                       },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#FF0000'
                           }]
                   },
	         tooltip: {
				crosshairs:[true],
				borderColor: '#4b85b7',
				shared: true,
				backgroundColor: '#edf1c8',
				formatter: function() {
                var s = '<b>'+ Highcharts.dateFormat('%Y', this.x) +'</b>';
                $.each(this.points, function(i, point) {
					var unit = {
                    'Jours de gel': ' J.'
                    }[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: {
            column: {
               grouping: false,
                   shadow: false,
                      },
	                },
		    series: [{			
		        name: 'Jours de gel',
				type: 'column',
				color: {
                linearGradient: { x1: 0, x2: 0, y1: 0, y1: 1 },
                stops: [
                [0, 'rgba(180, 180, 180, .7)'],
                [1, 'rgba(0, 0, 255, .8)']

                    ]
                    },
		        data: 
				comArr(t_out_mini),
				dataGrouping: {
					approximation:'average',
					units: [[
						'year', // unit name
						[1,2,3] // allowed multiples
					      ], ]
		                      },
		            }
			        ]

   </script>
   </head>
   <body>
      <div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
   </body>
</html>
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

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

Re: Date décalée sur xAsis

Message par Météo Villarzel » 08 déc. 2014, 18:51

salut je ne sais pas, mais tu fait un graphique avec highcharts
chart = new Highcharts.Chart({

et tu appelles la libraire highstock

<script type="text/javascript" src="highstock/js/highstock.js"></script>

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

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Date décalée sur xAsis

Message par JP54 » 08 déc. 2014, 19:04

Mais oui bien sûr, à force de regardé je ne vois plus mes erreurs :oops: , merci Pierre André
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Date décalée sur xAsis

Message par JP54 » 09 déc. 2014, 06:37

Malgré les modifications sur la librairie, toujours une page blanche donc je dois avoir une ou plusieurs autres erreurs dans mon code.
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

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

Re: Date décalée sur xAsis

Message par Météo Villarzel » 09 déc. 2014, 08:12

A la fin du scrip il manque des }); pour clore le script,
je te conseil d' éditer tes scripts avec Notepad++, quand tu sélectionnes une parenthèse/Brackets tu vois si elle est fermée
parent.png
A+
Vous n’avez pas les permissions nécessaires pour voir les fichiers joints à ce message.
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

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Date décalée sur xAsis

Message par JP54 » 09 déc. 2014, 10:45

J'utilise Notepad++ mais je n'ai pas vu.
Actuellement au boulot :D , je regarde ça ce soir.
Mreci
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

JP54
Messages : 331
Enregistré le : 15 févr. 2014, 06:44
Localisation : JARNY Meurthe-et-Moselle (54) Région Lorraine
Contact :

Re: Date décalée sur xAsis

Message par JP54 » 09 déc. 2014, 18:41

je reviens sur mon histoire de décalage, Dominique de météo Canéjan à sans doute trouvé la cause du décalage. Pour que ce soit plus visible sur mes graphiques, j'ai réduit la taille des column.
Sur le mois de janvier
http://www.meteo-jarny.com/graphiques-d ... 01-gel.php
pas de problèmes le column est bien dans l'axe de l'année.
Pour février
http://www.meteo-jarny.com/graphiques-d ... 02-gel.php
on voit un petit décalage.
D'après Dominique la requête

Code : Tout sélectionner

$sql = "SELECT tstamp, SUM(t_out_mini <= 0) FROM MiniMaxidata WHERE substr(recdateTZ,5,2)='02' group by substr(recdateTZ,1,6) order by 1.";
appelle le nombre des températures inférieur à 0° pour les mois de février. Le décalage est le mois de janvier qui n'est pas appelé mais présent sur le graphique mais invisible.
C'est encore plus flagrant pour le mois de mars
http://www.meteo-jarny.com/graphiques-d ... 03-gel.php
Donc d'après Dominique et je pense que son raisonnement tient la route le décalage serait du au mois non appelés mais présent sur le graphique sans column puisqu'ils ne sont pas appelés.
Est ce que la requête ne serait pas la cause du problème?
J'espère avoir été assez clair dans mes explications.
Station VP2 Weatherlink 5.8.1 VP2SQL 3.0.0.17 NOAAtable 1.0.0.30 Windows 7 Pro
http://www.meteo-jarny.com/

Répondre