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

Graphique responsive

Messagepar 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/highcharts/highcharts/tree/master/samples/stock/demo/responsive/
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/mini-temperature-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.81 GraphWeather 2.0.321 Data2SQL 1.0.2.32 VP2SQL 1.0.0.13 Windows 7 Pro
http://www.meteo-jarny.com/
Image
JP54
 
Messages: 189
Enregistré le: 15 Fév 2014, 07:44
Localisation: JARNY Meurthe-et-Moselle (54) Région Lorraine

Re: Graphique responsive

Messagepar 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
Avatar de l’utilisateur
Météo Villarzel
Administrateur du site
 
Messages: 466
Enregistré le: 06 Fév 2014, 10:48

Re: Graphique responsive

Messagepar 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.81 GraphWeather 2.0.321 Data2SQL 1.0.2.32 VP2SQL 1.0.0.13 Windows 7 Pro
http://www.meteo-jarny.com/
Image
JP54
 
Messages: 189
Enregistré le: 15 Fév 2014, 07:44
Localisation: JARNY Meurthe-et-Moselle (54) Région Lorraine

Re: Graphique responsive

Messagepar 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 avec console Vue + Cumulus
Cumulus2SQL + NOAAtable + Copy4SQL
Apache + GW 3.027

Audio :
FR
PC :
W10 migré (W7 ultimate 64 bits)
Sites :
http://meteoserignan.ddns.net/
http://meteo-serignan.fr/template
Avatar de l’utilisateur
jturlier
Administrateur du site
 
Messages: 193
Enregistré le: 10 Déc 2014, 11:20
Localisation: Sérignan 34410

Re: Graphique responsive

Messagepar 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/mini-temperature1-24h.php
Station VP2 Weatherlink 5.8.81 GraphWeather 2.0.321 Data2SQL 1.0.2.32 VP2SQL 1.0.0.13 Windows 7 Pro
http://www.meteo-jarny.com/
Image
JP54
 
Messages: 189
Enregistré le: 15 Fév 2014, 07:44
Localisation: JARNY Meurthe-et-Moselle (54) Région Lorraine


Retourner vers Des graphiques à partir d'une base de données

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité

cron