cleanup: dos2unix
Signed-off-by: Alon Bar-Lev <alon.barlev@gmail.com>
Alon Bar-Lev committed
Nov 30, 2015 at 00:32 UTC
9f3c17904982fa7a051baf38526350a60b8bdcc4
3 files changed
+1421
-1421
web/dashboard.html
+294
-294
@@ -1,294 +1,294 @@
1
-<html>
2
-<head>
3
- <title>NetData Dashboard</title>
4
- <style type="text/css">
5
- html{font-family:sans-serif;}
6
- </style>
7
-</head>
8
-<body>
9
-
10
-<h1>NetData Custom Dashboard</h1>
11
-
12
-This is a template for building custom dashboards. To build a dashboard you just do this:
13
-
14
-<pre>
15
-<html>
16
-<body>
17
- <div data-netdata="system.processes"
18
- data-chart-library="dygraph"
19
- data-width="600"
20
- data-height="200"
21
- data-after="-600"
22
- </div>
23
-</body>
24
-<script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script>
25
-</html>
26
-</pre>
27
-
28
-<ul>
29
- <li>You can host your dashboard anywhere.</li>
30
- <li>You can add as many charts as you like.</li>
31
- <li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li>
32
- <li>You can use different chart libraries on the same page: <b>peity</b>, <b>sparkline</b>, <b>dygraph</b>, <b>google</b> (requires some more lines in your html page - view source this one), <b>morris</b></li>
33
- <li>You can customize each chart to your preferences. For each chart library most of their attributes can be given in <b>data-</b> attributes.</li>
34
- <li>Each chart can have each own duration - it is controlled with the <b>data-after</b> attribute to give that many seconds of data.</li>
35
- <li>Depending on the width of the chart and <b>data-after</b> attribute, netdata will automatically refresh the chart when it needs to be updated. For example giving 600 pixels for width for -600 seconds of data, using a chart library that needs 3 pixels per point, will yeld in a chart updated once every 3 seconds.</li>
36
-</ul>
37
-
38
- <table border="0" cellpadding="5" cellspacing="5">
39
- <tr>
40
- <th width="600">
41
- System Processes - Line Chart
42
- </th>
43
- <th width="600">
44
- System ipv4 - Area Chart
45
- </th>
46
- <th width="600">
47
- System CPU - Stacked Area Chart
48
- </th>
49
- </tr>
50
- <tr><td colspan="3" align="center"> </td></tr>
51
- <tr><th colspan="3" align="center"><hr>Peity Charts</th></tr>
52
- <tr><td colspan="3" align="center">
53
- Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing.
54
- Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show
55
- the total of all dimensions.
56
- </td></tr>
57
- <tr>
58
- <td width="600" align="center">
59
- <div data-netdata="system.processes"
60
- data-chart-library="peity"
61
- data-width="600"
62
- data-height="30"
63
- data-after="-600"
64
- data-dt-element-name="time11"
65
- </div>
66
- </td>
67
- <td width="600" align="center">
68
- <div data-netdata="system.ipv4"
69
- data-chart-library="peity"
70
- data-width="600"
71
- data-height="30"
72
- data-after="-600"
73
- data-dt-element-name="time12"
74
- </div>
75
- </td>
76
- <td width="600" align="center">
77
- <div data-netdata="system.cpu"
78
- data-chart-library="peity"
79
- data-width="600"
80
- data-height="30"
81
- data-after="-600"
82
- data-dt-element-name="time13"
83
- </div>
84
- </td>
85
- </tr>
86
- <tr>
87
- <td>rendered in <span id="time11">X</span> ms</td>
88
- <td>rendered in <span id="time12">X</span> ms</td>
89
- <td>rendered in <span id="time13">X</span> ms</td>
90
- </tr>
91
- <tr><td colspan="3" align="center"> </td></tr>
92
- <tr><th colspan="3" align="center"><hr>Sparkline Charts</th></tr>
93
- <tr><td colspan="3" align="center">
94
- Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.
95
- Sparkline charts stretch the values to show the variations between values in more detail.
96
- They also have mouse-hover support.
97
- <br/>
98
- Sparklines are fantastic. You can inline charts in text. For example this
99
- <div style="display: inline; position: relative;"
100
- data-netdata="system.cpu"
101
- data-chart-library="sparkline"
102
- data-width="60"
103
- data-height="15"
104
- data-after="-30"
105
- </div> is my current cpu usage,
106
- <br/>
107
- while this
108
- <div style="display: inline; position: relative;"
109
- data-netdata="netdata.net"
110
- data-dimensions="out"
111
- data-chart-library="sparkline"
112
- data-width="60"
113
- data-height="15"
114
- data-after="-30"
115
- </div> is the bandwidth my netdata server is currently transmitting and this
116
-
117
- <div style="display: inline; position: relative;"
118
- data-netdata="netdata.requests"
119
- data-chart-library="sparkline"
120
- data-width="60"
121
- data-height="15"
122
- data-after="-30"
123
- </div> is the requests/sec it serves.
124
- </td></tr>
125
- <tr>
126
- <td width="600" align="center">
127
- <div data-netdata="system.processes"
128
- data-chart-library="sparkline"
129
- data-width="600"
130
- data-height="30"
131
- data-after="-600"
132
- data-dt-element-name="time21"
133
- </div>
134
- </td>
135
- <td width="600" align="center">
136
- <div data-netdata="system.ipv4"
137
- data-chart-library="sparkline"
138
- data-width="600"
139
- data-height="30"
140
- data-after="-600"
141
- data-dt-element-name="time22"
142
- </div>
143
- </td>
144
- <td width="600" align="center">
145
- <div data-netdata="system.cpu"
146
- data-chart-library="sparkline"
147
- data-width="600"
148
- data-height="30"
149
- data-after="-600"
150
- data-dt-element-name="time23"
151
- </div>
152
- </td>
153
- </tr>
154
- <tr>
155
- <td>rendered in <span id="time21">X</span> ms</td>
156
- <td>rendered in <span id="time22">X</span> ms</td>
157
- <td>rendered in <span id="time23">X</span> ms</td>
158
- </tr>
159
- <tr><td colspan="3" align="center"> </td></tr>
160
- <tr><th colspan="3" align="center"><hr>Dygraph Charts</th></tr>
161
- <tr><td colspan="3" align="center">
162
- The fastest charting engine that can chart complete charts (not just sparklines).
163
- The charts are zoomable (drag their contents to zoom-in, double click to zoom-out).
164
- For the moment zooming is just on the presentation layer (the data do not become more detailed when you zoom).
165
- </td></tr>
166
- <tr>
167
- <td width="600" align="center">
168
- <div data-netdata="system.processes"
169
- data-chart-library="dygraph"
170
- data-width="600"
171
- data-height="200"
172
- data-after="-600"
173
- data-dt-element-name="time31"
174
- </div>
175
- </td>
176
- <td width="600" align="center">
177
- <div data-netdata="system.ipv4"
178
- data-chart-library="dygraph"
179
- data-width="600"
180
- data-height="200"
181
- data-after="-600"
182
- data-dt-element-name="time32"
183
- </div>
184
- </td>
185
- <td width="600" align="center">
186
- <div data-netdata="system.cpu"
187
- data-chart-library="dygraph"
188
- data-width="600"
189
- data-height="200"
190
- data-after="-600"
191
- data-dt-element-name="time33"
192
- </div>
193
- </td>
194
- </tr>
195
- <tr>
196
- <td>rendered in <span id="time31">X</span> ms</td>
197
- <td>rendered in <span id="time32">X</span> ms</td>
198
- <td>rendered in <span id="time33">X</span> ms</td>
199
- </tr>
200
- <tr><td colspan="3" align="center"> </td></tr>
201
- <tr><th colspan="3" align="center"><hr>Google Charts</th></tr>
202
- <tr><td colspan="3" align="center">
203
- NetData was originaly developed with Google Charts.
204
- NetData is a complete Google Visualization API provider.
205
- </td></tr>
206
- <tr>
207
- <td width="600" align="center">
208
- <div data-netdata="system.processes"
209
- data-chart-library="google"
210
- data-width="600"
211
- data-height="200"
212
- data-after="-600"
213
- data-dt-element-name="time51"
214
- </div>
215
- </td>
216
- <td width="600" align="center">
217
- <div data-netdata="system.ipv4"
218
- data-chart-library="google"
219
- data-width="600"
220
- data-height="200"
221
- data-after="-600"
222
- data-dt-element-name="time52"
223
- </div>
224
- </td>
225
- <td width="600" align="center">
226
- <div data-netdata="system.cpu"
227
- data-chart-library="google"
228
- data-width="600"
229
- data-height="200"
230
- data-after="-600"
231
- data-dt-element-name="time53"
232
- </div>
233
- </td>
234
- </tr>
235
- <tr>
236
- <td>rendered in <span id="time51">X</span> ms</td>
237
- <td>rendered in <span id="time52">X</span> ms</td>
238
- <td>rendered in <span id="time53">X</span> ms</td>
239
- </tr>
240
- <tr><td colspan="3" align="center"> </td></tr>
241
- <tr><th colspan="3" align="center"><hr>Morris Charts</th></tr>
242
- <tr><td colspan="3" align="center">
243
- Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to lower their detail to get acceptable results.
244
- And they have issues with negative numbers in area charts...
245
- </td></tr>
246
- <tr>
247
- <td width="600" align="center">
248
- <div data-netdata="system.processes"
249
- data-chart-library="morris"
250
- data-width="600"
251
- data-height="200"
252
- data-after="-600"
253
- data-dt-element-name="time41"
254
- </div>
255
- </td>
256
- <td width="600" align="center">
257
- <div data-netdata="system.ipv4"
258
- data-chart-library="morris"
259
- data-width="600"
260
- data-height="200"
261
- data-after="-600"
262
- data-dt-element-name="time42"
263
- </div>
264
- </td>
265
- <td width="600" align="center">
266
- <div data-netdata="system.cpu"
267
- data-chart-library="morris"
268
- data-width="600"
269
- data-height="200"
270
- data-after="-600"
271
- data-dt-element-name="time43"
272
- </div>
273
- </td>
274
- </tr>
275
- <tr>
276
- <td>rendered in <span id="time41">X</span> ms</td>
277
- <td>rendered in <span id="time42">X</span> ms</td>
278
- <td>rendered in <span id="time43">X</span> ms</td>
279
- </tr>
280
- </table>
281
-
282
-</body>
283
-</html>
284
- <!-- You can disable Google Visualization by commenting the following two lines -->
285
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
286
- <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>
287
-
288
- <!-- you can set your netdata server globally, by ucommenting this -->
289
- <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
290
- <!-- <script> netdataServer = "http://box:19999"; </script> -->
291
-
292
- <!-- load the dashboard manager - it will do the rest -->
293
- <script type="text/javascript" src="dashboard.js"></script>
294
-
1
+<html>
2
+<head>
3
+ <title>NetData Dashboard</title>
4
+ <style type="text/css">
5
+ html{font-family:sans-serif;}
6
+ </style>
7
+</head>
8
+<body>
9
+
10
+<h1>NetData Custom Dashboard</h1>
11
+
12
+This is a template for building custom dashboards. To build a dashboard you just do this:
13
+
14
+<pre>
15
+<html>
16
+<body>
17
+ <div data-netdata="system.processes"
18
+ data-chart-library="dygraph"
19
+ data-width="600"
20
+ data-height="200"
21
+ data-after="-600"
22
+ </div>
23
+</body>
24
+<script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script>
25
+</html>
26
+</pre>
27
+
28
+<ul>
29
+ <li>You can host your dashboard anywhere.</li>
30
+ <li>You can add as many charts as you like.</li>
31
+ <li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li>
32
+ <li>You can use different chart libraries on the same page: <b>peity</b>, <b>sparkline</b>, <b>dygraph</b>, <b>google</b> (requires some more lines in your html page - view source this one), <b>morris</b></li>
33
+ <li>You can customize each chart to your preferences. For each chart library most of their attributes can be given in <b>data-</b> attributes.</li>
34
+ <li>Each chart can have each own duration - it is controlled with the <b>data-after</b> attribute to give that many seconds of data.</li>
35
+ <li>Depending on the width of the chart and <b>data-after</b> attribute, netdata will automatically refresh the chart when it needs to be updated. For example giving 600 pixels for width for -600 seconds of data, using a chart library that needs 3 pixels per point, will yeld in a chart updated once every 3 seconds.</li>
36
+</ul>
37
+
38
+ <table border="0" cellpadding="5" cellspacing="5">
39
+ <tr>
40
+ <th width="600">
41
+ System Processes - Line Chart
42
+ </th>
43
+ <th width="600">
44
+ System ipv4 - Area Chart
45
+ </th>
46
+ <th width="600">
47
+ System CPU - Stacked Area Chart
48
+ </th>
49
+ </tr>
50
+ <tr><td colspan="3" align="center"> </td></tr>
51
+ <tr><th colspan="3" align="center"><hr>Peity Charts</th></tr>
52
+ <tr><td colspan="3" align="center">
53
+ Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing.
54
+ Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show
55
+ the total of all dimensions.
56
+ </td></tr>
57
+ <tr>
58
+ <td width="600" align="center">
59
+ <div data-netdata="system.processes"
60
+ data-chart-library="peity"
61
+ data-width="600"
62
+ data-height="30"
63
+ data-after="-600"
64
+ data-dt-element-name="time11"
65
+ </div>
66
+ </td>
67
+ <td width="600" align="center">
68
+ <div data-netdata="system.ipv4"
69
+ data-chart-library="peity"
70
+ data-width="600"
71
+ data-height="30"
72
+ data-after="-600"
73
+ data-dt-element-name="time12"
74
+ </div>
75
+ </td>
76
+ <td width="600" align="center">
77
+ <div data-netdata="system.cpu"
78
+ data-chart-library="peity"
79
+ data-width="600"
80
+ data-height="30"
81
+ data-after="-600"
82
+ data-dt-element-name="time13"
83
+ </div>
84
+ </td>
85
+ </tr>
86
+ <tr>
87
+ <td>rendered in <span id="time11">X</span> ms</td>
88
+ <td>rendered in <span id="time12">X</span> ms</td>
89
+ <td>rendered in <span id="time13">X</span> ms</td>
90
+ </tr>
91
+ <tr><td colspan="3" align="center"> </td></tr>
92
+ <tr><th colspan="3" align="center"><hr>Sparkline Charts</th></tr>
93
+ <tr><td colspan="3" align="center">
94
+ Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.
95
+ Sparkline charts stretch the values to show the variations between values in more detail.
96
+ They also have mouse-hover support.
97
+ <br/>
98
+ Sparklines are fantastic. You can inline charts in text. For example this
99
+ <div style="display: inline; position: relative;"
100
+ data-netdata="system.cpu"
101
+ data-chart-library="sparkline"
102
+ data-width="60"
103
+ data-height="15"
104
+ data-after="-30"
105
+ </div> is my current cpu usage,
106
+ <br/>
107
+ while this
108
+ <div style="display: inline; position: relative;"
109
+ data-netdata="netdata.net"
110
+ data-dimensions="out"
111
+ data-chart-library="sparkline"
112
+ data-width="60"
113
+ data-height="15"
114
+ data-after="-30"
115
+ </div> is the bandwidth my netdata server is currently transmitting and this
116
+
117
+ <div style="display: inline; position: relative;"
118
+ data-netdata="netdata.requests"
119
+ data-chart-library="sparkline"
120
+ data-width="60"
121
+ data-height="15"
122
+ data-after="-30"
123
+ </div> is the requests/sec it serves.
124
+ </td></tr>
125
+ <tr>
126
+ <td width="600" align="center">
127
+ <div data-netdata="system.processes"
128
+ data-chart-library="sparkline"
129
+ data-width="600"
130
+ data-height="30"
131
+ data-after="-600"
132
+ data-dt-element-name="time21"
133
+ </div>
134
+ </td>
135
+ <td width="600" align="center">
136
+ <div data-netdata="system.ipv4"
137
+ data-chart-library="sparkline"
138
+ data-width="600"
139
+ data-height="30"
140
+ data-after="-600"
141
+ data-dt-element-name="time22"
142
+ </div>
143
+ </td>
144
+ <td width="600" align="center">
145
+ <div data-netdata="system.cpu"
146
+ data-chart-library="sparkline"
147
+ data-width="600"
148
+ data-height="30"
149
+ data-after="-600"
150
+ data-dt-element-name="time23"
151
+ </div>
152
+ </td>
153
+ </tr>
154
+ <tr>
155
+ <td>rendered in <span id="time21">X</span> ms</td>
156
+ <td>rendered in <span id="time22">X</span> ms</td>
157
+ <td>rendered in <span id="time23">X</span> ms</td>
158
+ </tr>
159
+ <tr><td colspan="3" align="center"> </td></tr>
160
+ <tr><th colspan="3" align="center"><hr>Dygraph Charts</th></tr>
161
+ <tr><td colspan="3" align="center">
162
+ The fastest charting engine that can chart complete charts (not just sparklines).
163
+ The charts are zoomable (drag their contents to zoom-in, double click to zoom-out).
164
+ For the moment zooming is just on the presentation layer (the data do not become more detailed when you zoom).
165
+ </td></tr>
166
+ <tr>
167
+ <td width="600" align="center">
168
+ <div data-netdata="system.processes"
169
+ data-chart-library="dygraph"
170
+ data-width="600"
171
+ data-height="200"
172
+ data-after="-600"
173
+ data-dt-element-name="time31"
174
+ </div>
175
+ </td>
176
+ <td width="600" align="center">
177
+ <div data-netdata="system.ipv4"
178
+ data-chart-library="dygraph"
179
+ data-width="600"
180
+ data-height="200"
181
+ data-after="-600"
182
+ data-dt-element-name="time32"
183
+ </div>
184
+ </td>
185
+ <td width="600" align="center">
186
+ <div data-netdata="system.cpu"
187
+ data-chart-library="dygraph"
188
+ data-width="600"
189
+ data-height="200"
190
+ data-after="-600"
191
+ data-dt-element-name="time33"
192
+ </div>
193
+ </td>
194
+ </tr>
195
+ <tr>
196
+ <td>rendered in <span id="time31">X</span> ms</td>
197
+ <td>rendered in <span id="time32">X</span> ms</td>
198
+ <td>rendered in <span id="time33">X</span> ms</td>
199
+ </tr>
200
+ <tr><td colspan="3" align="center"> </td></tr>
201
+ <tr><th colspan="3" align="center"><hr>Google Charts</th></tr>
202
+ <tr><td colspan="3" align="center">
203
+ NetData was originaly developed with Google Charts.
204
+ NetData is a complete Google Visualization API provider.
205
+ </td></tr>
206
+ <tr>
207
+ <td width="600" align="center">
208
+ <div data-netdata="system.processes"
209
+ data-chart-library="google"
210
+ data-width="600"
211
+ data-height="200"
212
+ data-after="-600"
213
+ data-dt-element-name="time51"
214
+ </div>
215
+ </td>
216
+ <td width="600" align="center">
217
+ <div data-netdata="system.ipv4"
218
+ data-chart-library="google"
219
+ data-width="600"
220
+ data-height="200"
221
+ data-after="-600"
222
+ data-dt-element-name="time52"
223
+ </div>
224
+ </td>
225
+ <td width="600" align="center">
226
+ <div data-netdata="system.cpu"
227
+ data-chart-library="google"
228
+ data-width="600"
229
+ data-height="200"
230
+ data-after="-600"
231
+ data-dt-element-name="time53"
232
+ </div>
233
+ </td>
234
+ </tr>
235
+ <tr>
236
+ <td>rendered in <span id="time51">X</span> ms</td>
237
+ <td>rendered in <span id="time52">X</span> ms</td>
238
+ <td>rendered in <span id="time53">X</span> ms</td>
239
+ </tr>
240
+ <tr><td colspan="3" align="center"> </td></tr>
241
+ <tr><th colspan="3" align="center"><hr>Morris Charts</th></tr>
242
+ <tr><td colspan="3" align="center">
243
+ Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to lower their detail to get acceptable results.
244
+ And they have issues with negative numbers in area charts...
245
+ </td></tr>
246
+ <tr>
247
+ <td width="600" align="center">
248
+ <div data-netdata="system.processes"
249
+ data-chart-library="morris"
250
+ data-width="600"
251
+ data-height="200"
252
+ data-after="-600"
253
+ data-dt-element-name="time41"
254
+ </div>
255
+ </td>
256
+ <td width="600" align="center">
257
+ <div data-netdata="system.ipv4"
258
+ data-chart-library="morris"
259
+ data-width="600"
260
+ data-height="200"
261
+ data-after="-600"
262
+ data-dt-element-name="time42"
263
+ </div>
264
+ </td>
265
+ <td width="600" align="center">
266
+ <div data-netdata="system.cpu"
267
+ data-chart-library="morris"
268
+ data-width="600"
269
+ data-height="200"
270
+ data-after="-600"
271
+ data-dt-element-name="time43"
272
+ </div>
273
+ </td>
274
+ </tr>
275
+ <tr>
276
+ <td>rendered in <span id="time41">X</span> ms</td>
277
+ <td>rendered in <span id="time42">X</span> ms</td>
278
+ <td>rendered in <span id="time43">X</span> ms</td>
279
+ </tr>
280
+ </table>
281
+
282
+</body>
283
+</html>
284
+ <!-- You can disable Google Visualization by commenting the following two lines -->
285
+ <script type="text/javascript" src="https://www.google.com/jsapi"></script>
286
+ <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>
287
+
288
+ <!-- you can set your netdata server globally, by ucommenting this -->
289
+ <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
290
+ <!-- <script> netdataServer = "http://box:19999"; </script> -->
291
+
292
+ <!-- load the dashboard manager - it will do the rest -->
293
+ <script type="text/javascript" src="dashboard.js"></script>
294
+
web/dashboard.js
+1071
-1071
@@ -1,1071 +1,1071 @@
1
-// You can set the following variables before loading this script:
2
-//
3
-// var netdataStopDygraph = 1; // do not use dygraph
4
-// var netdataStopSparkline = 1; // do not use sparkline
5
-// var netdataStopPeity = 1; // do not use peity
6
-//
7
-// You can also set the default netdata server, using the following.
8
-// When this variable is not set, we assume the page is hosted on your
9
-// netdata server already.
10
-// var netdataServer = "http://yourhost:19999"; // set your NetData server
11
-
12
-// --------------------------------------------------------------------------------------------------------------------
13
-// For google charts you need this in your page:
14
-// <script type="text/javascript" src="https://www.google.com/jsapi"></script>
15
-// <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>
16
-
17
-(function(window)
18
-{
19
- var NETDATA = window.NETDATA || {};
20
-
21
- // ----------------------------------------------------------------------------------------------------------------
22
- // Detect the netdata server
23
-
24
- // http://stackoverflow.com/questions/984510/what-is-my-script-src-url
25
- // http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url
26
- NETDATA._scriptSource = function(scripts) {
27
- var script = null, base = null;
28
-
29
- if(typeof document.currentScript != 'undefined') {
30
- script = document.currentScript;
31
- }
32
- else {
33
- var all_scripts = document.getElementsByTagName('script');
34
- script = all_scripts[all_scripts.length - 1];
35
- }
36
-
37
- if (script.getAttribute.length != 'undefined')
38
- script = script.src;
39
- else
40
- script = script.getAttribute('src', -1);
41
-
42
- var link = document.createElement('a');
43
- link.setAttribute('href', script);
44
-
45
- if(!link.protocol || !link.hostname) return null;
46
-
47
- base = link.protocol;
48
- if(base) base += "//";
49
- base += link.hostname;
50
-
51
- if(link.port) base += ":" + link.port;
52
- base += "/";
53
-
54
- return base;
55
- };
56
-
57
- if(typeof netdataServer != 'undefined')
58
- NETDATA.serverDefault = netdataServer + "/";
59
- else
60
- NETDATA.serverDefault = NETDATA._scriptSource();
61
-
62
- NETDATA.jQuery = NETDATA.serverDefault + 'lib/jquery-1.11.3.min.js';
63
- NETDATA.peity_js = NETDATA.serverDefault + 'lib/jquery.peity.min.js';
64
- NETDATA.sparkline_js = NETDATA.serverDefault + 'lib/jquery.sparkline.min.js';
65
- NETDATA.dygraph_js = NETDATA.serverDefault + 'lib/dygraph-combined.js';
66
- NETDATA.raphael_js = NETDATA.serverDefault + 'lib/raphael-min.js';
67
- NETDATA.morris_js = NETDATA.serverDefault + 'lib/morris.min.js';
68
- NETDATA.morris_css = NETDATA.serverDefault + 'css/morris.css';
69
- NETDATA.google_js = 'https://www.google.com/jsapi';
70
- NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477',
71
- '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707',
72
- '#329262', '#5574A6', '#3B3EAC' ];
73
-
74
- // ----------------------------------------------------------------------------------------------------------------
75
- // the defaults for all charts
76
-
77
- NETDATA.chartDefaults = {
78
- host: NETDATA.serverDefault, // the server to get data from
79
- width: 100, // the chart width
80
- height: 20, // the chart height
81
- library: 'peity', // the graphing library to use
82
- method: 'average', // the grouping method
83
- before: 0, // panning
84
- after: -600, // panning
85
- point_width: 1, // the detail of the chart
86
- }
87
-
88
- NETDATA.all_url = 'all2.js';
89
- NETDATA.idle_between_charts = 50;
90
- NETDATA.idle_between_loops = 100;
91
- NETDATA.debug = 1;
92
-
93
- if(NETDATA.debug) console.log('welcome to NETDATA');
94
-
95
-
96
- // ----------------------------------------------------------------------------------------------------------------
97
- // Error Handling
98
-
99
- NETDATA.errorCodes = {
100
- 100: { message: "Cannot load chart library", alert: true },
101
- 101: { message: "Cannot load jQuery", alert: true },
102
- 402: { message: "Chart library not found", alert: false },
103
- 404: { message: "Chart not found", alert: false },
104
- };
105
- NETDATA.errorLast = {
106
- code: 0,
107
- message: "",
108
- datetime: 0,
109
- };
110
-
111
- NETDATA.error = function(code, msg) {
112
- NETDATA.errorLast.code = code;
113
- NETDATA.errorLast.message = msg;
114
- NETDATA.errorLast.datetime = new Date().getTime();
115
-
116
- console.log("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
117
-
118
- if(NETDATA.errorCodes[code].alert)
119
- alert("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
120
- }
121
-
122
- NETDATA.errorReset = function() {
123
- NETDATA.errorLast.code = 0;
124
- NETDATA.errorLast.message = "You are doing fine!";
125
- NETDATA.errorLast.datetime = 0;
126
- }
127
-
128
- NETDATA.messageInABox = function(div, width, height, message) {
129
- div.innerHTML = '<table border="0"><tr><td width="' + width + '" height="' + height
130
- + '" valign="middle" align="center">'
131
- + message
132
- + '</td></tr></table>';
133
- }
134
-
135
- // ----------------------------------------------------------------------------------------------------------------
136
- // Load a script without jquery
137
- // This is used to load jquery - after it is loaded, we use jquery
138
-
139
- NETDATA._loadjQuery = function(callback) {
140
- if(typeof jQuery == 'undefined') {
141
- var script = document.createElement('script');
142
- script.type = 'text/javascript';
143
- script.async = true;
144
- script.src = NETDATA.jQuery;
145
-
146
- // script.onabort = onError;
147
- script.onerror = function(err, t) { NETDATA.error(101, NETDATA.jQuery); };
148
- if(typeof callback == "function")
149
- script.onload = callback;
150
-
151
- var s = document.getElementsByTagName('script')[0];
152
- s.parentNode.insertBefore(script, s);
153
- }
154
- else if(typeof callback == "function")
155
- callback();
156
- }
157
-
158
- NETDATA.generateDataURL = function(args) {
159
- // build the data URL
160
- var url = args.host + args.url;
161
- url += "&points=";
162
- url += args.points.toString();
163
- url += "&group=";
164
- url += args.method;
165
- url += "&after=";
166
- url += args.after || "0";
167
- url += "&before=";
168
- url += args.before || "0";
169
- url += "&options=" + NETDATA.chartLibraries[args.library].options + '|';
170
- url += (args.non_zero)?"nonzero":"";
171
- url += "&format=" + NETDATA.chartLibraries[args.library].format;
172
-
173
- if(args.dimensions)
174
- url += "&dimensions=" + args.dimensions;
175
-
176
- if(NETDATA.debug) console.log('generateDataURL(' + args + ') = ' + url );
177
- return url;
178
- }
179
-
180
- NETDATA.loadCharts = function(targets, index, callback) {
181
- if(NETDATA.debug) console.log('loadCharts(<targets, ' + index + ')');
182
-
183
- var target = targets.get(index);
184
-
185
- if(target == null) {
186
- console.log('loaded all charts');
187
- callback();
188
- }
189
- else {
190
- var self = $(target);
191
-
192
- if(!self.data('loaded')) {
193
- var id = self.data('netdata');
194
-
195
- var host = self.data('host') || NETDATA.chartDefaults.host;
196
- var width = self.data('width') || NETDATA.chartDefaults.width;
197
- var height = self.data('height') || NETDATA.chartDefaults.height;
198
- var method = self.data('method') || NETDATA.chartDefaults.method;
199
- var after = self.data('after') || NETDATA.chartDefaults.after;
200
- var before = self.data('before') || NETDATA.chartDefaults.before;
201
- var host = self.data('host') || NETDATA.chartDefaults.host;
202
- var library = self.data('chart-library') || NETDATA.chartDefaults.library;
203
- var dimensions = self.data('dimensions') || null;
204
-
205
- if(typeof NETDATA.chartLibraries[library] == 'undefined') {
206
- NETDATA.error(402, library);
207
- NETDATA.messageInABox(target, width, height, 'chart library "' + library + '" is not found');
208
- self.data('enabled', false);
209
- NETDATA.loadCharts(targets, ++index, callback);
210
- }
211
- else {
212
- var url = host + "/api/v1/chart?chart=" + id;
213
-
214
- $.ajax( {
215
- url: url,
216
- crossDomain: true
217
- })
218
- .done(function(chart) {
219
-
220
- var point_width = self.data('point-width') || NETDATA.chartLibraries[library].pixels;
221
- var points = self.data('points') || Math.round(width / point_width);
222
-
223
- var url = NETDATA.generateDataURL({
224
- host: host,
225
- url: chart.data_url,
226
- dimensions: dimensions,
227
- library: library,
228
- method: method,
229
- before: before,
230
- points: points,
231
- after: after,
232
- non_zero: null
233
- });
234
-
235
- // done processing of this DIV
236
- // store the processing result, in
237
- // 'data' sections in the DIV
238
- self
239
- .data('chart', chart)
240
- .data('chart-url', url)
241
- .data('last-updated', 0)
242
- .data('update-every', chart.update_every * 1000)
243
- .data('enabled', true);
244
- })
245
- .fail(function() {
246
- NETDATA.error(404, url);
247
- NETDATA.messageInABox(target, width, height, 'chart "' + id + '" not found on url "' + url + '"');
248
- self.data('enabled', false);
249
- })
250
- .always(function() {
251
- NETDATA.loadCharts(targets, ++index, callback);
252
- });
253
- }
254
- }
255
- }
256
- }
257
-
258
- function netdataParsePageCharts() {
259
- if(NETDATA.debug) console.log('processing web page defined charts');
260
-
261
- // targets
262
- // a list of all DIVs containing netdata charts
263
-
264
- var targets = $('div[data-netdata]')
265
- .bind('create', function(event, data) {
266
- var self = $(this);
267
- var lib = self.data('chart-library') || 'dygraph';
268
- var method = lib + 'ChartCreate';
269
-
270
- console.log('Calling ' + method + '()');
271
- NETDATA[method].apply(this, arguments);
272
- })
273
- .bind('update', function() {
274
- var self = $(this);
275
- var lib = self.data('chart-library') || 'dygraph';
276
- var method = lib + 'ChartUpdate';
277
-
278
- console.log('Calling ' + method + '()');
279
- NETDATA[method].apply(this, arguments);
280
- });
281
-
282
- NETDATA.loadCharts(targets, 0, function() {
283
- // done processing all netdata DIVs in this page
284
- // call the refresh handler
285
- netdataRefreshTargets(targets, 0);
286
- });
287
- }
288
-
289
- // ----------------------------------------------------------------------------------------------------------------
290
- // Charts Libraries Registration
291
-
292
- NETDATA.chartLibraries = {};
293
-
294
- NETDATA.registerChartLibrary = function(library, url, format, options, min_pixels_per_point) {
295
- console.log("registering chart library: " + library);
296
-
297
- NETDATA.chartLibraries[library] = {
298
- initialized: new Date().getTime(),
299
- url: url,
300
- format: format,
301
- options: options,
302
- pixels: min_pixels_per_point
303
- };
304
-
305
- console.log(NETDATA.chartLibraries);
306
- }
307
-
308
- // ----------------------------------------------------------------------------------------------------------------
309
-
310
- //var chart = function() {
311
- //}
312
-
313
- //chart.prototype.color = function() {
314
- // return 'red';
315
- //}
316
-
317
- //var c = new chart();
318
- //c.color();
319
-
320
- function netdataDownloadChartData(callback) {
321
- var self = $(this);
322
- var last = self.data('last-updated') || 0;
323
- var every = self.data('update-every') || 1;
324
-
325
- // check if this chart has to be refreshed now
326
- var now = new Date().getTime();
327
- if(last + every > now) {
328
- if(typeof callback == 'function')
329
- callback();
330
- }
331
- else {
332
- var url = self.data('chart-url');
333
-
334
- if(NETDATA.debug) console.log('netdataDownloadChartData(): downloading ' + url);
335
-
336
- $.ajax( {
337
- url: url,
338
- crossDomain: true
339
- })
340
- .then(function(data) {
341
- //var result = $.map(data.rows, function(item) {
342
- // get from the 3rd column the 'v' member
343
- //return item.c[3].v;
344
- //});
345
-
346
- // since we downloaded the data
347
- // update the last-updated time to prevent
348
- // another download too soon
349
- self.data('last-updated', new Date().getTime());
350
-
351
- // render it
352
- var created = self.data('created');
353
- self.trigger((created ? 'update' : 'create'), [data]).data('created', true)
354
- })
355
- .fail(function() {
356
- console.log('failed to download chart data');
357
- })
358
- .always(function() {
359
- var last = self.data('last-updated');
360
- var now = new Date().getTime();
361
- var dt = now - last;
362
- self.data('refresh-dt', dt);
363
-
364
- var element_name = self.data('dt-element-name') || null;
365
- if(element_name) {
366
- var element = document.getElementById(element_name) || null;
367
- if(element) {
368
- element.innerHTML = dt.toString();
369
- }
370
- }
371
-
372
- if(typeof callback == 'function')
373
- callback();
374
- });
375
- }
376
- };
377
-
378
- function netdataRefreshTargets(targets, index) {
379
- // if(NETDATA.debug) console.log('netdataRefreshTargets(<targets, ' + index + ')');
380
-
381
- var target = targets.get(index);
382
-
383
- if(target == null) {
384
- console.log('restart');
385
-
386
- // finished, restart
387
- setTimeout(function() {
388
- netdataRefreshTargets(targets, 0);
389
- }, NETDATA.idle_between_loops);
390
- }
391
- else {
392
- var self = $(target);
393
-
394
- if(!self.data('enabled')) {
395
- netdataRefreshTargets(targets, ++index);
396
- }
397
- else {
398
- setTimeout(function() {
399
- netdataDownloadChartData.call(target, function() {
400
- netdataRefreshTargets(targets, ++index);
401
- });
402
- }, NETDATA.idle_between_charts);
403
- }
404
- }
405
- }
406
-
407
- NETDATA.guid = function() {
408
- function s4() {
409
- return Math.floor((1 + Math.random()) * 0x10000)
410
- .toString(16)
411
- .substring(1);
412
- }
413
-
414
- return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
415
- }
416
-
417
- // ----------------------------------------------------------------------------------------------------------------
418
- // piety
419
-
420
- NETDATA.peityInitialize = function(callback) {
421
- if(typeof netdataStopPeity == 'undefined') {
422
- $.getScript(NETDATA.peity_js)
423
- .done(function() {
424
- NETDATA.registerChartLibrary('peity', NETDATA.peity_js, 'ssvcomma', 'null2zero|flip|min2max', 2);
425
- })
426
- .fail(function() {
427
- NETDATA.error(100, NETDATA.peity_js);
428
- })
429
- .always(function() {
430
- if(typeof callback == "function")
431
- callback();
432
- })
433
- }
434
- else if(typeof callback == "function")
435
- callback();
436
- };
437
-
438
- NETDATA.peityChartUpdate = function(event, data) {
439
- var self = $(this);
440
- var instance = self.html(data).not('[data-created]');
441
- instance.change();
442
- }
443
-
444
- NETDATA.peityChartCreate = function(event, data) {
445
- var self = $(this);
446
- var width = self.data('width') || NETDATA.chartDefaults.width;
447
- var height = self.data('height') || NETDATA.chartDefaults.height;
448
- var instance = self.html(data).not('[data-created]');
449
-
450
- instance.peity('line', {
451
- width: width,
452
- height: height
453
- })
454
- .data('created', true);
455
- }
456
-
457
- // ----------------------------------------------------------------------------------------------------------------
458
- // sparkline
459
-
460
- NETDATA.sparklineInitialize = function(callback) {
461
- if(typeof netdataStopSparkline == 'undefined') {
462
- $.getScript(NETDATA.sparkline_js)
463
- .done(function() {
464
- NETDATA.registerChartLibrary('sparkline', NETDATA.sparkline_js, 'array', 'flip|min2max', 2);
465
- })
466
- .fail(function() {
467
- NETDATA.error(100, NETDATA.sparkline_js);
468
- })
469
- .always(function() {
470
- if(typeof callback == "function")
471
- callback();
472
- })
473
- }
474
- else if(typeof callback == "function")
475
- callback();
476
- };
477
-
478
- NETDATA.sparklineChartUpdate = function(event, data) {
479
- var self = $(this);
480
- var options = self.data('sparkline-options');
481
- self.sparkline(data, options);
482
- }
483
-
484
- NETDATA.sparklineChartCreate = function(event, data) {
485
- var self = $(this);
486
- var chart = self.data('chart');
487
- var width = self.data('width') || NETDATA.chartDefaults.width;
488
- var height = self.data('height') || NETDATA.chartDefaults.height;
489
- var type = self.data('sparkline-type') || 'line';
490
- var lineColor = self.data('sparkline-lineColor') || undefined;
491
- var fillColor = self.data('sparkline-fillColor') || (chart.chart_type == 'line')?'#FFF':undefined;
492
- var chartRangeMin = self.data('sparkline-chartRangeMin') || undefined;
493
- var chartRangeMax = self.data('sparkline-chartRangeMax') || undefined;
494
- var composite = self.data('sparkline-composite') || undefined;
495
- var enableTagOptions = self.data('sparkline-enableTagOptions') || undefined;
496
- var tagOptionPrefix = self.data('sparkline-tagOptionPrefix') || undefined;
497
- var tagValuesAttribute = self.data('sparkline-tagValuesAttribute') || undefined;
498
- var disableHiddenCheck = self.data('sparkline-disableHiddenCheck') || undefined;
499
- var defaultPixelsPerValue = self.data('sparkline-defaultPixelsPerValue') || undefined;
500
- var spotColor = self.data('sparkline-spotColor') || undefined;
501
- var minSpotColor = self.data('sparkline-minSpotColor') || undefined;
502
- var maxSpotColor = self.data('sparkline-maxSpotColor') || undefined;
503
- var spotRadius = self.data('sparkline-spotRadius') || undefined;
504
- var valueSpots = self.data('sparkline-valueSpots') || undefined;
505
- var highlightSpotColor = self.data('sparkline-highlightSpotColor') || undefined;
506
- var highlightLineColor = self.data('sparkline-highlightLineColor') || undefined;
507
- var lineWidth = self.data('sparkline-lineWidth') || undefined;
508
- var normalRangeMin = self.data('sparkline-normalRangeMin') || undefined;
509
- var normalRangeMax = self.data('sparkline-normalRangeMax') || undefined;
510
- var drawNormalOnTop = self.data('sparkline-drawNormalOnTop') || undefined;
511
- var xvalues = self.data('sparkline-xvalues') || undefined;
512
- var chartRangeClip = self.data('sparkline-chartRangeClip') || undefined;
513
- var xvalues = self.data('sparkline-xvalues') || undefined;
514
- var chartRangeMinX = self.data('sparkline-chartRangeMinX') || undefined;
515
- var chartRangeMaxX = self.data('sparkline-chartRangeMaxX') || undefined;
516
- var disableInteraction = self.data('sparkline-disableInteraction') || false;
517
- var disableTooltips = self.data('sparkline-disableTooltips') || false;
518
- var disableHighlight = self.data('sparkline-disableHighlight') || false;
519
- var highlightLighten = self.data('sparkline-highlightLighten') || 1.4;
520
- var highlightColor = self.data('sparkline-highlightColor') || undefined;
521
- var tooltipContainer = self.data('sparkline-tooltipContainer') || undefined;
522
- var tooltipClassname = self.data('sparkline-tooltipClassname') || undefined;
523
- var tooltipFormat = self.data('sparkline-tooltipFormat') || undefined;
524
- var tooltipPrefix = self.data('sparkline-tooltipPrefix') || undefined;
525
- var tooltipSuffix = self.data('sparkline-tooltipSuffix') || ' ' + chart.units;
526
- var tooltipSkipNull = self.data('sparkline-tooltipSkipNull') || true;
527
- var tooltipValueLookups = self.data('sparkline-tooltipValueLookups') || undefined;
528
- var tooltipFormatFieldlist = self.data('sparkline-tooltipFormatFieldlist') || undefined;
529
- var tooltipFormatFieldlistKey = self.data('sparkline-tooltipFormatFieldlistKey') || undefined;
530
- var numberFormatter = self.data('sparkline-numberFormatter') || function(n){ return n.toFixed(2); };
531
- var numberDigitGroupSep = self.data('sparkline-numberDigitGroupSep') || undefined;
532
- var numberDecimalMark = self.data('sparkline-numberDecimalMark') || undefined;
533
- var numberDigitGroupCount = self.data('sparkline-numberDigitGroupCount') || undefined;
534
- var animatedZooms = self.data('sparkline-animatedZooms') || false;
535
-
536
- var options = {
537
- type: type,
538
- lineColor: lineColor,
539
- fillColor: fillColor,
540
- chartRangeMin: chartRangeMin,
541
- chartRangeMax: chartRangeMax,
542
- composite: composite,
543
- enableTagOptions: enableTagOptions,
544
- tagOptionPrefix: tagOptionPrefix,
545
- tagValuesAttribute: tagValuesAttribute,
546
- disableHiddenCheck: disableHiddenCheck,
547
- defaultPixelsPerValue: defaultPixelsPerValue,
548
- spotColor: spotColor,
549
- minSpotColor: minSpotColor,
550
- maxSpotColor: maxSpotColor,
551
- spotRadius: spotRadius,
552
- valueSpots: valueSpots,
553
- highlightSpotColor: highlightSpotColor,
554
- highlightLineColor: highlightLineColor,
555
- lineWidth: lineWidth,
556
- normalRangeMin: normalRangeMin,
557
- normalRangeMax: normalRangeMax,
558
- drawNormalOnTop: drawNormalOnTop,
559
- xvalues: xvalues,
560
- chartRangeClip: chartRangeClip,
561
- chartRangeMinX: chartRangeMinX,
562
- chartRangeMaxX: chartRangeMaxX,
563
- disableInteraction: disableInteraction,
564
- disableTooltips: disableTooltips,
565
- disableHighlight: disableHighlight,
566
- highlightLighten: highlightLighten,
567
- highlightColor: highlightColor,
568
- tooltipContainer: tooltipContainer,
569
- tooltipClassname: tooltipClassname,
570
- tooltipChartTitle: chart.title,
571
- tooltipFormat: tooltipFormat,
572
- tooltipPrefix: tooltipPrefix,
573
- tooltipSuffix: tooltipSuffix,
574
- tooltipSkipNull: tooltipSkipNull,
575
- tooltipValueLookups: tooltipValueLookups,
576
- tooltipFormatFieldlist: tooltipFormatFieldlist,
577
- tooltipFormatFieldlistKey: tooltipFormatFieldlistKey,
578
- numberFormatter: numberFormatter,
579
- numberDigitGroupSep: numberDigitGroupSep,
580
- numberDecimalMark: numberDecimalMark,
581
- numberDigitGroupCount: numberDigitGroupCount,
582
- animatedZooms: animatedZooms,
583
- width: width,
584
- height: height
585
- };
586
-
587
- var uuid = NETDATA.guid();
588
- this.innerHTML = '<div style="display: inline-block; position: relative;" id="' + uuid + '"></div>';
589
- var div = document.getElementById(uuid);
590
-
591
- self.sparkline(data, options);
592
- self.data('sparkline-options', options)
593
- .data('uuid', uuid)
594
- .data('created', true);
595
- };
596
-
597
- // ----------------------------------------------------------------------------------------------------------------
598
- // dygraph
599
-
600
- NETDATA.dygraphAllCharts = [];
601
- NETDATA.dygraphInitSync = function(callback) {
602
- //$.getScript(NETDATA.serverDefault + 'dygraph-synchronizer.js')
603
- // .always(function() {
604
- if(typeof callback == "function")
605
- callback();
606
- // })
607
- }
608
-
609
- NETDATA.dygraphSync = null;
610
- NETDATA.dygraphSyncAll = function() {
611
- if(NETDATA.dygraphSync) {
612
- NETDATA.dygraphSync.detach();
613
- NETDATA.dygraphSync = null;
614
- }
615
-
616
- NETDATA.dygraphSync = Dygraph.synchronize(NETDATA.dygraphAllCharts, {
617
- selection: true,
618
- zoom: false
619
- });
620
- }
621
-
622
- NETDATA.dygraphInitialize = function(callback) {
623
- if(typeof netdataStopDygraph == 'undefined') {
624
- $.getScript(NETDATA.dygraph_js)
625
- .done(function() {
626
- NETDATA.registerChartLibrary('dygraph', NETDATA.dygraph_js, 'json', 'ms|flip', 2);
627
- })
628
- .fail(function() {
629
- NETDATA.error(100, NETDATA.dygraph_js);
630
- })
631
- .always(function() {
632
- NETDATA.dygraphInitSync(callback);
633
- })
634
- }
635
- else if(typeof callback == "function")
636
- callback();
637
- };
638
-
639
- NETDATA.dygraphChartUpdate = function(event, data) {
640
- var self = $(this);
641
- var dygraph = self.data('dygraph-instance');
642
-
643
- if(typeof data.update_every != 'undefined')
644
- self.data('update-every', data.update_every * 1000);
645
-
646
- if(dygraph != null) {
647
- console.log('updating dygraphs');
648
- dygraph.updateOptions( { 'file': data.data, 'labels': data.labels } );
649
- }
650
- else
651
- console.log('not updating dygraphs');
652
- };
653
-
654
- NETDATA.dygraphChartCreate = function(event, data) {
655
- var self = $(this);
656
- var width = self.data('width') || NETDATA.chartDefaults.width;
657
- var height = self.data('height') || NETDATA.chartDefaults.height;
658
- var chart = self.data('chart');
659
- var title = self.data('dygraph-title') || chart.title;
660
- var titleHeight = self.data('dygraph-titleHeight') || 20;
661
- var labelsDiv = self.data('dygraph-labelsDiv') || undefined;
662
- var connectSeparatedPoints = self.data('dygraph-connectSeparatedPoints') || false;
663
- var yLabelWidth = self.data('dygraph-yLabelWidth') || 12;
664
- var stackedGraph = self.data('dygraph-stackedGraph') || (chart.chart_type == 'stacked')?true:false;
665
- var stackedGraphNaNFill = self.data('dygraph-stackedGraphNaNFill') || 'none';
666
- var hideOverlayOnMouseOut = self.data('dygraph-hideOverlayOnMouseOut') || true;
667
- var fillGraph = self.data('dygraph-fillGraph') || (chart.chart_type == 'area')?true:false;
668
- var drawPoints = self.data('dygraph-drawPoints') || false;
669
- var labelsDivStyles = self.data('dygraph-labelsDivStyles') || { 'fontSize':'10' };
670
- var labelsDivWidth = self.data('dygraph-labelsDivWidth') || 250;
671
- var labelsSeparateLines = self.data('dygraph-labelsSeparateLines') || false;
672
- var labelsShowZeroValues = self.data('dygraph-labelsShowZeroValues') || true;
673
- var legend = self.data('dygraph-legend') || 'onmouseover';
674
- var showLabelsOnHighlight = self.data('dygraph-showLabelsOnHighlight') || true;
675
- var gridLineColor = self.data('dygraph-gridLineColor') || '#EEE';
676
- var axisLineColor = self.data('dygraph-axisLineColor') || '#EEE';
677
- var maxNumberWidth = self.data('dygraph-maxNumberWidth') || 8;
678
- var sigFigs = self.data('dygraph-sigFigs') || null;
679
- var digitsAfterDecimal = self.data('dygraph-digitsAfterDecimal') || 2;
680
- var axisLabelFontSize = self.data('dygraph-axisLabelFontSize') || 10;
681
- var axisLineWidth = self.data('dygraph-axisLineWidth') || 0.3;
682
- var drawAxis = self.data('dygraph-drawAxis') || true;
683
- var strokeWidth = self.data('dygraph-strokeWidth') || 1.0;
684
- var drawGapEdgePoints = self.data('dygraph-drawGapEdgePoints') || true;
685
- var colors = self.data('dygraph-colors') || NETDATA.colors;
686
- var pointSize = self.data('dygraph-pointSize') || 1;
687
- var stepPlot = self.data('dygraph-stepPlot') || false;
688
- var strokeBorderColor = self.data('dygraph-strokeBorderColor') || 'white';
689
- var strokeBorderWidth = self.data('dygraph-strokeBorderWidth') || (chart.chart_type == 'stacked')?1.0:0.0;
690
- var strokePattern = self.data('dygraph-strokePattern') || undefined;
691
- var highlightCircleSize = self.data('dygraph-highlightCircleSize') || 3;
692
- var highlightSeriesOpts = self.data('dygraph-highlightSeriesOpts') || { strokeWidth: 1.5 };
693
- var highlightSeriesBackgroundAlpha = self.data('dygraph-highlightSeriesBackgroundAlpha') || (chart.chart_type == 'stacked')?0.7:0.5;
694
- var pointClickCallback = self.data('dygraph-pointClickCallback') || undefined;
695
- var showRangeSelector = self.data('dygraph-showRangeSelector') || false;
696
- var showRoller = self.data('dygraph-showRoller') || false;
697
- var valueFormatter = self.data('dygraph-valueFormatter') || undefined; //function(x){ return x.toFixed(2); };
698
- var rightGap = self.data('dygraph-rightGap') || 5;
699
- var drawGrid = self.data('dygraph-drawGrid') || true;
700
- var drawXGrid = self.data('dygraph-drawXGrid') || undefined;
701
- var drawYGrid = self.data('dygraph-drawYGrid') || undefined;
702
- var gridLinePattern = self.data('dygraph-gridLinePattern') || null;
703
- var gridLineWidth = self.data('dygraph-gridLineWidth') || 0.3;
704
-
705
- var options = {
706
- title: title,
707
- titleHeight: titleHeight,
708
- ylabel: chart.units,
709
- yLabelWidth: yLabelWidth,
710
- connectSeparatedPoints: connectSeparatedPoints,
711
- drawPoints: drawPoints,
712
- fillGraph: fillGraph,
713
- stackedGraph: stackedGraph,
714
- stackedGraphNaNFill: stackedGraphNaNFill,
715
- drawGrid: drawGrid,
716
- drawXGrid: drawXGrid,
717
- drawYGrid: drawYGrid,
718
- gridLinePattern: gridLinePattern,
719
- gridLineWidth: gridLineWidth,
720
- gridLineColor: gridLineColor,
721
- axisLineColor: axisLineColor,
722
- axisLineWidth: axisLineWidth,
723
- drawAxis: drawAxis,
724
- hideOverlayOnMouseOut: hideOverlayOnMouseOut,
725
- labelsDiv: labelsDiv,
726
- labelsDivStyles: labelsDivStyles,
727
- labelsDivWidth: labelsDivWidth,
728
- labelsSeparateLines: labelsSeparateLines,
729
- labelsShowZeroValues: labelsShowZeroValues,
730
- labelsKMB: false,
731
- labelsKMG2: false,
732
- legend: legend,
733
- showLabelsOnHighlight: showLabelsOnHighlight,
734
- maxNumberWidth: maxNumberWidth,
735
- sigFigs: sigFigs,
736
- digitsAfterDecimal: digitsAfterDecimal,
737
- axisLabelFontSize: axisLabelFontSize,
738
- colors: colors,
739
- strokeWidth: strokeWidth,
740
- drawGapEdgePoints: drawGapEdgePoints,
741
- pointSize: pointSize,
742
- stepPlot: stepPlot,
743
- strokeBorderColor: strokeBorderColor,
744
- strokeBorderWidth: strokeBorderWidth,
745
- strokePattern: strokePattern,
746
- highlightCircleSize: highlightCircleSize,
747
- highlightSeriesOpts: highlightSeriesOpts,
748
- highlightSeriesBackgroundAlpha: highlightSeriesBackgroundAlpha,
749
- pointClickCallback: pointClickCallback,
750
- showRangeSelector: showRangeSelector,
751
- showRoller: showRoller,
752
- valueFormatter: valueFormatter,
753
- rightGap: rightGap,
754
- width: width,
755
- height: height,
756
- labels: data.labels,
757
- axes: {
758
- x: {
759
- pixelsPerLabel: 50,
760
- ticker: Dygraph.dateTicker,
761
- axisLabelFormatter: function (d, gran) {
762
- return Dygraph.zeropad(d.getHours()) + ":" + Dygraph.zeropad(d.getMinutes()) + ":" + Dygraph.zeropad(d.getSeconds());
763
- },
764
- valueFormatter :function (ms) {
765
- var d = new Date(ms);
766
- return Dygraph.zeropad(d.getHours()) + ":" + Dygraph.zeropad(d.getMinutes()) + ":" + Dygraph.zeropad(d.getSeconds());
767
- }
768
- },
769
- y: {
770
- pixelsPerLabel: 15,
771
- }
772
- }
773
- };
774
-
775
- var uuid = NETDATA.guid();
776
- self.html('<div id="' + uuid + '"></div>');
777
-
778
- var dchart = new Dygraph(document.getElementById(uuid),
779
- data.data, options);
780
-
781
- self.data('dygraph-instance', dchart)
782
- .data('dygraph-options', options)
783
- .data('uuid', uuid)
784
- .data('created', true);
785
-
786
- //NETDATA.dygraphAllCharts.push(dchart);
787
- //if(NETDATA.dygraphAllCharts.length > 1)
788
- // NETDATA.dygraphSyncAll();
789
- };
790
-
791
- // ----------------------------------------------------------------------------------------------------------------
792
- // morris
793
-
794
- NETDATA.morrisInitialize = function(callback) {
795
- if(typeof netdataStopMorris == 'undefined') {
796
- var fileref = document.createElement("link");
797
- fileref.setAttribute("rel", "stylesheet");
798
- fileref.setAttribute("type", "text/css");
799
- fileref.setAttribute("href", NETDATA.morris_css);
800
-
801
- if (typeof fileref != "undefined")
802
- document.getElementsByTagName("head")[0].appendChild(fileref);
803
-
804
- $.getScript(NETDATA.morris_js)
805
- .done(function() {
806
- NETDATA.registerChartLibrary('morris', NETDATA.morris_js, 'json', 'objectrows|ms', 10);
807
- })
808
- .fail(function() {
809
- NETDATA.error(100, NETDATA.morris_js);
810
- })
811
- .always(function() {
812
- if(typeof callback == "function")
813
- callback();
814
- })
815
- }
816
- else if(typeof callback == "function")
817
- callback();
818
- };
819
-
820
- NETDATA.morrisChartUpdate = function(event, data) {
821
- var self = $(this);
822
- var width = self.data('width') || NETDATA.chartDefaults.width;
823
- var height = self.data('height') || NETDATA.chartDefaults.height;
824
- var morris = self.data('morris-instance');
825
-
826
- if(typeof data.update_every != 'undefined')
827
- self.data('update-every', data.update_every * 1000);
828
-
829
- if(morris != null) {
830
- console.log('updating morris');
831
- morris.setData(data.data);
832
- }
833
- else
834
- console.log('not updating morris');
835
- };
836
-
837
- NETDATA.morrisChartCreate = function(event, data) {
838
- var self = $(this);
839
- var width = self.data('width') || NETDATA.chartDefaults.width;
840
- var height = self.data('height') || NETDATA.chartDefaults.height;
841
- var chart = self.data('chart');
842
-
843
- self.html('<div id="morris-' + chart.id + '" style="width: ' + width + 'px; height: ' + height + 'px;"></div>');
844
-
845
- // remove the 'time' element from the labels
846
- data.labels.splice(0, 1);
847
-
848
- var options = {
849
- element: 'morris-' + chart.id,
850
- data: data.data,
851
- xkey: 'time',
852
- ykeys: data.labels,
853
- labels: data.labels,
854
- lineWidth: 2,
855
- pointSize: 2,
856
- smooth: true,
857
- hideHover: 'auto',
858
- parseTime: true,
859
- continuousLine: false,
860
- behaveLikeLine: false,
861
- width: width,
862
- height: height
863
- };
864
-
865
- var morris;
866
- if(chart.chart_type == 'line')
867
- morris = new Morris.Line(options);
868
-
869
- else if(chart.chart_type == 'area') {
870
- options.behaveLikeLine = true;
871
- morris = new Morris.Area(options);
872
- }
873
- else // stacked
874
- morris = new Morris.Area(options);
875
-
876
- self.data('morris-instance', morris)
877
- .data('created', true);
878
- };
879
-
880
- // ----------------------------------------------------------------------------------------------------------------
881
- // raphael
882
-
883
- NETDATA.raphaelInitialize = function(callback) {
884
- if(typeof netdataStopRaphael == 'undefined') {
885
- $.getScript(NETDATA.raphael_js)
886
- .done(function() {
887
- NETDATA.registerChartLibrary('raphael', NETDATA.raphael_js, 'json', 'flip|min2max', 1);
888
- })
889
- .fail(function() {
890
- NETDATA.error(100, NETDATA.raphael_js);
891
- })
892
- .always(function() {
893
- if(typeof callback == "function")
894
- callback();
895
- })
896
- }
897
- else if(typeof callback == "function")
898
- callback();
899
- };
900
-
901
- NETDATA.raphaelChartUpdate = function(event, data) {
902
- var self = $(this);
903
- var width = self.data('width') || NETDATA.chartDefaults.width;
904
- var height = self.data('height') || NETDATA.chartDefaults.height;
905
-
906
- self.raphael(data, {
907
- width: width,
908
- height: height
909
- })
910
- };
911
-
912
- NETDATA.raphaelChartCreate = function(event, data) {
913
- var self = $(this);
914
- var width = self.data('width') || NETDATA.chartDefaults.width;
915
- var height = self.data('height') || NETDATA.chartDefaults.height;
916
-
917
- self.raphael(data, {
918
- width: width,
919
- height: height
920
- })
921
- .data('created', true);
922
- };
923
-
924
- // ----------------------------------------------------------------------------------------------------------------
925
- // google charts
926
-
927
- NETDATA.googleInitialize = function(callback) {
928
- if(typeof netdataStopGoogleCharts == 'undefined' && typeof google != 'undefined') {
929
- NETDATA.registerChartLibrary('google', NETDATA.google_js, 'datatable', '', 3);
930
- if(typeof callback == "function")
931
- callback();
932
- }
933
- else if(typeof callback == "function")
934
- callback();
935
- };
936
-
937
- NETDATA.googleChartUpdate = function(event, data) {
938
- var self = $(this);
939
- var width = self.data('width') || NETDATA.chartDefaults.width;
940
- var height = self.data('height') || NETDATA.chartDefaults.height;
941
- var gchart = self.data('google-instance');
942
- var options = self.data('google-options');
943
-
944
- if(typeof data.update_every != 'undefined')
945
- self.data('update-every', data.update_every * 1000);
946
-
947
- var datatable = new google.visualization.DataTable(data);
948
-
949
- gchart.draw(datatable, options);
950
- };
951
-
952
- NETDATA.googleChartCreate = function(event, data) {
953
- var self = $(this);
954
- var width = self.data('width') || NETDATA.chartDefaults.width;
955
- var height = self.data('height') || NETDATA.chartDefaults.height;
956
- var chart = self.data('chart');
957
-
958
- var datatable = new google.visualization.DataTable(data);
959
- var gchart;
960
-
961
- var options = {
962
- width: width,
963
- height: height,
964
- lineWidth: 1,
965
- title: chart.title,
966
- fontSize: 11,
967
- hAxis: {
968
- // title: "Time of Day",
969
- // format:'HH:mm:ss',
970
- viewWindowMode: 'maximized',
971
- slantedText: false,
972
- format:'HH:mm:ss',
973
- textStyle: {
974
- fontSize: 9
975
- },
976
- gridlines: {
977
- color: '#EEE'
978
- }
979
- },
980
- vAxis: {
981
- title: chart.units,
982
- viewWindowMode: 'pretty',
983
- minValue: -0.1,
984
- maxValue: 0.1,
985
- direction: 1,
986
- textStyle: {
987
- fontSize: 9
988
- },
989
- gridlines: {
990
- color: '#EEE'
991
- }
992
- },
993
- chartArea: {
994
- width: '65%',
995
- height: '80%'
996
- },
997
- focusTarget: 'category',
998
- annotation: {
999
- '1': {
1000
- style: 'line'
1001
- }
1002
- },
1003
- pointsVisible: 0,
1004
- titlePosition: 'out',
1005
- titleTextStyle: {
1006
- fontSize: 11
1007
- },
1008
- tooltip: {
1009
- isHtml: false,
1010
- ignoreBounds: true,
1011
- textStyle: {
1012
- fontSize: 9
1013
- }
1014
- },
1015
- curveType: 'function',
1016
- areaOpacity: 0.3,
1017
- isStacked: false
1018
- };
1019
-
1020
- switch(chart.chart_type) {
1021
- case "area":
1022
- options.vAxis.viewWindowMode = 'maximized';
1023
- gchart = new google.visualization.AreaChart(this);
1024
- break;
1025
-
1026
- case "stacked":
1027
- options.isStacked = true;
1028
- options.areaOpacity = 0.85;
1029
- options.vAxis.viewWindowMode = 'maximized';
1030
- options.vAxis.minValue = null;
1031
- options.vAxis.maxValue = null;
1032
- gchart = new google.visualization.AreaChart(this);
1033
- break;
1034
-
1035
- default:
1036
- case "line":
1037
- options.lineWidth = 2;
1038
- gchart = new google.visualization.LineChart(this);
1039
- break;
1040
- }
1041
-
1042
- gchart.draw(datatable, options);
1043
-
1044
- self.data('google-instance', gchart)
1045
- .data('google-options', options)
1046
- .data('created', true);
1047
- };
1048
-
1049
- // ----------------------------------------------------------------------------------------------------------------
1050
- // load all libraries and initialize
1051
-
1052
- NETDATA.errorReset();
1053
-
1054
- NETDATA._loadjQuery(function() {
1055
- NETDATA.raphaelInitialize(function() {
1056
- NETDATA.morrisInitialize(function() {
1057
- NETDATA.peityInitialize(function() {
1058
- NETDATA.sparklineInitialize(function() {
1059
- NETDATA.dygraphInitialize(function() {
1060
- NETDATA.googleInitialize(function() {
1061
- netdataParsePageCharts();
1062
- }) // google
1063
- }) // dygraph.js
1064
- }) // sparkline.js
1065
- }) // piety.js
1066
- }) // morris.js
1067
- }) // raphael.js
1068
- });
1069
-
1070
-})(window);
1071
-
1
+// You can set the following variables before loading this script:
2
+//
3
+// var netdataStopDygraph = 1; // do not use dygraph
4
+// var netdataStopSparkline = 1; // do not use sparkline
5
+// var netdataStopPeity = 1; // do not use peity
6
+//
7
+// You can also set the default netdata server, using the following.
8
+// When this variable is not set, we assume the page is hosted on your
9
+// netdata server already.
10
+// var netdataServer = "http://yourhost:19999"; // set your NetData server
11
+
12
+// --------------------------------------------------------------------------------------------------------------------
13
+// For google charts you need this in your page:
14
+// <script type="text/javascript" src="https://www.google.com/jsapi"></script>
15
+// <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>
16
+
17
+(function(window)
18
+{
19
+ var NETDATA = window.NETDATA || {};
20
+
21
+ // ----------------------------------------------------------------------------------------------------------------
22
+ // Detect the netdata server
23
+
24
+ // http://stackoverflow.com/questions/984510/what-is-my-script-src-url
25
+ // http://stackoverflow.com/questions/6941533/get-protocol-domain-and-port-from-url
26
+ NETDATA._scriptSource = function(scripts) {
27
+ var script = null, base = null;
28
+
29
+ if(typeof document.currentScript != 'undefined') {
30
+ script = document.currentScript;
31
+ }
32
+ else {
33
+ var all_scripts = document.getElementsByTagName('script');
34
+ script = all_scripts[all_scripts.length - 1];
35
+ }
36
+
37
+ if (script.getAttribute.length != 'undefined')
38
+ script = script.src;
39
+ else
40
+ script = script.getAttribute('src', -1);
41
+
42
+ var link = document.createElement('a');
43
+ link.setAttribute('href', script);
44
+
45
+ if(!link.protocol || !link.hostname) return null;
46
+
47
+ base = link.protocol;
48
+ if(base) base += "//";
49
+ base += link.hostname;
50
+
51
+ if(link.port) base += ":" + link.port;
52
+ base += "/";
53
+
54
+ return base;
55
+ };
56
+
57
+ if(typeof netdataServer != 'undefined')
58
+ NETDATA.serverDefault = netdataServer + "/";
59
+ else
60
+ NETDATA.serverDefault = NETDATA._scriptSource();
61
+
62
+ NETDATA.jQuery = NETDATA.serverDefault + 'lib/jquery-1.11.3.min.js';
63
+ NETDATA.peity_js = NETDATA.serverDefault + 'lib/jquery.peity.min.js';
64
+ NETDATA.sparkline_js = NETDATA.serverDefault + 'lib/jquery.sparkline.min.js';
65
+ NETDATA.dygraph_js = NETDATA.serverDefault + 'lib/dygraph-combined.js';
66
+ NETDATA.raphael_js = NETDATA.serverDefault + 'lib/raphael-min.js';
67
+ NETDATA.morris_js = NETDATA.serverDefault + 'lib/morris.min.js';
68
+ NETDATA.morris_css = NETDATA.serverDefault + 'css/morris.css';
69
+ NETDATA.google_js = 'https://www.google.com/jsapi';
70
+ NETDATA.colors = [ '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#3B3EAC', '#0099C6', '#DD4477',
71
+ '#66AA00', '#B82E2E', '#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC', '#E67300', '#8B0707',
72
+ '#329262', '#5574A6', '#3B3EAC' ];
73
+
74
+ // ----------------------------------------------------------------------------------------------------------------
75
+ // the defaults for all charts
76
+
77
+ NETDATA.chartDefaults = {
78
+ host: NETDATA.serverDefault, // the server to get data from
79
+ width: 100, // the chart width
80
+ height: 20, // the chart height
81
+ library: 'peity', // the graphing library to use
82
+ method: 'average', // the grouping method
83
+ before: 0, // panning
84
+ after: -600, // panning
85
+ point_width: 1, // the detail of the chart
86
+ }
87
+
88
+ NETDATA.all_url = 'all2.js';
89
+ NETDATA.idle_between_charts = 50;
90
+ NETDATA.idle_between_loops = 100;
91
+ NETDATA.debug = 1;
92
+
93
+ if(NETDATA.debug) console.log('welcome to NETDATA');
94
+
95
+
96
+ // ----------------------------------------------------------------------------------------------------------------
97
+ // Error Handling
98
+
99
+ NETDATA.errorCodes = {
100
+ 100: { message: "Cannot load chart library", alert: true },
101
+ 101: { message: "Cannot load jQuery", alert: true },
102
+ 402: { message: "Chart library not found", alert: false },
103
+ 404: { message: "Chart not found", alert: false },
104
+ };
105
+ NETDATA.errorLast = {
106
+ code: 0,
107
+ message: "",
108
+ datetime: 0,
109
+ };
110
+
111
+ NETDATA.error = function(code, msg) {
112
+ NETDATA.errorLast.code = code;
113
+ NETDATA.errorLast.message = msg;
114
+ NETDATA.errorLast.datetime = new Date().getTime();
115
+
116
+ console.log("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
117
+
118
+ if(NETDATA.errorCodes[code].alert)
119
+ alert("ERROR " + code + ": " + NETDATA.errorCodes[code].message + ": " + msg);
120
+ }
121
+
122
+ NETDATA.errorReset = function() {
123
+ NETDATA.errorLast.code = 0;
124
+ NETDATA.errorLast.message = "You are doing fine!";
125
+ NETDATA.errorLast.datetime = 0;
126
+ }
127
+
128
+ NETDATA.messageInABox = function(div, width, height, message) {
129
+ div.innerHTML = '<table border="0"><tr><td width="' + width + '" height="' + height
130
+ + '" valign="middle" align="center">'
131
+ + message
132
+ + '</td></tr></table>';
133
+ }
134
+
135
+ // ----------------------------------------------------------------------------------------------------------------
136
+ // Load a script without jquery
137
+ // This is used to load jquery - after it is loaded, we use jquery
138
+
139
+ NETDATA._loadjQuery = function(callback) {
140
+ if(typeof jQuery == 'undefined') {
141
+ var script = document.createElement('script');
142
+ script.type = 'text/javascript';
143
+ script.async = true;
144
+ script.src = NETDATA.jQuery;
145
+
146
+ // script.onabort = onError;
147
+ script.onerror = function(err, t) { NETDATA.error(101, NETDATA.jQuery); };
148
+ if(typeof callback == "function")
149
+ script.onload = callback;
150
+
151
+ var s = document.getElementsByTagName('script')[0];
152
+ s.parentNode.insertBefore(script, s);
153
+ }
154
+ else if(typeof callback == "function")
155
+ callback();
156
+ }
157
+
158
+ NETDATA.generateDataURL = function(args) {
159
+ // build the data URL
160
+ var url = args.host + args.url;
161
+ url += "&points=";
162
+ url += args.points.toString();
163
+ url += "&group=";
164
+ url += args.method;
165
+ url += "&after=";
166
+ url += args.after || "0";
167
+ url += "&before=";
168
+ url += args.before || "0";
169
+ url += "&options=" + NETDATA.chartLibraries[args.library].options + '|';
170
+ url += (args.non_zero)?"nonzero":"";
171
+ url += "&format=" + NETDATA.chartLibraries[args.library].format;
172
+
173
+ if(args.dimensions)
174
+ url += "&dimensions=" + args.dimensions;
175
+
176
+ if(NETDATA.debug) console.log('generateDataURL(' + args + ') = ' + url );
177
+ return url;
178
+ }
179
+
180
+ NETDATA.loadCharts = function(targets, index, callback) {
181
+ if(NETDATA.debug) console.log('loadCharts(<targets, ' + index + ')');
182
+
183
+ var target = targets.get(index);
184
+
185
+ if(target == null) {
186
+ console.log('loaded all charts');
187
+ callback();
188
+ }
189
+ else {
190
+ var self = $(target);
191
+
192
+ if(!self.data('loaded')) {
193
+ var id = self.data('netdata');
194
+
195
+ var host = self.data('host') || NETDATA.chartDefaults.host;
196
+ var width = self.data('width') || NETDATA.chartDefaults.width;
197
+ var height = self.data('height') || NETDATA.chartDefaults.height;
198
+ var method = self.data('method') || NETDATA.chartDefaults.method;
199
+ var after = self.data('after') || NETDATA.chartDefaults.after;
200
+ var before = self.data('before') || NETDATA.chartDefaults.before;
201
+ var host = self.data('host') || NETDATA.chartDefaults.host;
202
+ var library = self.data('chart-library') || NETDATA.chartDefaults.library;
203
+ var dimensions = self.data('dimensions') || null;
204
+
205
+ if(typeof NETDATA.chartLibraries[library] == 'undefined') {
206
+ NETDATA.error(402, library);
207
+ NETDATA.messageInABox(target, width, height, 'chart library "' + library + '" is not found');
208
+ self.data('enabled', false);
209
+ NETDATA.loadCharts(targets, ++index, callback);
210
+ }
211
+ else {
212
+ var url = host + "/api/v1/chart?chart=" + id;
213
+
214
+ $.ajax( {
215
+ url: url,
216
+ crossDomain: true
217
+ })
218
+ .done(function(chart) {
219
+
220
+ var point_width = self.data('point-width') || NETDATA.chartLibraries[library].pixels;
221
+ var points = self.data('points') || Math.round(width / point_width);
222
+
223
+ var url = NETDATA.generateDataURL({
224
+ host: host,
225
+ url: chart.data_url,
226
+ dimensions: dimensions,
227
+ library: library,
228
+ method: method,
229
+ before: before,
230
+ points: points,
231
+ after: after,
232
+ non_zero: null
233
+ });
234
+
235
+ // done processing of this DIV
236
+ // store the processing result, in
237
+ // 'data' sections in the DIV
238
+ self
239
+ .data('chart', chart)
240
+ .data('chart-url', url)
241
+ .data('last-updated', 0)
242
+ .data('update-every', chart.update_every * 1000)
243
+ .data('enabled', true);
244
+ })
245
+ .fail(function() {
246
+ NETDATA.error(404, url);
247
+ NETDATA.messageInABox(target, width, height, 'chart "' + id + '" not found on url "' + url + '"');
248
+ self.data('enabled', false);
249
+ })
250
+ .always(function() {
251
+ NETDATA.loadCharts(targets, ++index, callback);
252
+ });
253
+ }
254
+ }
255
+ }
256
+ }
257
+
258
+ function netdataParsePageCharts() {
259
+ if(NETDATA.debug) console.log('processing web page defined charts');
260
+
261
+ // targets
262
+ // a list of all DIVs containing netdata charts
263
+
264
+ var targets = $('div[data-netdata]')
265
+ .bind('create', function(event, data) {
266
+ var self = $(this);
267
+ var lib = self.data('chart-library') || 'dygraph';
268
+ var method = lib + 'ChartCreate';
269
+
270
+ console.log('Calling ' + method + '()');
271
+ NETDATA[method].apply(this, arguments);
272
+ })
273
+ .bind('update', function() {
274
+ var self = $(this);
275
+ var lib = self.data('chart-library') || 'dygraph';
276
+ var method = lib + 'ChartUpdate';
277
+
278
+ console.log('Calling ' + method + '()');
279
+ NETDATA[method].apply(this, arguments);
280
+ });
281
+
282
+ NETDATA.loadCharts(targets, 0, function() {
283
+ // done processing all netdata DIVs in this page
284
+ // call the refresh handler
285
+ netdataRefreshTargets(targets, 0);
286
+ });
287
+ }
288
+
289
+ // ----------------------------------------------------------------------------------------------------------------
290
+ // Charts Libraries Registration
291
+
292
+ NETDATA.chartLibraries = {};
293
+
294
+ NETDATA.registerChartLibrary = function(library, url, format, options, min_pixels_per_point) {
295
+ console.log("registering chart library: " + library);
296
+
297
+ NETDATA.chartLibraries[library] = {
298
+ initialized: new Date().getTime(),
299
+ url: url,
300
+ format: format,
301
+ options: options,
302
+ pixels: min_pixels_per_point
303
+ };
304
+
305
+ console.log(NETDATA.chartLibraries);
306
+ }
307
+
308
+ // ----------------------------------------------------------------------------------------------------------------
309
+
310
+ //var chart = function() {
311
+ //}
312
+
313
+ //chart.prototype.color = function() {
314
+ // return 'red';
315
+ //}
316
+
317
+ //var c = new chart();
318
+ //c.color();
319
+
320
+ function netdataDownloadChartData(callback) {
321
+ var self = $(this);
322
+ var last = self.data('last-updated') || 0;
323
+ var every = self.data('update-every') || 1;
324
+
325
+ // check if this chart has to be refreshed now
326
+ var now = new Date().getTime();
327
+ if(last + every > now) {
328
+ if(typeof callback == 'function')
329
+ callback();
330
+ }
331
+ else {
332
+ var url = self.data('chart-url');
333
+
334
+ if(NETDATA.debug) console.log('netdataDownloadChartData(): downloading ' + url);
335
+
336
+ $.ajax( {
337
+ url: url,
338
+ crossDomain: true
339
+ })
340
+ .then(function(data) {
341
+ //var result = $.map(data.rows, function(item) {
342
+ // get from the 3rd column the 'v' member
343
+ //return item.c[3].v;
344
+ //});
345
+
346
+ // since we downloaded the data
347
+ // update the last-updated time to prevent
348
+ // another download too soon
349
+ self.data('last-updated', new Date().getTime());
350
+
351
+ // render it
352
+ var created = self.data('created');
353
+ self.trigger((created ? 'update' : 'create'), [data]).data('created', true)
354
+ })
355
+ .fail(function() {
356
+ console.log('failed to download chart data');
357
+ })
358
+ .always(function() {
359
+ var last = self.data('last-updated');
360
+ var now = new Date().getTime();
361
+ var dt = now - last;
362
+ self.data('refresh-dt', dt);
363
+
364
+ var element_name = self.data('dt-element-name') || null;
365
+ if(element_name) {
366
+ var element = document.getElementById(element_name) || null;
367
+ if(element) {
368
+ element.innerHTML = dt.toString();
369
+ }
370
+ }
371
+
372
+ if(typeof callback == 'function')
373
+ callback();
374
+ });
375
+ }
376
+ };
377
+
378
+ function netdataRefreshTargets(targets, index) {
379
+ // if(NETDATA.debug) console.log('netdataRefreshTargets(<targets, ' + index + ')');
380
+
381
+ var target = targets.get(index);
382
+
383
+ if(target == null) {
384
+ console.log('restart');
385
+
386
+ // finished, restart
387
+ setTimeout(function() {
388
+ netdataRefreshTargets(targets, 0);
389
+ }, NETDATA.idle_between_loops);
390
+ }
391
+ else {
392
+ var self = $(target);
393
+
394
+ if(!self.data('enabled')) {
395
+ netdataRefreshTargets(targets, ++index);
396
+ }
397
+ else {
398
+ setTimeout(function() {
399
+ netdataDownloadChartData.call(target, function() {
400
+ netdataRefreshTargets(targets, ++index);
401
+ });
402
+ }, NETDATA.idle_between_charts);
403
+ }
404
+ }
405
+ }
406
+
407
+ NETDATA.guid = function() {
408
+ function s4() {
409
+ return Math.floor((1 + Math.random()) * 0x10000)
410
+ .toString(16)
411
+ .substring(1);
412
+ }
413
+
414
+ return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
415
+ }
416
+
417
+ // ----------------------------------------------------------------------------------------------------------------
418
+ // piety
419
+
420
+ NETDATA.peityInitialize = function(callback) {
421
+ if(typeof netdataStopPeity == 'undefined') {
422
+ $.getScript(NETDATA.peity_js)
423
+ .done(function() {
424
+ NETDATA.registerChartLibrary('peity', NETDATA.peity_js, 'ssvcomma', 'null2zero|flip|min2max', 2);
425
+ })
426
+ .fail(function() {
427
+ NETDATA.error(100, NETDATA.peity_js);
428
+ })
429
+ .always(function() {
430
+ if(typeof callback == "function")
431
+ callback();
432
+ })
433
+ }
434
+ else if(typeof callback == "function")
435
+ callback();
436
+ };
437
+
438
+ NETDATA.peityChartUpdate = function(event, data) {
439
+ var self = $(this);
440
+ var instance = self.html(data).not('[data-created]');
441
+ instance.change();
442
+ }
443
+
444
+ NETDATA.peityChartCreate = function(event, data) {
445
+ var self = $(this);
446
+ var width = self.data('width') || NETDATA.chartDefaults.width;
447
+ var height = self.data('height') || NETDATA.chartDefaults.height;
448
+ var instance = self.html(data).not('[data-created]');
449
+
450
+ instance.peity('line', {
451
+ width: width,
452
+ height: height
453
+ })
454
+ .data('created', true);
455
+ }
456
+
457
+ // ----------------------------------------------------------------------------------------------------------------
458
+ // sparkline
459
+
460
+ NETDATA.sparklineInitialize = function(callback) {
461
+ if(typeof netdataStopSparkline == 'undefined') {
462
+ $.getScript(NETDATA.sparkline_js)
463
+ .done(function() {
464
+ NETDATA.registerChartLibrary('sparkline', NETDATA.sparkline_js, 'array', 'flip|min2max', 2);
465
+ })
466
+ .fail(function() {
467
+ NETDATA.error(100, NETDATA.sparkline_js);
468
+ })
469
+ .always(function() {
470
+ if(typeof callback == "function")
471
+ callback();
472
+ })
473
+ }
474
+ else if(typeof callback == "function")
475
+ callback();
476
+ };
477
+
478
+ NETDATA.sparklineChartUpdate = function(event, data) {
479
+ var self = $(this);
480
+ var options = self.data('sparkline-options');
481
+ self.sparkline(data, options);
482
+ }
483
+
484
+ NETDATA.sparklineChartCreate = function(event, data) {
485
+ var self = $(this);
486
+ var chart = self.data('chart');
487
+ var width = self.data('width') || NETDATA.chartDefaults.width;
488
+ var height = self.data('height') || NETDATA.chartDefaults.height;
489
+ var type = self.data('sparkline-type') || 'line';
490
+ var lineColor = self.data('sparkline-lineColor') || undefined;
491
+ var fillColor = self.data('sparkline-fillColor') || (chart.chart_type == 'line')?'#FFF':undefined;
492
+ var chartRangeMin = self.data('sparkline-chartRangeMin') || undefined;
493
+ var chartRangeMax = self.data('sparkline-chartRangeMax') || undefined;
494
+ var composite = self.data('sparkline-composite') || undefined;
495
+ var enableTagOptions = self.data('sparkline-enableTagOptions') || undefined;
496
+ var tagOptionPrefix = self.data('sparkline-tagOptionPrefix') || undefined;
497
+ var tagValuesAttribute = self.data('sparkline-tagValuesAttribute') || undefined;
498
+ var disableHiddenCheck = self.data('sparkline-disableHiddenCheck') || undefined;
499
+ var defaultPixelsPerValue = self.data('sparkline-defaultPixelsPerValue') || undefined;
500
+ var spotColor = self.data('sparkline-spotColor') || undefined;
501
+ var minSpotColor = self.data('sparkline-minSpotColor') || undefined;
502
+ var maxSpotColor = self.data('sparkline-maxSpotColor') || undefined;
503
+ var spotRadius = self.data('sparkline-spotRadius') || undefined;
504
+ var valueSpots = self.data('sparkline-valueSpots') || undefined;
505
+ var highlightSpotColor = self.data('sparkline-highlightSpotColor') || undefined;
506
+ var highlightLineColor = self.data('sparkline-highlightLineColor') || undefined;
507
+ var lineWidth = self.data('sparkline-lineWidth') || undefined;
508
+ var normalRangeMin = self.data('sparkline-normalRangeMin') || undefined;
509
+ var normalRangeMax = self.data('sparkline-normalRangeMax') || undefined;
510
+ var drawNormalOnTop = self.data('sparkline-drawNormalOnTop') || undefined;
511
+ var xvalues = self.data('sparkline-xvalues') || undefined;
512
+ var chartRangeClip = self.data('sparkline-chartRangeClip') || undefined;
513
+ var xvalues = self.data('sparkline-xvalues') || undefined;
514
+ var chartRangeMinX = self.data('sparkline-chartRangeMinX') || undefined;
515
+ var chartRangeMaxX = self.data('sparkline-chartRangeMaxX') || undefined;
516
+ var disableInteraction = self.data('sparkline-disableInteraction') || false;
517
+ var disableTooltips = self.data('sparkline-disableTooltips') || false;
518
+ var disableHighlight = self.data('sparkline-disableHighlight') || false;
519
+ var highlightLighten = self.data('sparkline-highlightLighten') || 1.4;
520
+ var highlightColor = self.data('sparkline-highlightColor') || undefined;
521
+ var tooltipContainer = self.data('sparkline-tooltipContainer') || undefined;
522
+ var tooltipClassname = self.data('sparkline-tooltipClassname') || undefined;
523
+ var tooltipFormat = self.data('sparkline-tooltipFormat') || undefined;
524
+ var tooltipPrefix = self.data('sparkline-tooltipPrefix') || undefined;
525
+ var tooltipSuffix = self.data('sparkline-tooltipSuffix') || ' ' + chart.units;
526
+ var tooltipSkipNull = self.data('sparkline-tooltipSkipNull') || true;
527
+ var tooltipValueLookups = self.data('sparkline-tooltipValueLookups') || undefined;
528
+ var tooltipFormatFieldlist = self.data('sparkline-tooltipFormatFieldlist') || undefined;
529
+ var tooltipFormatFieldlistKey = self.data('sparkline-tooltipFormatFieldlistKey') || undefined;
530
+ var numberFormatter = self.data('sparkline-numberFormatter') || function(n){ return n.toFixed(2); };
531
+ var numberDigitGroupSep = self.data('sparkline-numberDigitGroupSep') || undefined;
532
+ var numberDecimalMark = self.data('sparkline-numberDecimalMark') || undefined;
533
+ var numberDigitGroupCount = self.data('sparkline-numberDigitGroupCount') || undefined;
534
+ var animatedZooms = self.data('sparkline-animatedZooms') || false;
535
+
536
+ var options = {
537
+ type: type,
538
+ lineColor: lineColor,
539
+ fillColor: fillColor,
540
+ chartRangeMin: chartRangeMin,
541
+ chartRangeMax: chartRangeMax,
542
+ composite: composite,
543
+ enableTagOptions: enableTagOptions,
544
+ tagOptionPrefix: tagOptionPrefix,
545
+ tagValuesAttribute: tagValuesAttribute,
546
+ disableHiddenCheck: disableHiddenCheck,
547
+ defaultPixelsPerValue: defaultPixelsPerValue,
548
+ spotColor: spotColor,
549
+ minSpotColor: minSpotColor,
550
+ maxSpotColor: maxSpotColor,
551
+ spotRadius: spotRadius,
552
+ valueSpots: valueSpots,
553
+ highlightSpotColor: highlightSpotColor,
554
+ highlightLineColor: highlightLineColor,
555
+ lineWidth: lineWidth,
556
+ normalRangeMin: normalRangeMin,
557
+ normalRangeMax: normalRangeMax,
558
+ drawNormalOnTop: drawNormalOnTop,
559
+ xvalues: xvalues,
560
+ chartRangeClip: chartRangeClip,
561
+ chartRangeMinX: chartRangeMinX,
562
+ chartRangeMaxX: chartRangeMaxX,
563
+ disableInteraction: disableInteraction,
564
+ disableTooltips: disableTooltips,
565
+ disableHighlight: disableHighlight,
566
+ highlightLighten: highlightLighten,
567
+ highlightColor: highlightColor,
568
+ tooltipContainer: tooltipContainer,
569
+ tooltipClassname: tooltipClassname,
570
+ tooltipChartTitle: chart.title,
571
+ tooltipFormat: tooltipFormat,
572
+ tooltipPrefix: tooltipPrefix,
573
+ tooltipSuffix: tooltipSuffix,
574
+ tooltipSkipNull: tooltipSkipNull,
575
+ tooltipValueLookups: tooltipValueLookups,
576
+ tooltipFormatFieldlist: tooltipFormatFieldlist,
577
+ tooltipFormatFieldlistKey: tooltipFormatFieldlistKey,
578
+ numberFormatter: numberFormatter,
579
+ numberDigitGroupSep: numberDigitGroupSep,
580
+ numberDecimalMark: numberDecimalMark,
581
+ numberDigitGroupCount: numberDigitGroupCount,
582
+ animatedZooms: animatedZooms,
583
+ width: width,
584
+ height: height
585
+ };
586
+
587
+ var uuid = NETDATA.guid();
588
+ this.innerHTML = '<div style="display: inline-block; position: relative;" id="' + uuid + '"></div>';
589
+ var div = document.getElementById(uuid);
590
+
591
+ self.sparkline(data, options);
592
+ self.data('sparkline-options', options)
593
+ .data('uuid', uuid)
594
+ .data('created', true);
595
+ };
596
+
597
+ // ----------------------------------------------------------------------------------------------------------------
598
+ // dygraph
599
+
600
+ NETDATA.dygraphAllCharts = [];
601
+ NETDATA.dygraphInitSync = function(callback) {
602
+ //$.getScript(NETDATA.serverDefault + 'dygraph-synchronizer.js')
603
+ // .always(function() {
604
+ if(typeof callback == "function")
605
+ callback();
606
+ // })
607
+ }
608
+
609
+ NETDATA.dygraphSync = null;
610
+ NETDATA.dygraphSyncAll = function() {
611
+ if(NETDATA.dygraphSync) {
612
+ NETDATA.dygraphSync.detach();
613
+ NETDATA.dygraphSync = null;
614
+ }
615
+
616
+ NETDATA.dygraphSync = Dygraph.synchronize(NETDATA.dygraphAllCharts, {
617
+ selection: true,
618
+ zoom: false
619
+ });
620
+ }
621
+
622
+ NETDATA.dygraphInitialize = function(callback) {
623
+ if(typeof netdataStopDygraph == 'undefined') {
624
+ $.getScript(NETDATA.dygraph_js)
625
+ .done(function() {
626
+ NETDATA.registerChartLibrary('dygraph', NETDATA.dygraph_js, 'json', 'ms|flip', 2);
627
+ })
628
+ .fail(function() {
629
+ NETDATA.error(100, NETDATA.dygraph_js);
630
+ })
631
+ .always(function() {
632
+ NETDATA.dygraphInitSync(callback);
633
+ })
634
+ }
635
+ else if(typeof callback == "function")
636
+ callback();
637
+ };
638
+
639
+ NETDATA.dygraphChartUpdate = function(event, data) {
640
+ var self = $(this);
641
+ var dygraph = self.data('dygraph-instance');
642
+
643
+ if(typeof data.update_every != 'undefined')
644
+ self.data('update-every', data.update_every * 1000);
645
+
646
+ if(dygraph != null) {
647
+ console.log('updating dygraphs');
648
+ dygraph.updateOptions( { 'file': data.data, 'labels': data.labels } );
649
+ }
650
+ else
651
+ console.log('not updating dygraphs');
652
+ };
653
+
654
+ NETDATA.dygraphChartCreate = function(event, data) {
655
+ var self = $(this);
656
+ var width = self.data('width') || NETDATA.chartDefaults.width;
657
+ var height = self.data('height') || NETDATA.chartDefaults.height;
658
+ var chart = self.data('chart');
659
+ var title = self.data('dygraph-title') || chart.title;
660
+ var titleHeight = self.data('dygraph-titleHeight') || 20;
661
+ var labelsDiv = self.data('dygraph-labelsDiv') || undefined;
662
+ var connectSeparatedPoints = self.data('dygraph-connectSeparatedPoints') || false;
663
+ var yLabelWidth = self.data('dygraph-yLabelWidth') || 12;
664
+ var stackedGraph = self.data('dygraph-stackedGraph') || (chart.chart_type == 'stacked')?true:false;
665
+ var stackedGraphNaNFill = self.data('dygraph-stackedGraphNaNFill') || 'none';
666
+ var hideOverlayOnMouseOut = self.data('dygraph-hideOverlayOnMouseOut') || true;
667
+ var fillGraph = self.data('dygraph-fillGraph') || (chart.chart_type == 'area')?true:false;
668
+ var drawPoints = self.data('dygraph-drawPoints') || false;
669
+ var labelsDivStyles = self.data('dygraph-labelsDivStyles') || { 'fontSize':'10' };
670
+ var labelsDivWidth = self.data('dygraph-labelsDivWidth') || 250;
671
+ var labelsSeparateLines = self.data('dygraph-labelsSeparateLines') || false;
672
+ var labelsShowZeroValues = self.data('dygraph-labelsShowZeroValues') || true;
673
+ var legend = self.data('dygraph-legend') || 'onmouseover';
674
+ var showLabelsOnHighlight = self.data('dygraph-showLabelsOnHighlight') || true;
675
+ var gridLineColor = self.data('dygraph-gridLineColor') || '#EEE';
676
+ var axisLineColor = self.data('dygraph-axisLineColor') || '#EEE';
677
+ var maxNumberWidth = self.data('dygraph-maxNumberWidth') || 8;
678
+ var sigFigs = self.data('dygraph-sigFigs') || null;
679
+ var digitsAfterDecimal = self.data('dygraph-digitsAfterDecimal') || 2;
680
+ var axisLabelFontSize = self.data('dygraph-axisLabelFontSize') || 10;
681
+ var axisLineWidth = self.data('dygraph-axisLineWidth') || 0.3;
682
+ var drawAxis = self.data('dygraph-drawAxis') || true;
683
+ var strokeWidth = self.data('dygraph-strokeWidth') || 1.0;
684
+ var drawGapEdgePoints = self.data('dygraph-drawGapEdgePoints') || true;
685
+ var colors = self.data('dygraph-colors') || NETDATA.colors;
686
+ var pointSize = self.data('dygraph-pointSize') || 1;
687
+ var stepPlot = self.data('dygraph-stepPlot') || false;
688
+ var strokeBorderColor = self.data('dygraph-strokeBorderColor') || 'white';
689
+ var strokeBorderWidth = self.data('dygraph-strokeBorderWidth') || (chart.chart_type == 'stacked')?1.0:0.0;
690
+ var strokePattern = self.data('dygraph-strokePattern') || undefined;
691
+ var highlightCircleSize = self.data('dygraph-highlightCircleSize') || 3;
692
+ var highlightSeriesOpts = self.data('dygraph-highlightSeriesOpts') || { strokeWidth: 1.5 };
693
+ var highlightSeriesBackgroundAlpha = self.data('dygraph-highlightSeriesBackgroundAlpha') || (chart.chart_type == 'stacked')?0.7:0.5;
694
+ var pointClickCallback = self.data('dygraph-pointClickCallback') || undefined;
695
+ var showRangeSelector = self.data('dygraph-showRangeSelector') || false;
696
+ var showRoller = self.data('dygraph-showRoller') || false;
697
+ var valueFormatter = self.data('dygraph-valueFormatter') || undefined; //function(x){ return x.toFixed(2); };
698
+ var rightGap = self.data('dygraph-rightGap') || 5;
699
+ var drawGrid = self.data('dygraph-drawGrid') || true;
700
+ var drawXGrid = self.data('dygraph-drawXGrid') || undefined;
701
+ var drawYGrid = self.data('dygraph-drawYGrid') || undefined;
702
+ var gridLinePattern = self.data('dygraph-gridLinePattern') || null;
703
+ var gridLineWidth = self.data('dygraph-gridLineWidth') || 0.3;
704
+
705
+ var options = {
706
+ title: title,
707
+ titleHeight: titleHeight,
708
+ ylabel: chart.units,
709
+ yLabelWidth: yLabelWidth,
710
+ connectSeparatedPoints: connectSeparatedPoints,
711
+ drawPoints: drawPoints,
712
+ fillGraph: fillGraph,
713
+ stackedGraph: stackedGraph,
714
+ stackedGraphNaNFill: stackedGraphNaNFill,
715
+ drawGrid: drawGrid,
716
+ drawXGrid: drawXGrid,
717
+ drawYGrid: drawYGrid,
718
+ gridLinePattern: gridLinePattern,
719
+ gridLineWidth: gridLineWidth,
720
+ gridLineColor: gridLineColor,
721
+ axisLineColor: axisLineColor,
722
+ axisLineWidth: axisLineWidth,
723
+ drawAxis: drawAxis,
724
+ hideOverlayOnMouseOut: hideOverlayOnMouseOut,
725
+ labelsDiv: labelsDiv,
726
+ labelsDivStyles: labelsDivStyles,
727
+ labelsDivWidth: labelsDivWidth,
728
+ labelsSeparateLines: labelsSeparateLines,
729
+ labelsShowZeroValues: labelsShowZeroValues,
730
+ labelsKMB: false,
731
+ labelsKMG2: false,
732
+ legend: legend,
733
+ showLabelsOnHighlight: showLabelsOnHighlight,
734
+ maxNumberWidth: maxNumberWidth,
735
+ sigFigs: sigFigs,
736
+ digitsAfterDecimal: digitsAfterDecimal,
737
+ axisLabelFontSize: axisLabelFontSize,
738
+ colors: colors,
739
+ strokeWidth: strokeWidth,
740
+ drawGapEdgePoints: drawGapEdgePoints,
741
+ pointSize: pointSize,
742
+ stepPlot: stepPlot,
743
+ strokeBorderColor: strokeBorderColor,
744
+ strokeBorderWidth: strokeBorderWidth,
745
+ strokePattern: strokePattern,
746
+ highlightCircleSize: highlightCircleSize,
747
+ highlightSeriesOpts: highlightSeriesOpts,
748
+ highlightSeriesBackgroundAlpha: highlightSeriesBackgroundAlpha,
749
+ pointClickCallback: pointClickCallback,
750
+ showRangeSelector: showRangeSelector,
751
+ showRoller: showRoller,
752
+ valueFormatter: valueFormatter,
753
+ rightGap: rightGap,
754
+ width: width,
755
+ height: height,
756
+ labels: data.labels,
757
+ axes: {
758
+ x: {
759
+ pixelsPerLabel: 50,
760
+ ticker: Dygraph.dateTicker,
761
+ axisLabelFormatter: function (d, gran) {
762
+ return Dygraph.zeropad(d.getHours()) + ":" + Dygraph.zeropad(d.getMinutes()) + ":" + Dygraph.zeropad(d.getSeconds());
763
+ },
764
+ valueFormatter :function (ms) {
765
+ var d = new Date(ms);
766
+ return Dygraph.zeropad(d.getHours()) + ":" + Dygraph.zeropad(d.getMinutes()) + ":" + Dygraph.zeropad(d.getSeconds());
767
+ }
768
+ },
769
+ y: {
770
+ pixelsPerLabel: 15,
771
+ }
772
+ }
773
+ };
774
+
775
+ var uuid = NETDATA.guid();
776
+ self.html('<div id="' + uuid + '"></div>');
777
+
778
+ var dchart = new Dygraph(document.getElementById(uuid),
779
+ data.data, options);
780
+
781
+ self.data('dygraph-instance', dchart)
782
+ .data('dygraph-options', options)
783
+ .data('uuid', uuid)
784
+ .data('created', true);
785
+
786
+ //NETDATA.dygraphAllCharts.push(dchart);
787
+ //if(NETDATA.dygraphAllCharts.length > 1)
788
+ // NETDATA.dygraphSyncAll();
789
+ };
790
+
791
+ // ----------------------------------------------------------------------------------------------------------------
792
+ // morris
793
+
794
+ NETDATA.morrisInitialize = function(callback) {
795
+ if(typeof netdataStopMorris == 'undefined') {
796
+ var fileref = document.createElement("link");
797
+ fileref.setAttribute("rel", "stylesheet");
798
+ fileref.setAttribute("type", "text/css");
799
+ fileref.setAttribute("href", NETDATA.morris_css);
800
+
801
+ if (typeof fileref != "undefined")
802
+ document.getElementsByTagName("head")[0].appendChild(fileref);
803
+
804
+ $.getScript(NETDATA.morris_js)
805
+ .done(function() {
806
+ NETDATA.registerChartLibrary('morris', NETDATA.morris_js, 'json', 'objectrows|ms', 10);
807
+ })
808
+ .fail(function() {
809
+ NETDATA.error(100, NETDATA.morris_js);
810
+ })
811
+ .always(function() {
812
+ if(typeof callback == "function")
813
+ callback();
814
+ })
815
+ }
816
+ else if(typeof callback == "function")
817
+ callback();
818
+ };
819
+
820
+ NETDATA.morrisChartUpdate = function(event, data) {
821
+ var self = $(this);
822
+ var width = self.data('width') || NETDATA.chartDefaults.width;
823
+ var height = self.data('height') || NETDATA.chartDefaults.height;
824
+ var morris = self.data('morris-instance');
825
+
826
+ if(typeof data.update_every != 'undefined')
827
+ self.data('update-every', data.update_every * 1000);
828
+
829
+ if(morris != null) {
830
+ console.log('updating morris');
831
+ morris.setData(data.data);
832
+ }
833
+ else
834
+ console.log('not updating morris');
835
+ };
836
+
837
+ NETDATA.morrisChartCreate = function(event, data) {
838
+ var self = $(this);
839
+ var width = self.data('width') || NETDATA.chartDefaults.width;
840
+ var height = self.data('height') || NETDATA.chartDefaults.height;
841
+ var chart = self.data('chart');
842
+
843
+ self.html('<div id="morris-' + chart.id + '" style="width: ' + width + 'px; height: ' + height + 'px;"></div>');
844
+
845
+ // remove the 'time' element from the labels
846
+ data.labels.splice(0, 1);
847
+
848
+ var options = {
849
+ element: 'morris-' + chart.id,
850
+ data: data.data,
851
+ xkey: 'time',
852
+ ykeys: data.labels,
853
+ labels: data.labels,
854
+ lineWidth: 2,
855
+ pointSize: 2,
856
+ smooth: true,
857
+ hideHover: 'auto',
858
+ parseTime: true,
859
+ continuousLine: false,
860
+ behaveLikeLine: false,
861
+ width: width,
862
+ height: height
863
+ };
864
+
865
+ var morris;
866
+ if(chart.chart_type == 'line')
867
+ morris = new Morris.Line(options);
868
+
869
+ else if(chart.chart_type == 'area') {
870
+ options.behaveLikeLine = true;
871
+ morris = new Morris.Area(options);
872
+ }
873
+ else // stacked
874
+ morris = new Morris.Area(options);
875
+
876
+ self.data('morris-instance', morris)
877
+ .data('created', true);
878
+ };
879
+
880
+ // ----------------------------------------------------------------------------------------------------------------
881
+ // raphael
882
+
883
+ NETDATA.raphaelInitialize = function(callback) {
884
+ if(typeof netdataStopRaphael == 'undefined') {
885
+ $.getScript(NETDATA.raphael_js)
886
+ .done(function() {
887
+ NETDATA.registerChartLibrary('raphael', NETDATA.raphael_js, 'json', 'flip|min2max', 1);
888
+ })
889
+ .fail(function() {
890
+ NETDATA.error(100, NETDATA.raphael_js);
891
+ })
892
+ .always(function() {
893
+ if(typeof callback == "function")
894
+ callback();
895
+ })
896
+ }
897
+ else if(typeof callback == "function")
898
+ callback();
899
+ };
900
+
901
+ NETDATA.raphaelChartUpdate = function(event, data) {
902
+ var self = $(this);
903
+ var width = self.data('width') || NETDATA.chartDefaults.width;
904
+ var height = self.data('height') || NETDATA.chartDefaults.height;
905
+
906
+ self.raphael(data, {
907
+ width: width,
908
+ height: height
909
+ })
910
+ };
911
+
912
+ NETDATA.raphaelChartCreate = function(event, data) {
913
+ var self = $(this);
914
+ var width = self.data('width') || NETDATA.chartDefaults.width;
915
+ var height = self.data('height') || NETDATA.chartDefaults.height;
916
+
917
+ self.raphael(data, {
918
+ width: width,
919
+ height: height
920
+ })
921
+ .data('created', true);
922
+ };
923
+
924
+ // ----------------------------------------------------------------------------------------------------------------
925
+ // google charts
926
+
927
+ NETDATA.googleInitialize = function(callback) {
928
+ if(typeof netdataStopGoogleCharts == 'undefined' && typeof google != 'undefined') {
929
+ NETDATA.registerChartLibrary('google', NETDATA.google_js, 'datatable', '', 3);
930
+ if(typeof callback == "function")
931
+ callback();
932
+ }
933
+ else if(typeof callback == "function")
934
+ callback();
935
+ };
936
+
937
+ NETDATA.googleChartUpdate = function(event, data) {
938
+ var self = $(this);
939
+ var width = self.data('width') || NETDATA.chartDefaults.width;
940
+ var height = self.data('height') || NETDATA.chartDefaults.height;
941
+ var gchart = self.data('google-instance');
942
+ var options = self.data('google-options');
943
+
944
+ if(typeof data.update_every != 'undefined')
945
+ self.data('update-every', data.update_every * 1000);
946
+
947
+ var datatable = new google.visualization.DataTable(data);
948
+
949
+ gchart.draw(datatable, options);
950
+ };
951
+
952
+ NETDATA.googleChartCreate = function(event, data) {
953
+ var self = $(this);
954
+ var width = self.data('width') || NETDATA.chartDefaults.width;
955
+ var height = self.data('height') || NETDATA.chartDefaults.height;
956
+ var chart = self.data('chart');
957
+
958
+ var datatable = new google.visualization.DataTable(data);
959
+ var gchart;
960
+
961
+ var options = {
962
+ width: width,
963
+ height: height,
964
+ lineWidth: 1,
965
+ title: chart.title,
966
+ fontSize: 11,
967
+ hAxis: {
968
+ // title: "Time of Day",
969
+ // format:'HH:mm:ss',
970
+ viewWindowMode: 'maximized',
971
+ slantedText: false,
972
+ format:'HH:mm:ss',
973
+ textStyle: {
974
+ fontSize: 9
975
+ },
976
+ gridlines: {
977
+ color: '#EEE'
978
+ }
979
+ },
980
+ vAxis: {
981
+ title: chart.units,
982
+ viewWindowMode: 'pretty',
983
+ minValue: -0.1,
984
+ maxValue: 0.1,
985
+ direction: 1,
986
+ textStyle: {
987
+ fontSize: 9
988
+ },
989
+ gridlines: {
990
+ color: '#EEE'
991
+ }
992
+ },
993
+ chartArea: {
994
+ width: '65%',
995
+ height: '80%'
996
+ },
997
+ focusTarget: 'category',
998
+ annotation: {
999
+ '1': {
1000
+ style: 'line'
1001
+ }
1002
+ },
1003
+ pointsVisible: 0,
1004
+ titlePosition: 'out',
1005
+ titleTextStyle: {
1006
+ fontSize: 11
1007
+ },
1008
+ tooltip: {
1009
+ isHtml: false,
1010
+ ignoreBounds: true,
1011
+ textStyle: {
1012
+ fontSize: 9
1013
+ }
1014
+ },
1015
+ curveType: 'function',
1016
+ areaOpacity: 0.3,
1017
+ isStacked: false
1018
+ };
1019
+
1020
+ switch(chart.chart_type) {
1021
+ case "area":
1022
+ options.vAxis.viewWindowMode = 'maximized';
1023
+ gchart = new google.visualization.AreaChart(this);
1024
+ break;
1025
+
1026
+ case "stacked":
1027
+ options.isStacked = true;
1028
+ options.areaOpacity = 0.85;
1029
+ options.vAxis.viewWindowMode = 'maximized';
1030
+ options.vAxis.minValue = null;
1031
+ options.vAxis.maxValue = null;
1032
+ gchart = new google.visualization.AreaChart(this);
1033
+ break;
1034
+
1035
+ default:
1036
+ case "line":
1037
+ options.lineWidth = 2;
1038
+ gchart = new google.visualization.LineChart(this);
1039
+ break;
1040
+ }
1041
+
1042
+ gchart.draw(datatable, options);
1043
+
1044
+ self.data('google-instance', gchart)
1045
+ .data('google-options', options)
1046
+ .data('created', true);
1047
+ };
1048
+
1049
+ // ----------------------------------------------------------------------------------------------------------------
1050
+ // load all libraries and initialize
1051
+
1052
+ NETDATA.errorReset();
1053
+
1054
+ NETDATA._loadjQuery(function() {
1055
+ NETDATA.raphaelInitialize(function() {
1056
+ NETDATA.morrisInitialize(function() {
1057
+ NETDATA.peityInitialize(function() {
1058
+ NETDATA.sparklineInitialize(function() {
1059
+ NETDATA.dygraphInitialize(function() {
1060
+ NETDATA.googleInitialize(function() {
1061
+ netdataParsePageCharts();
1062
+ }) // google
1063
+ }) // dygraph.js
1064
+ }) // sparkline.js
1065
+ }) // piety.js
1066
+ }) // morris.js
1067
+ }) // raphael.js
1068
+ });
1069
+
1070
+})(window);
1071
+
web/datasource.html
+56
-56
@@ -1,56 +1,56 @@
1
-<html>
2
- <style>
3
- * {font-family:Arial}
4
- div {float: left; margin: 0 0 0 0; }
5
- </style>
6
- <head>
7
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
8
- <title>NetData Datasource Example</title>
9
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
10
- <script type="text/javascript">
11
-
12
- google.load('visualization', '1', {packages: ['charteditor']});
13
- // google.load('visualization', '1.0'); // Note: No need to specify chart libraries.
14
-
15
- google.setOnLoadCallback(drawVisualization);
16
-
17
- var wrapper;
18
- function drawVisualization() {
19
- wrapper = new google.visualization.ChartWrapper({
20
- containerId: 'graph_div',
21
- chartType: 'AreaChart',
22
- dataSourceUrl: 'http:/datasource/system.cpu/60/1/max', // it needs a protocol to work, even in relative URLs
23
- refreshInterval: 1,
24
- options: {
25
- isStacked: true,
26
- areaOpacity: 0.85,
27
- lineWidth: 1,
28
- title: 'CPU utilization',
29
- width: window.innerWidth - 50,
30
- height: window.innerHeight - 50,
31
- hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
32
- vAxis: {title: "percent", viewWindowMode: 'pretty', minValue: 0, maxValue: 100},
33
- focusTarget: 'category',
34
- annotation: {'1': {style: 'line'}},
35
- },
36
- });
37
- wrapper.draw();
38
- }
39
-
40
- function openEditor() {
41
- var editor = new google.visualization.ChartEditor();
42
- google.visualization.events.addListener(editor, 'ok', function() {
43
- wrapper = editor.getChartWrapper();
44
- wrapper.draw(document.getElementById('graph_div'));
45
- });
46
- editor.openDialog(wrapper);
47
- }
48
-
49
- </script>
50
- </head>
51
- <body>
52
- <input type='button' onclick='openEditor()' value='Open Editor'>
53
- <br/>
54
- <div><div id="graph_div"/></div>
55
- </body>
56
-</html>
1
+<html>
2
+ <style>
3
+ * {font-family:Arial}
4
+ div {float: left; margin: 0 0 0 0; }
5
+ </style>
6
+ <head>
7
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
8
+ <title>NetData Datasource Example</title>
9
+ <script type="text/javascript" src="http://www.google.com/jsapi"></script>
10
+ <script type="text/javascript">
11
+
12
+ google.load('visualization', '1', {packages: ['charteditor']});
13
+ // google.load('visualization', '1.0'); // Note: No need to specify chart libraries.
14
+
15
+ google.setOnLoadCallback(drawVisualization);
16
+
17
+ var wrapper;
18
+ function drawVisualization() {
19
+ wrapper = new google.visualization.ChartWrapper({
20
+ containerId: 'graph_div',
21
+ chartType: 'AreaChart',
22
+ dataSourceUrl: 'http:/datasource/system.cpu/60/1/max', // it needs a protocol to work, even in relative URLs
23
+ refreshInterval: 1,
24
+ options: {
25
+ isStacked: true,
26
+ areaOpacity: 0.85,
27
+ lineWidth: 1,
28
+ title: 'CPU utilization',
29
+ width: window.innerWidth - 50,
30
+ height: window.innerHeight - 50,
31
+ hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
32
+ vAxis: {title: "percent", viewWindowMode: 'pretty', minValue: 0, maxValue: 100},
33
+ focusTarget: 'category',
34
+ annotation: {'1': {style: 'line'}},
35
+ },
36
+ });
37
+ wrapper.draw();
38
+ }
39
+
40
+ function openEditor() {
41
+ var editor = new google.visualization.ChartEditor();
42
+ google.visualization.events.addListener(editor, 'ok', function() {
43
+ wrapper = editor.getChartWrapper();
44
+ wrapper.draw(document.getElementById('graph_div'));
45
+ });
46
+ editor.openDialog(wrapper);
47
+ }
48
+
49
+ </script>
50
+ </head>
51
+ <body>
52
+ <input type='button' onclick='openEditor()' value='Open Editor'>
53
+ <br/>
54
+ <div><div id="graph_div"/></div>
55
+ </body>
56
+</html>