incomplete support for controlled mainchart
Costa Tsaousis (ktsaou) committed
Apr 22, 2014 at 00:21 UTC
8b1de466458e8ee5c41c07fbd6625a207d6762e1
3 files changed
+111
-18
netdata.start
+3
@@ -44,6 +44,9 @@ else
44
gcc -Wall -O3 -o netdata netdata.c -lpthread -lz || exit 1
45
fi
46
47
+NETDATA_TITLE_DEFAULT=
48
+NETDATA_PRIORITY_DEFAULT=
49
+
50
# exporting NETDATA variables to netdata
51
export `set 2>&1 | grep ^NETDATA_TITLE_ `
52
export `set 2>&1 | grep ^NETDATA_PRIORITY_ `
web/index.html
+100
-17
@@ -33,8 +33,10 @@
33
var TARGET_THUMB_GRAPH_WIDTH = 500; // chart width will range from 0.5 to 1.5 of that
34
var MINIMUM_THUMB_GRAPH_WIDTH = 400; // chart will generally try to be wider than that
35
var TARGET_THUMB_GRAPH_HEIGHT = 220;
36
- var MAINCHART_MAX_TIME_TO_SHOW = 1200;
36
+ var MAINCHART_MAX_TIME_TO_SHOW = 600;
37
var THUMBS_MAX_TIME_TO_SHOW = 600;
38
+ var MAINCHART_CONTROL_HEIGHT = 100;
39
+ var MAINCHART_CONTROL_DIVISOR = 3;
40
41
var MODE_THUMBS = 1;
42
var MODE_MAIN = 2;
@@ -115,16 +117,21 @@
117
if(mainchart) cleanThisChart(mainchart);
118
119
mainchart = $.extend(true, {}, c);
120
+ var tempchart = $.extend(true, {}, mainchart);
121
122
mainchart.chart = null;
123
mainchart.chartOptions.width = screenWidth();
121
- mainchart.chartOptions.height = $(window).height() - 150;
124
+ mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT;
125
if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
126
127
mainchart.group = 2;
128
mainchart.div = 'maingraph';
129
mainchart.last_updated = 0;
130
131
+ mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
132
+ if(mainchart.points_to_show * mainchart.group > MAINCHART_MAX_TIME_TO_SHOW)
133
+ mainchart.points_to_show = MAINCHART_MAX_TIME_TO_SHOW / mainchart.group;
134
+
135
if(mainchart.chartOptions.isStacked) mainchart.group = 5;
136
//mainchart.chartOptions.titlePosition = 'none';
137
mainchart.chartOptions.explorer = null;
@@ -138,12 +145,86 @@
145
146
$('#group' + mainchart.group).trigger('click');
147
141
- switchToMainGraph();
148
+ mainchart.dashboard = new google.visualization.Dashboard(document.getElementById('maingraph_dashboard'));
149
+ mainchart.control = new google.visualization.ControlWrapper({
150
+ controlType: 'ChartRangeFilter',
151
+ containerId: 'maingraph_control',
152
+ options: {
153
+ filterColumnIndex: 0,
154
+ ui: {
155
+ chartType: mainchart.chartType,
156
+ chartOptions: {
157
+ isStacked: mainchart.chartOptions.isStacked,
158
+ width: mainchart.chartOptions.width,
159
+ height: MAINCHART_CONTROL_HEIGHT,
160
+ chartArea: {'width': '90%'},
161
+ hAxis: {'baselineColor': 'none'}
162
+ },
163
+ minRangeSize: MAINCHART_MAX_TIME_TO_SHOW / mainchart.update_every * 1000,
164
+ }
165
+ },
166
+ });
167
+ mainchart.hiddenchart = new google.visualization.ChartWrapper({
168
+ chartType: mainchart.chartType,
169
+ containerId: 'maingraph_hidden',
170
+ options: {
171
+ isStacked: mainchart.chartOptions.isStacked,
172
+ width: mainchart.chartOptions.width,
173
+ height: mainchart.chartOptions.height,
174
+ //chartArea: {'height': '80%', 'width': '100%'},
175
+ //hAxis: {'slantedText': false},
176
+ //legend: {'position': 'none'}
177
+ },
178
+ });
179
+
180
+ // load the data for the control and the hidden chart
181
+ tempchart.points_to_show = Math.round(mainchart.chartOptions.width / MAINCHART_CONTROL_DIVISOR);
182
+ tempchart.after = tempchart.first_entry_t;
183
+ tempchart.before = Math.round(new Date().getTime() / 1000);
184
+ if(tempchart.entries * tempchart.update_every > tempchart.before - tempchart.after)
185
+ tempchart.after = tempchart.before - tempchart.entries * tempchart.update_every;
186
+ tempchart.group = Math.round((tempchart.before - tempchart.after) / tempchart.points_to_show);
187
+
188
+ $.ajax({
189
+ url: generateChartURL(tempchart),
190
+ dataType:"json",
191
+ cache: false
192
+ })
193
+ .done(function(jsondata) {
194
+ if(!jsondata || jsondata.length == 0) return;
195
+
196
+ mainchart.control_data = new google.visualization.DataTable(jsondata);
197
+
198
+ google.visualization.events.addListener(mainchart.control, 'ready', mainchartControlReadyEvent);
199
+ mainchart.dashboard.bind(mainchart.control, mainchart.hiddenchart);
200
+ mainchart.dashboard.draw(mainchart.control_data);
201
+
202
+ switchToMainGraph();
203
+ });
204
+ }
205
+
206
+ function mainchartControlReadyEvent() {
207
+ google.visualization.events.addListener(mainchart.control, 'statechange', mainchartControlStateHandler);
208
+ }
209
+
210
+ function mainchartControlStateHandler() {
211
+ // setMainChartPlay('pause');
212
+
213
+ var state = mainchart.control.getState();
214
+ mainchart.after = Math.round(state.range.start.getTime() / 1000);
215
+ mainchart.before = Math.round(state.range.end.getTime() / 1000);
216
+
217
+ mainchart.points_to_show = mainchart.chartOptions.width / 2;
218
+ mainchart.group = Math.round((mainchart.before - mainchart.after) / mainchart.points_to_show);
219
+ console.log('group = ' + mainchart.group + ', points_to_show = ' + mainchart.position);
220
+
221
+ mainchart.last_updated = 0;
222
}
223
224
function initMainChartIndex(i) {
225
if(mode == MODE_GROUP_THUMBS)
226
initMainChart(group_charts[i]);
227
+
228
else if(mode == MODE_THUMBS)
229
initMainChart(mycharts[i]);
230
}
@@ -213,20 +294,21 @@
294
}
295
296
if(p == 'play') {
216
- mainchart.chartOptions.explorer = null;
297
+ //mainchart.chartOptions.explorer = null;
298
+ mainchart.after = 0;
299
+ mainchart.before = 0;
300
playGraphs();
301
}
302
else {
220
- mainchart.chartOptions.explorer = {
221
- 'axis': 'horizontal',
222
- 'maxZoomOut': 1,
223
- };
224
- mainchart.last_updated = 0;
303
+ //mainchart.chartOptions.explorer = {
304
+ // 'axis': 'horizontal',
305
+ // 'maxZoomOut': 1,
306
+ //};
307
+ //mainchart.last_updated = 0;
308
226
- if(!refreshChart(mainchart, pauseGraphs))
227
- pauseGraphs();
309
+ //if(!refreshChart(mainchart, pauseGraphs))
310
+ pauseGraphs();
311
}
229
- last_main_chart_play = p;
312
}
313
314
@@ -398,11 +480,6 @@
480
return;
481
}
482
401
- mainchart.points_to_show = Math.round(mainchart.entries / mainchart.group) - 1;
402
-
403
- if(mainchart.points_to_show * mainchart.group > MAINCHART_MAX_TIME_TO_SHOW)
404
- mainchart.points_to_show = MAINCHART_MAX_TIME_TO_SHOW / mainchart.group;
405
-
483
if(!refreshChart(mainchart, triggerRefresh))
484
triggerRefresh();
485
}
@@ -804,6 +881,10 @@
881
<table>
882
<tr><td>
883
<div class="maingraph" id="maingraph"></div>
884
+ <div id="maingraph_dashboard">
885
+ <div class="maingraph" id="maingraph_hidden" style="display: none"></div>
886
+ <div class="maingraph" id="maingraph_control"></div>
887
+ </div>
888
</td></tr>
889
<tr><td align="center">
890
<div class="btn-group">
@@ -918,6 +999,8 @@
999
</div>
1000
1001
<script type='text/javascript'>
1002
+ google.load('visualization', '1.1', {packages: ['controls']});
1003
+
1004
$(document).ready(function(){
1005
document.getElementById('splash').height = $(window).height();
1006
web/netdata.js
+8
-1
@@ -32,6 +32,11 @@ function generateChartURL(chart) {
32
url += chart.group?chart.group.toString():"1";
33
url += "/";
34
url += chart.group_method?chart.group_method:"average";
35
+ url += "/";
36
+ url += chart.after?chart.after.toString():"0";
37
+ url += "/";
38
+ url += chart.before?chart.before.toString():"0";
39
+ url += "/";
40
41
return url;
42
}
@@ -211,7 +216,9 @@ function loadCharts(base_url, doNext) {
216
json.charts[i].chart = null;
217
json.charts[i].jsondata = null;
218
json.charts[i].datatable = null;
214
-
219
+ json.charts[i].before = 0;
220
+ json.charts[i].after = 0;
221
+
222
// if the user has given a title, use it
223
if(json.charts[i].usertitle) json.charts[i].title = json.charts[i].usertitle;
224