support the new dynamic web site
Costa Tsaousis (ktsaou) committed
Mar 29, 2014 at 22:41 UTC
2d7d3b3e86a0a0f250429bd107c61c7de2f0f06f
1 file changed
+64
-57
web/netdata.js
+64
-57
@@ -9,18 +9,16 @@ function refreshChart(chart) {
9
10
if(chart.chart != null) {
11
if(chart.chart.getSelection()[0]) return;
12
-
13
- if(chart.refreshCount >= 9999999) {
14
- chart.jsondata = null;
15
- chart.datatable = null;
16
- chart.chart.clearChart();
17
- chart.chart = null;
18
- chart.refreshCount = 1;
19
- }
12
}
13
14
+ var url = chart.url;
15
+ url += chart.points_to_show?chart.points_to_show.toString():"all";
16
+ url += "/";
17
+ url += chart.group?chart.group.toString():"1";
18
+ url += "/";
19
+ url += chart.group_method?chart.group_method:"average";
20
chart.jsondata = $.ajax({
23
- url: chart.url,
21
+ url: url,
22
dataType:"json",
23
async: false,
24
cache: false
@@ -31,12 +29,6 @@ function refreshChart(chart) {
29
// Create our data table out of JSON data loaded from server.
30
chart.datatable = new google.visualization.DataTable(chart.jsondata);
31
34
- // Instantiate and draw our chart, passing in some options.
35
- if(!chart.chart) {
36
- console.log('Creating new chart for ' + chart.url);
37
- chart.chart = new google.visualization.AreaChart(document.getElementById(chart.div));
38
- }
39
-
32
var width = chart.width;
33
var height = chart.height;
34
@@ -63,57 +55,67 @@ function refreshChart(chart) {
55
focusTarget: 'category',
56
lineWidth: (isStacked)?1:2,
57
areaOpacity: (isStacked)?1.0:0.3,
58
+ explorer: (chart.explorer)?true:false,
59
// animation: {duration: 1000, easing: 'inAndOut'},
60
};
61
62
+ var thumb_options = {
63
+ // legend: { position: 'none' },
64
+ // tooltip: { trigger: 'none' },
65
+ enableInteractivity: false,
66
+ //chartArea: {left: 0, top: 0, width: chart.width, height: chart.height},
67
+ };
68
+ if(chart.thumbnail) $.extend(options, thumb_options);
69
+
70
+ // cleanup once every 100 updates
71
+ if(chart.chart && chart.refreshCount > 100) {
72
+ chart.chart.clearChart();
73
+ chart.chart = null;
74
+ }
75
+
76
+ // Instantiate and draw our chart, passing in some options.
77
+ if(!chart.chart) {
78
+ console.log('Creating new chart for ' + chart.url);
79
+ chart.chart = new google.visualization.AreaChart(document.getElementById(chart.div));
80
+ }
81
+
82
if(chart.chart) chart.chart.draw(chart.datatable, options);
83
else console.log('Cannot create chart for ' + chart.url);
84
}
85
73
-function cloneJSON(obj) {
74
- // basic type deep copy
75
- if (obj === null || obj === undefined || typeof obj !== 'object') {
76
- return obj
77
- }
78
- // array deep copy
79
- if (obj instanceof Array) {
80
- var cloneA = [];
81
- for (var i = 0; i < obj.length; ++i) {
82
- cloneA[i] = cloneJSON(obj[i]);
83
- }
84
- return cloneA;
85
- }
86
- // object deep copy
87
- var cloneO = {};
88
- for (var i in obj) {
89
- cloneO[i] = cloneJSON(obj[i]);
90
- }
91
- return cloneO;
92
-}
86
+// loadCharts()
87
+// fetches all the charts from the server
88
+// returns an array of objects, containing all the server metadata
89
+// (not the values of the graphs - just the info about the graphs)
90
91
function loadCharts() {
92
var mycharts = new Array();
93
97
- $.getJSON('/all.json', function(json) {
98
- $.each(json.charts, function(i, value) {
99
- mycharts[i] = $.extend(true, {}, value);
100
-
101
- mycharts[i].div = mycharts[i].name.replace(/\./g,"_");
102
- mycharts[i].div = mycharts[i].div.replace(/\-/g,"_");
103
- mycharts[i].div = mycharts[i].div + "_div";
104
-
105
- mycharts[i].width = 0;
106
- mycharts[i].height = 0;
107
- mycharts[i].refreshCount = 0;
94
+ $.ajax({
95
+ url: '/all.json',
96
+ async: false,
97
+ dataType: 'json',
98
+ success: function (json) { mycharts = json.charts; }
99
+ });
100
109
- mycharts[i].chart = null;
110
- mycharts[i].jsondata = null;
111
- mycharts[i].datatable = null;
112
- });
101
+ $.each(mycharts, function(i, value) {
102
+ mycharts[i].div = mycharts[i].name.replace(/\./g,"_");
103
+ mycharts[i].div = mycharts[i].div.replace(/\-/g,"_");
104
+ mycharts[i].div = mycharts[i].div + "_div";
105
+
106
+ mycharts[i].width = 0;
107
+ mycharts[i].height = 0;
108
+ mycharts[i].thumbnail = false;
109
+ mycharts[i].refreshCount = 0;
110
+ mycharts[i].group = 1;
111
+ mycharts[i].points_to_show = 0; // all
112
+ mycharts[i].group_method = "average";
113
+
114
+ mycharts[i].chart = null;
115
+ mycharts[i].jsondata = null;
116
+ mycharts[i].datatable = null;
117
});
118
115
- console.log("all: " + mycharts.length)
116
- console.log(mycharts);
119
return mycharts;
120
};
121
@@ -123,17 +125,22 @@ function addChart(name, div, width, height, jsonurl, title, vtitle) {
125
126
console.log('Creating new objects for chart ' + name);
127
charts[i] = [];
126
- charts[i].chart = null;
127
- charts[i].jsondata = null;
128
- charts[i].datatable = null;
128
+
129
charts[i].name = name;
130
- charts[i].div = div;
131
- charts[i].url = jsonurl;
130
charts[i].title = title;
131
charts[i].vtitle = vtitle;
132
+ charts[i].url = jsonurl;
133
+
134
+ charts[i].div = div;
135
+
136
charts[i].width = width;
137
charts[i].height = height;
138
charts[i].refreshCount = 0;
139
+ charts[i].thumbnail = false;
140
+
141
+ charts[i].chart = null;
142
+ charts[i].jsondata = null;
143
+ charts[i].datatable = null;
144
}
145
146
var charts_last_drawn = 999999999;