@cryptotaxi247 / netdata-1 / commits / 225955e7b

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/>&nbsp;<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/>&nbsp;<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/>&nbsp;<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 + &nbsp;
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>