• Graphique responsive

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>

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+

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

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

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

Graphique responsive

Graphique responsive

Re: Graphique responsive

Re: Graphique responsive

Re: Graphique responsive

Re: Graphique responsive