humidité mensuelle

Vous créez vos graphiques à partir d'une base de données et vous avez une question, un problème, c'est ici

Modérateurs : jturlier, Météo Villarzel

muchistic
Messages : 142
Enregistré le : 17 févr. 2014, 20:20
Localisation : Canejan (33)
Contact :

humidité mensuelle

Message par muchistic » 23 déc. 2014, 19:17

bonjour

je suis en train de créer un graphique avec l'humidité mensuelle sur l'année en cours. sous forme de baragraphe j'ai voulu mettre l'indication au dessus et bien que je veuille être précis, je crois que la c'est un peu trop :D , j'arrive a des valeurs 10 chiffres après la virgules ;)
http://www.meteo-canejan.fr/graphique/h ... -annee.php

Code : Tout sélectionner

<?php
// appel du script de connexion
require("mysql_connect.php");                     
// Rcupration des donnes en faisant la somme de t_out_moy en crant une variable AnneeMois et en groupant les donnes sur cette variable AnneeMois.
$sql = "SELECT tstamp, AVG(h_out_moy), substr(recdateTZ,1,6) AS AnneeMois FROM `MiniMaxidatavp2` GROUP BY AnneeMois";  
$query = mysql_query($sql);
$i=0;
while ($list = mysql_fetch_assoc($query)) {      
if (date("I",time())==0) { 
   $time[$i]=($list['tstamp']+7200)*1000;
   } 
else {
   $time[$i]=($list['tstamp']+7200)*1000;
  } 
$h_out_moy[$i]=$list['AVG(h_out_moy)']*1;
$i++;
}    
?>
<script type="text/javascript"> 
eval(<?php echo  "'var time =  ".json_encode($time)."'" ?>);
eval(<?php echo  "'var h_out_moy =  ".json_encode($h_out_moy)."'" ?>);  
</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&#65533;t&#65533;o Jarny (54)">
<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/html;charset=UTF-8" />
<title>Météo Canéjan</title>


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

<link rel="stylesheet" href="jquery/development-bundle/themes/base/jquery.ui.all.css">
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/development-bundle/ui/jquery.ui.core.js"></script>
<script src="jquery/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="jquery/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script 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> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
      <style type ='text/css'>
      </style>  <!--<script src="../highstock/js/themes/gray.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: 'Réinitialiser le zoom',
            resetZoomTitle: 'Réinitialiser le 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",
            printButtonTitle: "Imprimer le graphique",
         printChart: "Imprimer le graphique",
            loading: "Chargement en cours...",
         rangeSelectorFrom: "Du",
         rangeSelectorTo: "Au"
            }
         });
         window.chart = new Highcharts.StockChart({
		    chart: {
		        renderTo: 'container',
				zoomType: 'x',
				 alignTicks: false,
				 type: 'spline',
				 marginRight: 20,
				 marginBottom: 10,
				 marginTop: 35,
				 plotBorderColor: '#ff6691',
				 plotBorderWidth: 1,
				 borderColor: '#EBBA95',
				 borderWidth: 1,
				 plotBackgroundColor: '#F7F8E0',
				 backgroundColor: '#67C9F1',
		    },
			navigator: {
            top: 475
        },
         title: {
                text: 'Humidité moyenne mensuelle',
                style:{font: 'bold 14px sans-serif', color: '#000000'},
            x: -20 //center
            },
            subtitle: {
                text: 'Source : Météo Canéjan',
                align: 'center',
                x: 0
            },
         credits: {
            text: ' Météo Canéjan',
            href: 'http://meteo-canejan.fr'
			},
rangeSelector : {
			buttonTheme: { // styles for the buttons
             width: 100,
            fill: 'white',
             stroke: 'none',
                'stroke-width': 1,
             r: 3,
             // style: {
                // color: '#0000A0',
                // fontWeight: 'bold'
             // },
             // states: {
                // hover: {
                   // fill: '#FF0000',
                   // style: {
                      // color: '#FFFF00'
                   // }
               // },
                // select: {
                   // fill: '#0000A0',
                   // style: {
                      // color: 'white'
                   // }
                // }
             // }
          },
         buttons: [{
                  enabled: false,
                  type: 'ytd',
                  count: 1,
                  text: 'Cette année'
               }],
            inputEnabled: false,
            selected : 0,   
         },
            legend: {
	    	enabled: true,
	    	align: 'top',
	    	layout: 'horizontal',
	    	// verticalAlign: 'top',
	    	// y: 25,
			x: 250,
	    	shadow: true
	    },
	    xAxis: {
            type: 'datetime',
            labels: {
            format: '{value: %b<br/>%Y}',
            align: 'center',
            }
         },
             yAxis: { // 1er yAxis (numero 0)
             opposite:false,
            showFirstLabel: true,
             showLastLabel: true,
            labels: {
                    formatter: function() {
                        return this.value +' %';
                    },
               align : 'right',
               x : -10,
               y : 3,
                    style: {
                        color: '#FF0000'
                    }
                },
                title: {
                    text: 'Humidité en %',
               style: {
                        color: '#000000'
                    }
                }
            },
          
             
          tooltip: {
            crosshairs: true,
            borderColor: 'royalblue',
            valueDecimals: 2,
            shared: true,
            backgroundColor: '#F5ECCE',            
            borderRadius: 5,
            formatter: function() {
                var s = '<b>'+ Highcharts.dateFormat('%B %Y', this.x) +'</b>';
                $.each(this.points, function(i, point) {
            var unit = {
                        'Humidité': ' %',
                  
                    }[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: {
                borderWidth: 0.5,
                borderColor: 'black'
            },
            
         },
         series: [{
              name: 'Humidité',
            id :'Humidité',
            type: 'column',
            pointPadding: 0,
            pointWidth: 15,
            dataLabels: {
                    enabled: true,
                    format: '{y} %',
                    color:'#000000',
                    x: 0,
                    y: 0
                },
            color: '#3F36F2',
           
              data: comArr(h_out_moy),
          },
         ]
      }, 
      
      function(chart) {// on complete
                 chart.renderer.image('http://www.meteo-canejan.fr/graphique/blason1.png', 10, 3, 43, 50)
            .add();
                           
      });

    });
});

</script>
		
	</head>
   <body>
      <!-- 3. Add the container -->
      <table align="center">
    <tr>
    <td><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
      <div align="center"></div>
    </td>
  </tr>
</table>
   </body>
</html>

quelqu'un aurait il une idée pour masquer les indications au delà de 2 chiffres après la virgule ?

Dominique
https://www.meteo-canejan.fr/

ma config : VP2sql , Weaterlink 6.03 , NOAAtable, minimaxibis (sonde agricole), Windows 10 .

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

Re: humidité mensuelle

Message par Météo Villarzel » 23 déc. 2014, 19:31

Salut,
essaye ça dans la série

tooltip : {
valueDecimals : 1
},

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

muchistic
Messages : 142
Enregistré le : 17 févr. 2014, 20:20
Localisation : Canejan (33)
Contact :

Re: humidité mensuelle

Message par muchistic » 23 déc. 2014, 20:20

ça ne donne rien Pierre André, d'un autre coté j'ai édité un fichier .wlk sous format .csv et ces valeurs après la virgule existe bien...
je continue a chercher
https://www.meteo-canejan.fr/

ma config : VP2sql , Weaterlink 6.03 , NOAAtable, minimaxibis (sonde agricole), Windows 10 .

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

Re: humidité mensuelle

Message par Météo Villarzel » 23 déc. 2014, 23:33

J'ai trouvé
Au lieu de
format: '{y} %',

format: '{point.y:.1f}',

2f pour deux décimales

http://www.highcharts.com/docs/chart-co ... formatting

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
jturlier
Administrateur du site
Messages : 393
Enregistré le : 10 déc. 2014, 10:20
Localisation : Sérignan 34410
Contact :

Re: humidité mensuelle

Message par jturlier » 23 déc. 2014, 23:47

Bonsoir Dominique et Pierre-André,
je ne connais pas la provenance des données, PHP ou JS, mais dans l'un ou l'autre de ces 2 cas la solution serait d'effectuer une opération round sur ces données avant de les traiter dans highchart ou highstock qui sont des librairies de présentation des données. Cela ne me semble pas approprié de traiter ce type d'opérations dans cette partie du script bien qu'ii doive exister une fonction, je suis presque sûr d'avoir vu ça quand j'ai créé les graphes des comparaisons NOAA.
Je suggère de jeter un coup d'oeil avec google sur les fonctions round, ceil ou floor en fonction de l'opération envisagée.
Php : round($valeur, 2); //2 décimales
JS :
var Valeur = 12.456789;
round(Valeur * 100)/100;
// donnera 12.45 à 2 décimales JS arrondit à l'entier le plus proche
tu peux aussi le faire directement dans ta requête SQL :
$sql = "SELECT tstamp, round(AVG(h_out_moy),2), substr(recdateTZ,1,6) AS AnneeMois FROM `MiniMaxidatavp2` GROUP BY AnneeMois";
Joyeuses fêtes à vous deux et ménagez votre foie !

Jean
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
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: humidité mensuelle

Message par Météo Villarzel » 24 déc. 2014, 00:07

Bonsoir Jean,
effectivement je n'ai pas pensé d'arrondir directement dans le PHP, pourtant je l'utilise sur toutes mes valeurs dans mon schéma du chauffage

<?php echo round(($dep_chauff[0]),1); ?>

http://www.boock.ch/meteo/pac/test_pac.php

Dans 20 ans ça deviendra un automatisme :lol:

Merci et bonnes fêtes aussi, pour le foie c'est déjà un peu tard pour le ménager.

Bonne nuit
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

muchistic
Messages : 142
Enregistré le : 17 févr. 2014, 20:20
Localisation : Canejan (33)
Contact :

Re: humidité mensuelle

Message par muchistic » 24 déc. 2014, 10:26

Bonjour

merci à vous deux :) mais ... et oui :cry: je ne vois pas ce qu'il manque ou que je ne fais pas chez moi ça bug toujours.
j'ai éssayé ceci :
$sql = "SELECT tstamp, round(AVG(h_out_moy),2), substr(recdateTZ,1,6) AS AnneeMois FROM `MiniMaxidatavp2` GROUP BY AnneeMois"; et les valeur restent à zéro .

ou en rajoutant une ligne :

<script type="text/javascript">
eval(<?php echo "'var time = ".json_encode($time)."'" ?>);
eval(<?php echo "'var h_out_moy = ".json_encode($h_out_moy)."'" ?>);
<?php echo round(($h_out_moy),2); ?>
</script>
http://www.meteo-canejan.fr/graphique/h ... -annee.php
et la ça ne change rien... bon je doit oublier un truc :)

bon noel a vous deux ainsi qu'à tous les membres du forum et pour le foie ça s'annonce déja compliqué ! :D
https://www.meteo-canejan.fr/

ma config : VP2sql , Weaterlink 6.03 , NOAAtable, minimaxibis (sonde agricole), Windows 10 .

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

Re: humidité mensuelle

Message par jturlier » 24 déc. 2014, 12:05

effectivement ça ne peut pas fonctionner puisque ça n'est pas sur la bonne valeur, c'est sur les heures. Tu ne fais pas ta requête sur la valeur, mais sur son heure (h_xxx) au lieu de out_moy !!!

Bon Noël

Jean
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
Météo Villarzel
Administrateur du site
Messages : 524
Enregistré le : 06 févr. 2014, 09:48
Contact :

Re: humidité mensuelle

Message par Météo Villarzel » 24 déc. 2014, 12:55

Non Jean
h_out_moy existe dans la table maximini, c'est toi qui la créée :roll:

humidité extérieure moyenne

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

muchistic
Messages : 142
Enregistré le : 17 févr. 2014, 20:20
Localisation : Canejan (33)
Contact :

Re: humidité mensuelle

Message par muchistic » 24 déc. 2014, 13:17

j'ai des exemple ici http://openclassrooms.com/forum/sujet/h ... rs-courbes identique à la solution de Jean, mais ça fonctionne toujours pas :x

pourtant en théorie ça parait simple..

peut être également une solution sans passer par le php http://stackoverflow.com/questions/9085 ... ery-script mais j'ai du mal a comprendre
Modifié en dernier par muchistic le 24 déc. 2014, 13:32, modifié 1 fois.
https://www.meteo-canejan.fr/

ma config : VP2sql , Weaterlink 6.03 , NOAAtable, minimaxibis (sonde agricole), Windows 10 .

Répondre