re-wrote the main graph buttons, now supporting zoom and pan
Costa Tsaousis (ktsaou) committed
Apr 6, 2014 at 06:16 UTC
29e3e5821ded9633337fae119fd78ba4c69299fb
2 files changed
+198
-17
web/index.html
+89
-12
@@ -65,6 +65,7 @@
65
66
if(mainchart.chartOptions.isStacked) mainchart.group = 15;
67
//mainchart.chartOptions.titlePosition = 'none';
68
+ mainchart.chartOptions.explorer = null;
69
70
// initialize the div
71
showChartIsLoading(mainchart.div, mainchart.chartOptions.width, mainchart.chartOptions.height);
@@ -72,11 +73,9 @@
73
document.getElementById('maingraph_title').innerHTML = " " + mainchart.title + " ";
74
75
// set the radio buttons
75
- if(mainchart.group_method == 'average') $('#groupaverage').trigger('click');
76
- else $('#groupmax').trigger('click');
76
+ setMainChartGroupMethod(mainchart.group_method, 'no-refresh');
77
78
$('#group' + mainchart.group).trigger('click');
79
-
79
$('#chartnormal').trigger('click');
80
81
showMainGraph();
@@ -86,9 +85,15 @@
85
mainChart(mycharts[i]);
86
}
87
88
+ var last_main_chart_max='normal';
89
function setMainChartMax(m) {
90
if(!mainchart) return;
91
92
+ if(m == 'toggle') {
93
+ if(last_main_chart_max == 'maximized') m = 'normal';
94
+ else m = 'maximized';
95
+ }
96
+
97
if(m == "maximized") {
98
mainchart.chartOptions.theme = 'maximized';
99
//mainchart.chartOptions.axisTitlesPosition = 'in';
@@ -102,6 +107,8 @@
107
mainchart.chartOptions.hAxis.viewWindowMode = null;
108
mainchart.chartOptions.vAxis.viewWindowMode = null;
109
}
110
+ $('.mainchart_max_button').button(m);
111
+ last_main_chart_max = m;
112
mainchart.last_updated = 0;
113
}
114
@@ -114,14 +121,60 @@
121
chartsRefresh();
122
}
123
117
- function setMainChartGroupMethod(g) {
124
+ var last_main_chart_avg = null;
125
+ function setMainChartGroupMethod(g, norefresh) {
126
if(!mainchart) return;
127
128
+ if(g == 'toggle') {
129
+ if(last_main_chart_avg == 'max') g = 'average';
130
+ else g = 'max';
131
+ }
132
+
133
mainchart.group_method = g;
121
- mainchart.last_updated = 0;
134
135
+ $('.mainchart_avg_button').button(g);
136
+
137
+ if(!norefresh) {
138
+ mainchart.last_updated = 0;
139
+ chartsRefresh();
140
+ }
141
+
142
+ last_main_chart_avg = g;
143
+ }
144
+
145
+ var stop_refreshing = 0;
146
+ function playGraphs() {
147
+ stop_refreshing = 0;
148
+ $('.mainchart_play_button').button('play');
149
chartsRefresh();
150
}
151
+ function pauseGraphs() {
152
+ stop_refreshing = 1;
153
+ $('.mainchart_play_button').button('pause');
154
+ }
155
+
156
+ function setMainChartPlay(p) {
157
+ if(!mainchart) return;
158
+
159
+ if(p == 'toggle') {
160
+ if(stop_refreshing) p = 'play';
161
+ else p = 'pause';
162
+ }
163
+
164
+ if(p == 'play') {
165
+ mainchart.chartOptions.explorer = null;
166
+ playGraphs();
167
+ }
168
+ else {
169
+ mainchart.chartOptions.explorer = {
170
+ 'axis': 'horizontal',
171
+ 'maxZoomOut': 1,
172
+ };
173
+ mainchart.last_updated = 0;
174
+ refreshChart(mainchart, pauseGraphs);
175
+ }
176
+ last_main_chart_play = p;
177
+ }
178
179
// refresh the main chart
180
// make sure it gets updated frequently
@@ -138,6 +191,9 @@
191
mainchart.points_to_show = MAINCHART_MAX_TIME_TO_SHOW / mainchart.group;
192
193
if(!refreshChart(mainchart, triggerRefresh)) triggerRefresh();
194
+
195
+ // FIXME for controlled charts
196
+ // showChartWithRange(mainchart);
197
}
198
199
function screenWidth() {
@@ -176,6 +232,8 @@
232
c.last_updated = 0;
233
}
234
});
235
+
236
+ playGraphs();
237
}
238
239
// load the charts from the server
@@ -293,6 +351,8 @@
351
// refresh the proper chart
352
var timeout;
353
function chartsRefresh() {
354
+ if(stop_refreshing) return;
355
+
356
if(timeout) {
357
clearTimeout(timeout);
358
timeout = null;
@@ -325,7 +385,7 @@
385
document.getElementById('maingraph_container').style.display = 'block';
386
document.getElementById('thumbgraphs_container').style.display = 'none';
387
328
- chartsRefresh();
388
+ playGraphs();
389
}
390
391
function showThumbGraphs() {
@@ -341,7 +401,7 @@
401
mainchart = null;
402
}
403
344
- chartsRefresh();
404
+ playGraphs();
405
}
406
407
</script>
@@ -380,11 +440,23 @@
440
<tr><td>
441
<div class="maingraph">
442
<table>
383
- <tr><td><div class="maingraph" id="maingraph"></div></td></tr>
443
+ <tr><td>
444
+ <div class="maingraph" id="maingraph"></div>
445
+ </td></tr>
446
<tr><td align="center">
447
<div class="btn-group">
448
<form id="mainchartform">
387
- <div class="btn-group btn-group-xs" data-toggle="buttons">
449
+ <div class="btn-group btn-group-xs" data-toggle="buttons" >
450
+ <button type="button" class="btn btn-primary mainchart_play_button" data-toggle="tooltip" title=" click <span class='glyphicon glyphicon-play'></span> to have the graph auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graph. When paused the graph can be zoomed and panned horizontally." data-play-text="<span class='glyphicon glyphicon-pause'></span>" data-pause-text="<span class='glyphicon glyphicon-play'></span>" onClick="setMainChartPlay('toggle');">
451
+ <span class="glyphicon glyphicon-pause"></span>
452
+ </button>
453
+ </div>
454
+ <div class="btn-group btn-group-xs" data-toggle="buttons" >
455
+ <button type="button" class="btn btn-primary mainchart_avg_button" data-toggle="tooltip" title="use the maximum ( <span class='glyphicon glyphicon-signal'></span> ) or the average ( <span class='glyphicon glyphicon-align-justify'></span> ) value of grouped points" data-max-text="<span class='glyphicon glyphicon-signal'></span>" data-average-text="<span class='glyphicon glyphicon-align-justify'></span>" onClick="setMainChartGroupMethod('toggle');">
456
+ <span class="glyphicon glyphicon-signal"></span>
457
+ </button>
458
+ </div>
459
+<!-- <div class="btn-group btn-group-xs" data-toggle="buttons">
460
<label class="btn btn-primary" data-toggle="tooltip" title="show the MAX point among all points grouped">
461
<input type="radio" name="groupmethod" id="groupmax" onChange="setMainChartGroupMethod('max');">
462
<span class="glyphicon glyphicon-signal"></span>
@@ -394,7 +466,7 @@
466
<span class="glyphicon glyphicon-align-justify"></span>
467
</label>
468
</div>
397
- <div class="btn-group btn-group-xs" data-toggle="buttons" >
469
+--> <div class="btn-group btn-group-xs" data-toggle="buttons" >
470
<label class="btn btn-primary" data-toggle="tooltip" title="do not group points, show the raw data">
471
<input type="radio" name="group" id="group1" onChange="setMainChartGroup(1);">1
472
</label>
@@ -426,6 +498,11 @@
498
</label>
499
</div>
500
<div class="btn-group btn-group-xs" data-toggle="buttons" >
501
+ <button type="button" class="btn btn-primary mainchart_max_button" data-toggle="tooltip" title="maximized ( <span class='glyphicon glyphicon-fullscreen'></span> ) or normal ( <span class='glyphicon glyphicon-resize-small'></span> ) view of the graph" data-maximized-text="<span class='glyphicon glyphicon-resize-small'></span>" data-normal-text="<span class='glyphicon glyphicon-fullscreen'></span>" onClick="setMainChartMax('toggle');">
502
+ <span class="glyphicon glyphicon-fullscreen"></span>
503
+ </button>
504
+ </div>
505
+<!-- <div class="btn-group btn-group-xs" data-toggle="buttons" >
506
<label class="btn btn-primary" data-toggle="tooltip" title="NORMAL chart size">
507
<input type="radio" name="chartmax" id="chartnormal" onChange="setMainChartMax('normal');">
508
<span class="glyphicon glyphicon-resize-small"></span>
@@ -435,7 +512,7 @@
512
<span class="glyphicon glyphicon-fullscreen"></span>
513
</label>
514
</div>
438
- </form>
515
+--> </form>
516
</div>
517
</td></tr>
518
</table>
@@ -468,7 +545,7 @@
545
$(document).ready(function(){
546
document.getElementById('splash').height = $(window).height();
547
471
- $('[data-toggle="tooltip"]').tooltip({'placement': 'top', 'container': 'body'});
548
+ $('[data-toggle="tooltip"]').tooltip({'placement': 'top', 'container': 'body', 'html': true});
549
});
550
551
</script>
web/netdata.js
+109
-5
@@ -2,7 +2,8 @@
2
if(!window.console){ window.console = {log: function(){} }; }
3
4
// Load the Visualization API and the piechart package.
5
-google.load('visualization', '1', {'packages':['corechart']});
5
+google.load('visualization', '1.1', {'packages':['corechart']});
6
+google.load('visualization', '1.1', {'packages':['controls']});
7
8
function canChartBeRefreshed(chart) {
9
// is it enabled?
@@ -23,9 +24,7 @@ function canChartBeRefreshed(chart) {
24
return true;
25
}
26
26
-function refreshChart(chart, doNext) {
27
- if(canChartBeRefreshed(chart) == false) return false;
28
-
27
+function generateChartURL(chart) {
28
// build the data URL
29
var url = chart.url;
30
url += chart.points_to_show?chart.points_to_show.toString():"all";
@@ -34,8 +33,14 @@ function refreshChart(chart, doNext) {
33
url += "/";
34
url += chart.group_method?chart.group_method:"average";
35
36
+ return url;
37
+}
38
+
39
+function refreshChart(chart, doNext) {
40
+ if(canChartBeRefreshed(chart) == false) return false;
41
+
42
$.ajax({
38
- url: url,
43
+ url: generateChartURL(chart),
44
dataType:"json",
45
cache: false
46
})
@@ -76,6 +81,105 @@ function refreshChart(chart, doNext) {
81
return true;
82
}
83
84
+/*
85
+function showChartWithRange(chart) {
86
+ var oldgroup = chart.group;
87
+ var oldpoints = chart.points_to_show;
88
+ chart.group = 1;
89
+ chart.points_to_show = 0; // all
90
+
91
+ $.ajax({
92
+ url: generateChartURL(chart),
93
+ dataType:"json",
94
+ cache: false
95
+ })
96
+ .done(function(jsondata) {
97
+ chart.jsondata = jsondata;
98
+
99
+ chart.control_div = chart.div + "_control";
100
+ chart.chart_div = chart.div + "_chart";
101
+
102
+ var div = document.getElementById(chart.div);
103
+ div.innerHTML = "<div class=\"maingraph\" id=\"" + chart.chart_div + "\"></div><div class=\"maingraph\" id=\"" + chart.control_div + "\"></div>";
104
+ //div.width = chart.chartOptions.width;
105
+ //div.height = chart.chartOptions.height;
106
+
107
+ console.log(chart.div);
108
+ chart.dashboard = new google.visualization.Dashboard(div);
109
+ console.log('dashboard ok');
110
+ console.log(chart.dashboard);
111
+
112
+ chart.data = new google.visualization.DataTable(chart.jsondata);
113
+ var range = chart.data.getColumnRange(0);
114
+
115
+ chart.control = new google.visualization.ControlWrapper({
116
+ 'controlType': 'ChartRangeFilter',
117
+ 'containerId': chart.control_div,
118
+ 'options': {
119
+ // Filter by the date axis.
120
+ 'filterColumnIndex': 0,
121
+ 'ui': {
122
+ 'chartType': 'AreaChart',
123
+ 'chartOptions': {
124
+ 'height': chart.chartOptions.height * 0.15,
125
+ 'width': chart.chartOptions.width,
126
+ 'chartArea': {'width': "90%"},
127
+ 'hAxis': {'baselineColor': 'none'}
128
+ },
129
+
130
+ //'chartView': {
131
+ // 'columns': [0, 1]
132
+ //},
133
+
134
+ // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
135
+ //'minRangeSize': 86400000
136
+ }
137
+ },
138
+
139
+ // Initial range: 2012-02-09 to 2012-03-20.
140
+ 'state': {'range': {'start': range.min, 'end': range.max}}
141
+ });
142
+ console.log('control ok');
143
+ console.log(chart.control);
144
+
145
+ var columns = new Array();
146
+ var i;
147
+ for (i = 0; i < chart.data.getNumberOfColumns(); i++)
148
+ columns[i] = i;
149
+
150
+ columns[0] = {
151
+ 'calc': function(dataTable, rowIndex) {
152
+ return dataTable.getFormattedValue(rowIndex, 0);
153
+ },
154
+ 'type': 'string'
155
+ };
156
+
157
+
158
+ chart.chartOptions.height = chart.chartOptions.height * 0.85;
159
+ chart.chartOptions.chartArea = {'height': "80%", 'width': "90%"};
160
+ chart.chartOptions.legend = 'none';
161
+
162
+ chart.chartwrap = new google.visualization.ChartWrapper({
163
+ 'chartType': chart.chartType,
164
+ 'containerId': chart.chart_div,
165
+ 'options': chart.chartOptions,
166
+ });
167
+ console.log('chart ok');
168
+ console.log(chart.chartwrap);
169
+
170
+ chart.dashboard.bind(chart.control, chart.chartwrap);
171
+ console.log('bind ok');
172
+
173
+ chart.dashboard.draw(chart.data);
174
+ console.log('draw ok');
175
+
176
+ // restore what we changed
177
+ chart.group = oldgroup;
178
+ chart.points_to_show = oldpoints;
179
+ });
180
+}
181
+*/
182
+
183
// loadCharts()
184
// fetches all the charts from the server
185
// returns an array of objects, containing all the server metadata