Discussion :

[Torseur 06]

Bonjour,

J'ai une question concernant l'affichage visuel pour faire des courbes par le biais de Google Chart Range Slider.
Je veux l'utiliser pour suivre ma consommation électrique. Sur le graphe principale que j'affiche en php sur une url fixée, j'ai le graphe entier depuis le moment où j'enregistre les données SQL (plusieurs jours, voire plusieurs mois). Sur le graphe avec le Range Slider je peux cibles un nombre de jours spécifiques.
Je viens récupérer des données SQL pour les afficher dans un graphique mais je n'arrive pas à forcer le Range Slider sur une valeur min et max. Par défaut il prend en compte l'ensemble des données qui font référencent.
Mon objectif étant de forcer le Range Slider par défaut sur les consommations des dernières 24h.

Pouvez vous m'indiquer comment modifier le code pour le forcer à faire cela ?

Merci à vous !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    var rangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'filter_div',
          'options': {
             filterColumnLabel : 'Date',
             ui : {chartType: 'LineChart', chartOptions: {
                             height : 80,
                             backgroundColor: '#FFF',
                             colors : ['#375D81', '#ABC8E2'],
                             curveType : 'function',
                             focusTarget : 'category',
                             lineWidth : '1',
                             'legend': {'position': 'none'},
                             'hAxis': {'textPosition': 'in'},
                             'vAxis': {
                               'textPosition': 'none',
                               'gridlines': {'color': 'none'}
                             }
                 }}
          }
        });

[headmax]

Salut voici un exemple concret si cela peut t'aider, le code dont tu fais allusion n'a pas d'impact sur le range.

démo : https://codepen.io/headmax/pen/QQvqqG

[Torseur 06]

Merci pour ce p'tit utilitaire headmax mais je suis vraiment un novice et même si je vois un peu comment modifier de manière interactive quelques chiffres pour jouer sur le range cela reste trop éloigné de mon code pour faire le lien et appliquer les modifs sur mon code.
Je me permets de mettre mon code (du moins code que j'ai pu récupérer et que j’essaie d'adapter à mon besoin) en entier pour savoir à quel endroit je dois fixer les ranges par défaut du ChartRangeFilter.
J'avoue être un peu perdu dans ce code et je pensais avoir localisé les quelques lignes où je pourrais modifier le range mais d'après ce que vous dites je ne l'ai pas bien localisé.

Merci à vous de votre aide !!!

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<?php require_once('teleinfo_func.php'); ?>
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
<div id="puissance">
  <div id="chart_div"></div>
  <div id="filter_div"></div>
</div>
<div id="conso"></div>
 
 
<script type="text/javascript">
  google.load('visualization', '1.0', {'packages':['controls']});
  google.setOnLoadCallback(drawDashboard);
  
  function drawDashboard() {
 
    var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'V.A');
        data.addColumn('number', 'W');
        data.addRows([<?php echo getDatasPuissance (5); ?>]);
 
    var dashboard = new google.visualization.Dashboard(
            document.getElementById('puissance'));
 
    var rangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'filter_div',
          'options': {
             filterColumnLabel : 'Date',
             ui : {chartType: 'LineChart', chartOptions: {
                             height : 80,
                             backgroundColor: '#FFF',
                             colors : ['#375D81', '#ABC8E2'],
                             curveType : 'function',
                             focusTarget : 'category',
                             lineWidth : '1',
                             'legend': {'position': 'none'},
                             'hAxis': {'textPosition': 'in'},
                             'vAxis': {
                               'textPosition': 'none',
                               'gridlines': {'color': 'none'}
                             }
                 }}
          }
        });
        
    var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_div',
          'options': {
                             title: '',
                             height : 400,
                             backgroundColor: '#FFF',
                             colors : ['#375D81', '#ABC8E2'],
                             curveType : 'function',
                             focusTarget : 'category',
                             lineWidth : '1',
                             legend : {position: 'bottom',  alignment: 'center', textStyle: {color: '#333', fontSize: 16}},
                             vAxis : {textStyle : {color : '#555', fontSize : '16'}, gridlines : {color: '#CCC', count: 'auto'}, baselineColor : '#AAA', minValue : 0},
                             hAxis : {textStyle : {color : '#555'}, gridlines : {color: '#DDD'}}
          }
        });
 
    dashboard.bind(rangeSlider, lineChart);
    dashboard.draw(data);
 
  }
  
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'Heures pleines');
    data.addColumn('number', 'Heures creuses');
    data.addRows([<?php echo getDatasConso (365); ?>]);
    var options = {
                   title: '',
                   height : 200,
                   backgroundColor: '#FFF',
                   colors : ['#375D81', '#ABC8E2'],
                   curveType : 'function',
                   focusTarget : 'category',
                   lineWidth : '1',
                   isStacked: true,
                   legend : {position: 'bottom',  alignment: 'center', textStyle: {color: '#333', fontSize: 16}},
                   vAxis : {textStyle : {color : '#555', fontSize : '16'}, gridlines : {color: '#CCC', count: 'auto'}, baselineColor : '#AAA', minValue : 0},
                   hAxis : {textStyle : {color : '#555'}, gridlines : {color: '#DDD'}}
              };
    var chart = new google.visualization.ColumnChart(document.getElementById("conso"));
    chart.draw(data, options);
  }
 
 
</script>

[headmax]

Salut idéalement il faut copier/coller la partie rendu HTML la partie généré par le script PHP les données transformées en HTML car les zones ou il y du PHP ne sont pas générés donc tes données non plus en espérant bien-sur quelques soient pas trop nombreuse et dépasse pas la limite d'un post.

Pour obtenir le bon copier/coller devant la page concerné du fait un CTRL + U pour afficher la source du code, une nouvelle page s'ouvre tu fait un CTRL + F pour faire une recherche dans cette source en mettant le mot clef : https://www.google.com/jsapi
Se qui te permet de copier a partir de sa balise script <script ... src="https://www.google.com/jsapi" ></script> jusqu'à la fin du module soit jusqu'au </script> du chart.
Après ceci je serais en mesure d'apporter une éventuelle correction.

[Torseur 06]

Merci headmax pour ton intérêt.
J'ai suivi tout ce tu m'as demandé (CTRL U + CTRL F), je me suis heurté au problème qu'à la place de src="https://www.google.com/jsapi" ></script> j'ai src="https://www.gstatic.com/charts/loader.js"
Je ne sais pas ce que ça change.
Pour ce qui est du code j'ai rogné au niveau des datas après la ligne "data.addRows([[{v:new Date(2018, 1, 7, 20, 34, 05), f:'7 Feb 20h34'}, "car sinon le nombre d'informations était très important.

Je ne vois pas à quel endroit je dois jouer pour fixer le RangeSlider sur les dernières 24h de récupération de consommation.

Merci en tout cas de votre aide !

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
<div id="puissance">
  <div id="chart_div"></div>
  <div id="filter_div"></div>
</div>
<div id="daily_div"></div>
<div id="monthly_div"></div>
 
<script type="text/javascript">
  google.charts.load('current', {packages: ['corechart', 'controls'], 'language': 'fr'});
  google.charts.setOnLoadCallback(drawDashboard);
 
  function drawDashboard() {
 
    var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'V.A');
        data.addColumn({type:'string', role:'style'});
        data.addColumn('number', 'W');
        data.addRows([[{v:new Date(2018, 1, 7, 20, 34, 05), f:'7 Feb 20h34'}, 
                  {v:1570, f:'1570 V.A'}, 'color: #375D81', {v:1540, f:'1540 W'}], [{v:new Date(2018, 1, 7, 20, 34, 07), f:'7 Feb 20h34'}, 
                  {v:1560, f:'1560 V.A'}, 'color: #e0440e', {v:1540, f:'1540 W'}], [{v:new Date(2018, 1, 7, 20, 35, 07), f:'7 Feb 20h35'}, 
                  {v:1520, f:'1520 V.A'}, 'color: #e0440e', {v:1540, f:'1540 W'}], [{v:new Date(2018, 1, 7, 20, 36, 03), f:'7 Feb 20h36'},
**************************************************ROGNER****************************************************
                  {v:2220, f:'2220 V.A'}, 'color: #e0440e', {v:2200, f:'2200 W'}], [{v:new Date(2018, 1, 12, 20, 31, 04), f:'12 Feb 20h31'}, 
                  {v:2010, f:'2010 V.A'}, 'color: #e0440e', {v:1980, f:'1980 W'}], [{v:new Date(2018, 1, 12, 20, 32, 04), f:'12 Feb 20h32'}, 
                  {v:2230, f:'2230 V.A'}, 'color: #e0440e', {v:2200, f:'2200 W'}], [{v:new Date(2018, 1, 12, 20, 33, 03), f:'12 Feb 20h33'}, 
                  {v:1450, f:'1450 V.A'}, 'color: #e0440e', {v:1320, f:'1320 W'}]]);
 
    var dashboard = new google.visualization.Dashboard(
            document.getElementById('puissance'));
 
    var rangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'ChartRangeFilter',
          'containerId': 'filter_div',
          'options': {
             filterColumnLabel : 'Date',
             ui : {chartType: 'LineChart', chartOptions: {
                             height : 80,
                             backgroundColor: '#FFF',
                             colors : ['#375D81', '#ABC8E2'],
                             curveType : 'function',
                             focusTarget : 'category',
                             lineWidth : '1',
                             'legend': {'position': 'none'},
                             'hAxis': {'textPosition': 'in'},
                             'vAxis': {
                               'textPosition': 'none',
                               'gridlines': {'color': 'none'}
                             }
                 }}
          }
        });
        
    var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_div',
          'options': {
                             title: 'Consommation instantanée',
                             height : 400,
                             backgroundColor: '#FFF',
                             colors : ['#375D81', '#ABC8E2'],
                             curveType : 'function',
                             focusTarget : 'category',
                             lineWidth : '1',
                             legend : {position: 'bottom',  alignment: 'center', textStyle: {color: '#333', fontSize: 16}},
                             vAxis : {textStyle : {color : '#555', fontSize : '16'}, gridlines : {color: '#CCC', count: 'auto'}, baselineColor : '#AAA', minValue : 0},
                             hAxis : {textStyle : {color : '#555'}, gridlines : {color: '#DDD'}}
          }
        });
 
    dashboard.bind(rangeSlider, lineChart);
    dashboard.draw(data);
 
  }
  
  google.charts.setOnLoadCallback(drawChart);
  
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Heures pleines');
    data.addColumn('number', 'Heures creuses');
    data.addRows([]);
    var dailyChartOptions = {
                   title: 'Consommation journalière',
                   height : 200,
                   backgroundColor: '#FFF',
                   colors : ['#375D81', '#ABC8E2'],
                   focusTarget : 'category',
                   isStacked: true,
                   legend : {position: 'bottom',  alignment: 'center', textStyle: {color: '#333', fontSize: 16}},
                   vAxis : {textStyle : {color : '#555', fontSize : '16'}, gridlines : {color: '#CCC', count: 'auto'}, baselineColor : '#AAA', minValue : 0},
                   hAxis : {textStyle : {color : '#555'}, gridlines : {color: '#DDD'}}
              };
 
function floorDate(date) {
      var month = new Date(date.getFullYear(), date.getMonth());
      return month;
    }
 
    var monthlyData = google.visualization.data.group(data, [{
      column: 0,
      modifier: floorDate,
      type: 'date'
    }], [{
        column: 1,
        label: 'Heures pleines',
        aggregation: google.visualization.data.sum,
        type: 'number'
    }, {
        column: 2,
        label: 'Heures creuses',
        aggregation: google.visualization.data.sum,
        type: 'number'
    }]);
 
    // Format dates
    var formatter = new google.visualization.DateFormat({pattern: "MMM ' 'yyyy"});
    formatter.format(monthlyData, 0);
 
    var monthlyChartOptions = {
                   title: 'Consommation mensuelle',
                   height : 200,
                   backgroundColor: '#FFF',
                   colors : ['#375D81', '#ABC8E2'],
                   focusTarget : 'category',
                   isStacked: true,
                   legend : {position: 'bottom',  alignment: 'center', textStyle: {color: '#333', fontSize: 16}},
                   vAxis : {textStyle : {color : '#555', fontSize : '16'}, gridlines : {color: '#CCC', count: 'auto'}, baselineColor : '#AAA', minValue : 0},
                   hAxis : {textStyle : {color : '#555'}, gridlines : {color: '#DDD'}, format: 'MMM yyyy'}
              };
 
    var dailyChart = new google.visualization.ColumnChart(document.getElementById("daily_div"));
    dailyChart.draw(data, dailyChartOptions);
 
    var monthlyChart = new google.visualization.ColumnChart(document.getElementById("monthly_div"));
    monthlyChart.draw(monthlyData, monthlyChartOptions);
  }
 
</script>

[Torseur 06]

Un p'tit up pour ceux qui pensent pouvoir m'aider pour fixer le range du RangeSlider.

Merci à vous !