Graphique responsive

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

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

Graphique responsive

Message par JP54 » 28 mai 2017, 17:16

Bonjour,
Je cherche à faire pour ma version smartphone un graphique responsive, graphique qui s'adapte automatiquement en longueur et hauteur à la taille de l'écran.
j'ai trouvé sur Highcharts cet exemple
http://jsfiddle.net/gh/get/library/pure ... esponsive/
J'ai essayé d'adapté le code à mon graphique sans les boutons, il s'adapte bien à la taille de l'écran, mais seulement en longueur, donc j'ai loupé quelques chose, mais je ne vois pas quoi.

Mon graphique:
http://www.meteo-jarny.com/test-mobile/ ... re-24h.php

Je sais qu'il y a des morceaux de code à supprimer qui ne servent qu'aux boutons, je les supprimerais après

Code : Tout sélectionner

<?php
require("mysqli_connect.php");                     
$sql="select max(tstamp) from data";
$query=mysqli_query($conn,$sql);                  
$list=mysqli_fetch_array($query);     

$stop=$list[0];
$start=$stop-(43200*2);

$sql = "SELECT tstamp, outdoortemperature  FROM data where tstamp >= '$start' and  tstamp <= '$stop' ORDER BY 1";  
$query=mysqli_query($conn,$sql);                   
$i=0;
while ($list = mysqli_fetch_array($query)) {            
if (date("I",time())==0) {                                                          
	$dtime[$i]=($list['tstamp']+3600)*1000;
	$minuit=(mktime(0 ,0 ,0 , date("n"), date("j"), date("Y"))+3600)*1000;
	} 
else {
	$dtime[$i]=($list['tstamp']+7200)*1000;
	$minuit=(mktime(0 ,0 ,0 , date("n"), date("j"), date("Y"))+7200)*1000;
  }							
$outdoortemperature[$i]=$list['outdoortemperature']*1;				

$i++;
} 
$debut=	$dtime[0];   	
?>

<script type="text/javascript"> 
eval(<?php echo  "'var dTime =  ".json_encode($dtime)."'" ?>);
eval(<?php echo  "'var outdoortemperature =  ".json_encode($outdoortemperature)."'" ?>);
eval(<?php echo  "'var debut =  ".json_encode($debut)."'" ?>);
eval(<?php echo  "'var minuit =  ".json_encode($minuit)."'" ?>);
</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=" mto, pluie, vent, temprature, 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/html; charset=utf-8" />
<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="highcharts/js/highcharts.js"></script> 
<script type="text/javascript" src="highcharts/js/themes/default.js"></script>

<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"/>

<div id="container"></div>

      <style type ='text/css'>
	        #container {
	            min-width: 310px;
	            max-width: 800px;
            }
      </style>    
   
      <!-- 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 < dTime.length; i++) {
         outarr[i] = [dTime[i], unitsArray[i]];
        }
      return outarr;
    } 
 var conf_heure =
{
days: {'Sun': 'Dimanche','Mon': 'Lundi','Tue': 'Mardi','Wed': 'Mercredi','Thu': 'Jeudi','Fri': 'Vendredi','Sat': 'Samedi'},
mois: {'01': 'Janvier','02': 'Février','03': 'Mars','04': 'Avril','05': 'Mai','06': 'Juin','07': 'Juillet','08': 'Août','09': 'Septembre','10': 'Octobre','11': 'Novembre','12': 'Décembre'},
}       
$(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"],
            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: {
			    height: 400,
                renderTo: 'container',
				zoomType: 'x',
                type: 'spline',
                marginRight: 10,
                marginBottom: 40,
				plotBorderColor: '#346691',
				plotBorderWidth: 1,
				borderRadius: 15,
								backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(176, 176, 176)'],
                    [1, 'rgb(170, 170, 170)']
                ]
            },

            },

            title: {
                text: 'Température des dernières 24 heures',
				y: 7,
                x: 10, //center
				style: {
	            fontSize: '12px',
				color:'black'}
            },
			credits: {
			style: {
			color: '#000000'},
            text: '© Météo Jarny',
            href: ''
			},
		            xAxis: {
                type: "datetime",            
				dateTimeLabelFormats: {day: "%H:%M", hour: "%H:%M"},
                tickInterval: 14400*1000,
                labels: {rotation: 0, align: 'center', style:{font: '9px arial, sans-serif', color: '#000000'} },
                title: false, 								
				plotLines: [{
				value: minuit,
				dashStyle: 'ShortDash',
				width: 1.5,
                color: '#ffffff',
				label: {
	    			text: 'Minuit',
	    			align: 'right',
					style:{font: 'bold 10px sans-serif', color: '#ffffff'},
					rotation: 0,
	    			y: 10,
	    			x: -2,

	    		}
            }],
        
		
						
            },

            yAxis: {		   
				tickInterval: 5,
                labels: {rotation: 0, align: 'right', style:{font: '', color: '#000000'} },
                title: {
                    text: null,	
                },
				labels: {
                    formatter: function() {
                        return this.value +' °C';
                    },
                    style: {
                        color: '#0000FF'
                    }
                },

                plotLines: [{
                    value: 0,
					width: 1.5,
                    color: '#FFFF00'

                }]
            },
			legend: {
        enabled: false
    },
	    tooltip: {
				crosshairs:[true],
				borderColor: '#4b85b7',
				shared: true,
				backgroundColor: '#c4c4c4',
				formatter: function() {
                var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', this.x) +'</b>';
                $.each(this.points, function(i, point) {
					var unit = {
                    'Température': ' °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: '#0000ff',
				lineWidth: 1,
                data: comArr(outdoortemperature)  
                },
              ]
			  
        });
		responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    chart: {
                        height: 300
                    },
                    subtitle: {
                        text: null
                    },
                    navigator: {
                        enabled: false
                    }
                }
            }]
        }
      });
	  $('#small').click(function () {
        chart.setSize(400);
    });

    $('#large').click(function () {
        chart.setSize(800);
    });

    $('#auto').click(function () {
        chart.setSize(null);
    });
});

   </script>
   </head>
   <body>
      
   </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: Graphique responsive

Message par Météo Villarzel » 31 mai 2017, 11:59

Salut,
intéressant ton lien.

A mon avis tu a mis une hauteur fixe et pas une hauteur max comme pour la largeur

responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 300
},
subtitle: {
text: null
},
navigator: {
enabled: false
}

As-tu essayé avec

maxheight: 300

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

Re: Graphique responsive

Message par JP54 » 31 mai 2017, 17:26

Ca sera peut être plus sympa d'avoir un graphique qui s'adapte à la taille de l'écran du smartphone, j'avais mes graphiques pour mon iphone 6 et sur un iphone 5 ça fait vraiment pas jolie, l'écran est plus petit.
Je ne me rappelle plus su j'avais essayé, j'ai testé tellement de chose.
Je viens d'essayé, rien de change, j'ai même ajouté "min-height et max-height" toujours pareil

Code : Tout sélectionner

<style type ='text/css'>
	        #container {
	            min-width: 310px;
	            max-width: 800px;
		    min-height: 150px;
		    max-height: 400px;
            }
      </style>    
Ca fait un petit moment que je suis dessus sans trouver la solution
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
jturlier
Administrateur du site
Messages : 394
Enregistré le : 10 déc. 2014, 10:20
Localisation : Sérignan 34410
Contact :

Re: Graphique responsive

Message par jturlier » 01 juin 2017, 08:04

Salut Pascal,
le problème du javascript, c'est que les variables doivent respecter la casse des caractères.
Vu la structure d'écriture de maxWidth: 500, j'essaierai maxWidth: xxxx.
Cdlt
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

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

Re: Graphique responsive

Message par JP54 » 01 juin 2017, 17:03

Bonjour Jean,
J'ai essayé pas mal de chose pour ce graphique mais rien à faire, la hauteur ne bouge pas, même en mettant comme tu l'indiques "maxWidth: xxxx"
Je ne sais plus trop quoi faire. Par contre si je mets les boutons et cliquant dessus, ça fonctionne
http://www.meteo-jarny.com/test-mobile/ ... e1-24h.php
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