new demosites.html
Costa Tsaousis (ktsaou) committed
Apr 28, 2016 at 14:45 UTC
225955e7bae95a1ee92ea1806fea2c01c10810b6
2 files changed
+388
-163
web/dashboard.js
+1
-1
@@ -1126,7 +1126,7 @@
1126
var w = that.element.offsetWidth;
1127
if(w === null || w === 0) {
1128
// the div is hidden
1129
- // this is resize the chart when next viewed
1129
+ // this will resize the chart when next viewed
1130
that.tm.last_resized = 0;
1131
}
1132
else
web/demosites.html
+387
-162
@@ -47,13 +47,13 @@
47
// This has to be done, after dashboard.js is loaded
48
49
// destroy charts not shown (lowers memory on the browser)
50
- NETDATA.options.current.destroy_on_hide = true;
50
+ NETDATA.options.current.destroy_on_hide = false;
51
52
// set this to false, to always show all dimensions
53
NETDATA.options.current.eliminate_zero_dimensions = true;
54
55
// lower the pressure on this browser
56
- NETDATA.options.current.concurrent_refreshes = false;
56
+ NETDATA.options.current.concurrent_refreshes = true;
57
58
// if the tv browser is too slow (a pi?)
59
// set this to false
@@ -61,234 +61,459 @@
61
62
// always update the charts, even if focus is lost
63
// NETDATA.options.current.stop_updates_when_focus_is_lost = false;
64
+ </script>
65
65
- // Since you may render charts from many servers and any of them may
66
- // become offline for some time, the charts will break.
67
- // This will reload the page every RELOAD_EVERY minutes
66
+ <style>
67
69
- var RELOAD_EVERY = 5;
70
- setTimeout(function(){
71
- location.reload();
72
- }, RELOAD_EVERY * 60 * 1000);
68
+.mysparkline {
69
+ position: relative;
70
+ display: inline-block;
71
+ min-height: 50px;
72
+}
73
74
- </script>
74
+.mysparkline-overchart-label {
75
+ position: absolute;
76
+ display: block;
77
+ top: 0;
78
+ left: 10px;
79
+ bottom: 0;
80
+ right: 0;
81
+ font-size: 1vw;
82
+ z-index: 1;
83
+}
84
+
85
+.mysparkline-overchart-value {
86
+ position: absolute;
87
+ display: block;
88
+ top: 1.1vw;
89
+ left: 10px;
90
+ bottom: 0;
91
+ right: 0;
92
+ font-size: 3vw;
93
+ z-index: 2;
94
+ text-shadow: #333 0px 0px 2px;
95
+}
96
+
97
+ </style>
98
99
</head>
77
-<body>
100
+<body style="text-align: center;">
101
79
-<div style="width: 100%; text-align: center; display: inline-block;">
102
+<div class="container">
103
81
- <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
82
- <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
83
- <b>CPU On both servers</b>
104
+ <div style="text-align: center; font-size: 13vw; height: 14vw;">
105
+ <b>netdata</b>
106
+ </div>
107
+ <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
108
+ real-time performance monitoring
109
+ </div>
110
+ <div style="width:80%; text-align: right; font-size: 2.7vw;">
111
+ done... <strong>real-time</strong>!
112
+ </div>
113
+ <div style="padding-top: 3vw; padding-bottom: 1vw; text-align: center; font-size: 2vw;">
114
+ enter a <b>netdata</b> demo server
115
+ </div>
116
+
117
+ <div style="width: 100%; text-align: center; padding-top: 2vw;">
118
+ <div style="width: 100%; text-align: center;">
119
+
120
+ <div style="width: 25%; display: inline-block;">
121
+ <div data-netdata="netdata.requests"
122
+ data-host="//netdata1.firehol.org"
123
+ data-title="EU - London"
124
+ data-chart-library="gauge"
125
+ data-width="100%"
126
+ data-after="-300"
127
+ data-points="300"
128
+ data-colors="#558855"
129
+ ></div>
130
+ <br/> <br/>
131
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata1.firehol.org'" style="font-size: 1.5vw;">Enter London!</button>
132
+ <div style="font-size: 0.8vw;">
133
+ Donated by DigitalOcean.com
134
+ </div>
135
+ </div>
136
+ <div style="width: 25%; display: inline-block;">
137
+ <div data-netdata="netdata.requests"
138
+ data-host="//netdata2.firehol.org"
139
+ data-title="US - Atlanta"
140
+ data-chart-library="gauge"
141
+ data-width="100%"
142
+ data-after="-300"
143
+ data-points="300"
144
+ data-colors="#AA5555"
145
+ ></div>
146
+ <br/> <br/>
147
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata2.firehol.org'" style="font-size: 1.5vw;">Enter Atlanta!</button>
148
+ <div style="font-size: 0.8vw;">
149
+ Donated by CDN77.com
150
+ </div>
151
+ </div>
152
+ <div style="width: 25%; display: inline-block;">
153
+ <div data-netdata="netdata.requests"
154
+ data-host="//netdata3.firehol.org"
155
+ data-title="EU - Greece"
156
+ data-chart-library="gauge"
157
+ data-width="100%"
158
+ data-after="-300"
159
+ data-points="300"
160
+ data-colors="#5555AA"
161
+ ></div>
162
+ <br/> <br/>
163
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata3.firehol.org'" style="font-size: 1.5vw;">Come to Greece!</button>
164
+ <div style="font-size: 0.8vw;">
165
+
166
+ </div>
167
+ </div>
168
</div>
85
- <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
86
- <br/>
87
- <div data-netdata="system.cpu"
88
- data-host="//netdata.firehol.org"
89
- data-title="CPU usage of EU Server"
169
+ </div>
170
+
171
+ <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 2vw;">
172
+ we love real-time charts, so our home page
173
+ <br/>
174
+ ...is a netdata dashboard too!
175
+ </div>
176
+
177
+ <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
178
+ <div style="padding-top: 1vw; padding-bottom: 1vw;">
179
+ Our <code>nginx</code> web servers recent requests/s:
180
+ </div>
181
+
182
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
183
+ <div class="mysparkline-overchart-label">
184
+ <b>EU - London</b> web requests/s
185
+ </div>
186
+ <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
187
+ </div>
188
+ <div data-netdata="nginx.requests"
189
+ data-dimensions="requests"
190
+ data-host="//netdata1.firehol.org"
191
data-chart-library="dygraph"
91
- data-width="49%"
192
+ data-dygraph-theme="sparkline"
193
+ data-dygraph-type="area"
194
+ data-width="100%"
195
data-height="100%"
196
data-after="-300"
197
+ data-colors="#558855"
198
+ data-show-value-of-requests-at="nginx.requests.netdata"
199
></div>
95
- <div data-netdata="system.cpu"
200
+ </div>
201
+
202
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
203
+ <div class="mysparkline-overchart-label">
204
+ <b>US - Atlanta</b> web requests/s
205
+ </div>
206
+ <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
207
+ </div>
208
+ <div data-netdata="nginx.requests"
209
+ data-dimensions="requests"
210
data-host="//netdata2.firehol.org"
97
- data-title="CPU usage of US Server"
211
data-chart-library="dygraph"
99
- data-width="49%"
212
+ data-dygraph-theme="sparkline"
213
+ data-dygraph-type="area"
214
+ data-width="100%"
215
data-height="100%"
216
data-after="-300"
217
+ data-colors="#AA5555"
218
+ data-show-value-of-requests-at="nginx.requests.netdata2"
219
+ ></div>
220
+ </div>
221
+
222
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
223
+ <div class="mysparkline-overchart-label">
224
+ <b>EU - Greece</b> web requests/s
225
+ </div>
226
+ <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
227
+ </div>
228
+ <div data-netdata="nginx.requests"
229
+ data-dimensions="requests"
230
+ data-host="//netdata3.firehol.org"
231
+ data-chart-library="dygraph"
232
+ data-dygraph-theme="sparkline"
233
+ data-dygraph-type="area"
234
+ data-width="100%"
235
+ data-height="100%"
236
+ data-after="-300"
237
+ data-colors="#5555AA"
238
+ data-show-value-of-requests-at="nginx.requests.netdata3"
239
></div>
240
</div>
241
</div>
242
243
+ <div style="width: 100%; text-align: right; font-size: 1vw;">
244
+ <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
245
+ </div>
246
107
- <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
108
- <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
109
- <b>Disk I/O on both servers</b>
110
- </div>
111
- <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
112
- <div data-netdata="tc.world_in"
113
- data-host="//netdata.firehol.org"
114
- data-title="Inbound QoS on EU Server"
247
+
248
+ <div style="padding-top: 4vw; font-size: 1.5vw;">
249
+ Our bandwidth consumption per service
250
+ <br/>
251
+ (Linux QoS configured by our <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>):
252
+ </div>
253
+
254
+ <!-- Nav tabs -->
255
+ <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
256
+ <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
257
+ <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
258
+ </ul>
259
+
260
+ <!-- Tab panes -->
261
+ <div class="tab-content">
262
+ <div role="tabpanel" class="tab-pane active" id="outbout">
263
+ <div data-netdata="tc.world_out"
264
+ data-host="//netdata1.firehol.org"
265
data-chart-library="dygraph"
116
- data-width="49%"
117
- data-height="100%"
266
+ data-title="EU - London, traffic we send per service"
267
+ data-width="100%"
268
+ data-height="10vw"
269
+ data-min-height="150px"
270
data-after="-300"
271
></div>
120
- <div data-netdata="tc.world_in"
272
+
273
+ <div data-netdata="tc.world_out"
274
data-host="//netdata2.firehol.org"
122
- data-title="Inbound QoS on US Server"
275
data-chart-library="dygraph"
124
- data-width="49%"
125
- data-height="100%"
276
+ data-title="US - Atlanta, traffic we send per service"
277
+ data-width="100%"
278
+ data-height="10vw"
279
+ data-min-height="150px"
280
data-after="-300"
281
></div>
128
- </div>
129
- </div>
282
131
- <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
132
- <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
283
<div data-netdata="tc.world_out"
134
- data-host="//netdata.firehol.org"
135
- data-title="Outbound QoS on Server"
284
+ data-host="//netdata3.firehol.org"
285
data-chart-library="dygraph"
137
- data-width="49%"
138
- data-height="100%"
286
+ data-title="EU - Greece, traffic we send per service"
287
+ data-width="100%"
288
+ data-height="10vw"
289
+ data-min-height="150px"
290
data-after="-300"
291
></div>
141
- <div data-netdata="tc.world_out"
292
+ </div>
293
+ <div role="tabpanel" class="tab-pane" id="inbound">
294
+ <div data-netdata="tc.world_in"
295
+ data-host="//netdata1.firehol.org"
296
+ data-chart-library="dygraph"
297
+ data-title="EU - London, traffic we receive per service"
298
+ data-width="100%"
299
+ data-height="10vw"
300
+ data-min-height="150px"
301
+ data-after="-300"
302
+ ></div>
303
+
304
+ <div data-netdata="tc.world_in"
305
data-host="//netdata2.firehol.org"
143
- data-title="Outbound QoS on US Server"
306
data-chart-library="dygraph"
145
- data-width="49%"
146
- data-height="100%"
307
+ data-title="US - Atlanta, traffic we receive per service"
308
+ data-width="100%"
309
+ data-height="10vw"
310
+ data-min-height="150px"
311
+ data-after="-300"
312
+ ></div>
313
+
314
+ <div data-netdata="tc.world_in"
315
+ data-host="//netdata3.firehol.org"
316
+ data-chart-library="dygraph"
317
+ data-title="EU - Greece, traffic we receive per service"
318
+ data-width="100%"
319
+ data-height="10vw"
320
+ data-min-height="150px"
321
data-after="-300"
322
></div>
323
</div>
324
</div>
325
+ <div style="width: 100%; text-align: right; font-size: 1vw;">
326
+ <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
327
+ </div>
328
152
- <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
153
- <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
154
- <b>NGINX performance on both servers</b>
329
+ <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
330
+ <div style="padding-top: 1vw; padding-bottom: 1vw;">
331
+ Our DDoS protection
332
+ <br/>
333
+ (iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>):
334
</div>
156
- <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
157
- <div data-netdata="nginx.connections"
158
- data-host="//netdata.firehol.org"
159
- data-title="NGINX Connections on EU Server"
335
+
336
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
337
+ <div class="mysparkline-overchart-label">
338
+ <b>EU - London</b>, TCP SYN packets/s received
339
+ </div>
340
+ <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
341
+ </div>
342
+ <div data-netdata="netfilter.synproxy_syn_received"
343
+ data-dimensions="received"
344
+ data-host="//netdata1.firehol.org"
345
data-chart-library="dygraph"
161
- data-width="49%"
346
+ data-dygraph-theme="sparkline"
347
+ data-dygraph-type="area"
348
+ data-width="100%"
349
data-height="100%"
350
data-after="-300"
351
+ data-colors="#558855"
352
+ data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
353
></div>
165
- <div data-netdata="nginx.connections"
354
+ </div>
355
+
356
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
357
+ <div class="mysparkline-overchart-label">
358
+ <b>US - Atlanta</b>, TCP SYN packets/s received
359
+ </div>
360
+ <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
361
+ </div>
362
+ <div data-netdata="netfilter.synproxy_syn_received"
363
+ data-dimensions="received"
364
data-host="//netdata2.firehol.org"
167
- data-title="NGINX Connections on US Server"
365
data-chart-library="dygraph"
169
- data-width="49%"
366
+ data-dygraph-theme="sparkline"
367
+ data-dygraph-type="area"
368
+ data-width="100%"
369
data-height="100%"
370
data-after="-300"
371
+ data-colors="#885555"
372
+ data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
373
></div>
374
</div>
375
+
376
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
377
+ <div class="mysparkline-overchart-label">
378
+ <b>EU - Greece</b>, TCP SYN packets/s received
379
+ </div>
380
+ <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
381
+ </div>
382
+ <div data-netdata="netfilter.synproxy_syn_received"
383
+ data-dimensions="received"
384
+ data-host="//netdata3.firehol.org"
385
+ data-chart-library="dygraph"
386
+ data-dygraph-theme="sparkline"
387
+ data-dygraph-type="area"
388
+ data-width="100%"
389
+ data-height="100%"
390
+ data-after="-300"
391
+ data-colors="#555588"
392
+ data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
393
+ ></div>
394
+ </div>
395
+ </div>
396
+ <div style="width: 100%; text-align: right; font-size: 1vw;">
397
+ <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
398
+ <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
399
</div>
400
176
- <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
177
- <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
178
- <div data-netdata="nginx.requests"
179
- data-host="//netdata.firehol.org"
180
- data-title="NGINX Requests on EU Server"
401
+
402
+ <div style="padding-top: 4vw; font-size: 1.5vw;">
403
+ CPU Utilization on our servers
404
+ </div>
405
+
406
+ <div style="padding-top: 1vw;">
407
+ <div data-netdata="system.cpu"
408
+ data-host="//netdata1.firehol.org"
409
+ data-chart-library="dygraph"
410
+ data-title="EU - London, CPU Usage"
411
+ data-width="100%"
412
+ data-height="10vw"
413
+ data-min-height="150px"
414
+ data-after="-300"
415
+ ></div>
416
+
417
+ <div data-netdata="system.cpu"
418
+ data-host="//netdata2.firehol.org"
419
+ data-chart-library="dygraph"
420
+ data-title="US - Atlanta, CPU Usage"
421
+ data-width="100%"
422
+ data-height="10vw"
423
+ data-min-height="150px"
424
+ data-after="-300"
425
+ ></div>
426
+
427
+ <div data-netdata="system.cpu"
428
+ data-host="//netdata3.firehol.org"
429
+ data-chart-library="dygraph"
430
+ data-title="EU - Greece, CPU Usage"
431
+ data-width="100%"
432
+ data-height="10vw"
433
+ data-min-height="150px"
434
+ data-after="-300"
435
+ ></div>
436
+ </div>
437
+ <div style="width: 100%; text-align: right; font-size: 1vw;">
438
+ <i class="fa fa-comment" aria-hidden="true"></i> <i>what does it take so much CPU?
439
+ <br/>The site <a href="//iplists.firehol.org/">iplists.firehol.org</a> is maintained by FireHOL - the CPU is used for comparing security IP Lists.</i>
440
+ </div>
441
+
442
+ <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
443
+ <div style="padding-top: 1vw; padding-bottom: 1vw;">
444
+ CPU Usage of the netdata user
445
+ <br/>
446
+ netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
447
+ <br/>
448
+ and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
449
+ </div>
450
+
451
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
452
+ <div class="mysparkline-overchart-label">
453
+ <b>EU - London</b>, CPU % of a single core
454
+ </div>
455
+ <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
456
+ </div>
457
+ <div data-netdata="users.cpu"
458
+ data-dimensions="netdata"
459
+ data-host="//netdata1.firehol.org"
460
data-chart-library="dygraph"
182
- data-width="49%"
461
+ data-dygraph-theme="sparkline"
462
+ data-dygraph-type="area"
463
+ data-width="100%"
464
data-height="100%"
465
data-after="-300"
185
- data-colors="#5555FF"
466
+ data-colors="#558855"
467
+ data-show-value-of-netdata-at="users.cpu.netdata1"
468
></div>
187
- <div data-netdata="nginx.requests"
469
+ </div>
470
+
471
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
472
+ <div class="mysparkline-overchart-label">
473
+ <b>US - Atlanta</b>, CPU % of a single core
474
+ </div>
475
+ <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
476
+ </div>
477
+ <div data-netdata="users.cpu"
478
+ data-dimensions="netdata"
479
data-host="//netdata2.firehol.org"
189
- data-title="NGINX Requests on US Server"
480
data-chart-library="dygraph"
191
- data-width="49%"
481
+ data-dygraph-theme="sparkline"
482
+ data-dygraph-type="area"
483
+ data-width="100%"
484
data-height="100%"
485
data-after="-300"
194
- data-colors="#5555FF"
486
+ data-colors="#885555"
487
+ data-show-value-of-netdata-at="users.cpu.netdata2"
488
></div>
489
</div>
197
- </div>
490
199
- <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
200
- <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
201
- <b>Netdata statistics on both servers</b>
202
- </div>
203
- <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
204
- <div style="width: 49%; height:100%; align: center; display: inline-block;">
205
- EU Server
206
- <br/>
207
- <div data-netdata="netdata.net"
208
- data-dimensions="out"
209
- data-host="//netdata.firehol.org"
210
- data-title="Chart Data Traffic"
211
- data-chart-library="easypiechart"
212
- data-width="16%"
213
- data-height="100%"
214
- data-after="-300"
215
- data-points="300"
216
- ></div>
217
- <div data-netdata="netdata.net"
218
- data-dimensions="in"
219
- data-host="//netdata.firehol.org"
220
- data-title="Requests Traffic"
221
- data-chart-library="easypiechart"
222
- data-width="16%"
223
- data-height="100%"
224
- data-after="-300"
225
- data-points="300"
226
- ></div>
227
- <div data-netdata="netdata.clients"
228
- data-host="//netdata.firehol.org"
229
- data-title="Sockets"
230
- data-chart-library="gauge"
231
- data-width="22%"
232
- data-height="100%"
233
- data-after="-300"
234
- data-points="300"
235
- data-colors="#AA5500"
236
- ></div>
237
- <div data-netdata="netdata.requests"
238
- data-host="//netdata.firehol.org"
239
- data-title="Chart Refreshes/s"
240
- data-chart-library="gauge"
241
- data-width="22%"
242
- data-height="100%"
243
- data-after="-300"
244
- data-points="300"
245
- ></div>
491
+ <div class="mysparkline" style="width: 100%; height: 5vw; text-align: left;">
492
+ <div class="mysparkline-overchart-label">
493
+ <b>EU - Greece</b>, CPU % of a single core
494
</div>
247
- <div style="width: 49%; height:100%; align: center; display: inline-block;">
248
- US Server
249
- <br/>
250
- <div data-netdata="netdata.requests"
251
- data-host="//netdata2.firehol.org"
252
- data-title="Chart Refreshes/s"
253
- data-chart-library="gauge"
254
- data-width="22%"
255
- data-height="100%"
256
- data-after="-300"
257
- data-points="300"
258
- ></div>
259
- <div data-netdata="netdata.clients"
260
- data-host="//netdata2.firehol.org"
261
- data-title="Sockets"
262
- data-chart-library="gauge"
263
- data-width="22%"
264
- data-height="100%"
265
- data-after="-300"
266
- data-points="300"
267
- data-colors="#AA5500"
268
- ></div>
269
- <div data-netdata="netdata.net"
270
- data-dimensions="in"
271
- data-host="//netdata2.firehol.org"
272
- data-title="Requests Traffic"
273
- data-chart-library="easypiechart"
274
- data-width="16%"
275
- data-height="100%"
276
- data-after="-300"
277
- data-points="300"
278
- ></div>
279
- <div data-netdata="netdata.net"
280
- data-dimensions="out"
281
- data-host="//netdata2.firehol.org"
282
- data-title="Chart Data Traffic"
283
- data-chart-library="easypiechart"
284
- data-width="16%"
285
- data-height="100%"
286
- data-after="-300"
287
- data-points="300"
288
- ></div>
495
+ <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
496
</div>
497
+ <div data-netdata="users.cpu"
498
+ data-dimensions="netdata"
499
+ data-host="//netdata3.firehol.org"
500
+ data-chart-library="dygraph"
501
+ data-dygraph-theme="sparkline"
502
+ data-dygraph-type="area"
503
+ data-width="100%"
504
+ data-height="100%"
505
+ data-after="-300"
506
+ data-colors="#555588"
507
+ data-show-value-of-netdata-at="users.cpu.netdata3"
508
+ ></div>
509
</div>
510
</div>
511
+ <div style="width: 100%; text-align: right; font-size: 1vw;">
512
+ <i class="fa fa-comment" aria-hidden="true"></i> <i>this utilization is about the whole netdata process tree and the percentage is of <b>a single core</b>!
513
+ <br/>including <b>BASH</b> plugins (it monitors <code>mysql</code> on the demo sites), <b>node.js</b> plugins (it monitors <code>bind9</code> on the demo sites), etc.
514
+ <br/>and including the chart refreshes for the dashboards of all viewers.</i>
515
+ </div>
516
+
517
</div>
518
</body>
519
</html>