4 <title>NetData Dashboard</title>
5 <meta name="application-name" content="netdata">
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
10 <meta name="viewport" content="width=device-width, initial-scale=1">
11 <meta name="apple-mobile-web-app-capable" content="yes">
12 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
13 <meta name="author" content="costa@tsaousis.gr">
15 <meta property="og:locale" content="en_US" />
16 <meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.png"/>
17 <meta property="og:url" content="http://my-netdata.io/"/>
18 <meta property="og:type" content="website"/>
19 <meta property="og:site_name" content="netdata"/>
20 <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
21 <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
25 <div class="container-fluid">
27 <h1>NetData Custom Dashboard <div data-netdata="system.cpu" data-chart-library="sparkline" data-height="30" data-after="-600" data-sparkline-linecolor="#888"></div></h1>
29 This is a template for building custom dashboards. To build a dashboard you just do this:
35 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
36 <meta charset="utf-8">
37 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
38 <meta name="viewport" content="width=device-width, initial-scale=1">
39 <meta name="apple-mobile-web-app-capable" content="yes">
40 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
43 <div data-netdata="system.processes"
44 data-chart-library="dygraph"
50 <script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script>
55 <li>You can host your dashboard anywhere.</li>
56 <li>You can add as many charts as you like.</li>
57 <li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li>
58 <li>You can use different chart libraries on the same page: <b>peity</b>, <b>sparkline</b>, <b>dygraph</b>, <b>google</b>, <b>morris</b></li>
59 <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>
60 <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>
61 <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>
66 <h1>Sparkline Charts</h1>
67 Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.
68 Sparkline charts stretch the values to show the variations between values in more detail.
69 They also have mouse-hover support.
71 <b>Sparklines are fantastic</b>. You can inline charts in text. For example this
72 <div data-netdata="system.cpu"
73 data-chart-library="sparkline"
77 ></div> is my current cpu usage (last 30 seconds),
79 <div data-netdata="netdata.net"
81 data-chart-library="sparkline"
85 ></div> is the bandwidth my netdata server is currently transmitting (last minute)
87 <div data-netdata="netdata.requests"
88 data-chart-library="sparkline"
92 ></div> is the requests/sec it serves (last 3 minutes).
95 <div style="width: 33%; display: inline-block;">
96 <div data-netdata="system.processes"
97 data-chart-library="sparkline"
101 data-dt-element-name="time101"
104 <small>rendered in <span id="time101">X</span> ms</small>
106 <div style="width: 33%; display: inline-block;">
107 <div data-netdata="system.ipv4"
108 data-chart-library="sparkline"
112 data-dt-element-name="time102"
115 <small>rendered in <span id="time102">X</span> ms</small>
117 <div style="width: 33%; display: inline-block;">
118 <div data-netdata="system.cpu"
119 data-chart-library="sparkline"
123 data-dt-element-name="time103"
126 <small>rendered in <span id="time103">X</span> ms</small>
132 <h1>Peity Charts</h1>
133 Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing.
134 Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show
135 the total of all dimensions.
137 <div style="width: 33%; display: inline-block;">
138 <div data-netdata="system.processes"
139 data-chart-library="peity"
143 data-dt-element-name="time001"
146 <small>rendered in <span id="time001">X</span> ms</small>
148 <div style="width: 33%; display: inline-block;">
149 <div data-netdata="system.ipv4"
150 data-chart-library="peity"
154 data-dt-element-name="time002"
157 <small>rendered in <span id="time002">X</span> ms</small>
159 <div style="width: 33%; display: inline-block;">
160 <div data-netdata="system.cpu"
161 data-chart-library="peity"
165 data-dt-element-name="time003"
168 <small>rendered in <span id="time003">X</span> ms</small>
175 <h1>Dygraph Charts</h1>
176 The fastest charting engine that can chart complete charts (not just sparklines).
177 The charts are zoomable (drag their contents to pan, shift with mouse wheel to zoom-in or zoom-out, double click to reset it).
178 <b>Netdata magic!</b> Realtime charts on your web page!
180 Sparklines using dygraphs
181 <div data-netdata="system.processes"
182 data-chart-library="dygraph"
183 data-dygraph-theme="sparkline"
189 are also possible! This
190 <div data-netdata="system.ipv4"
191 data-chart-library="dygraph"
192 data-dygraph-theme="sparkline"
198 is an area chart, while this
199 <div data-netdata="system.cpu"
200 data-chart-library="dygraph"
201 data-dygraph-theme="sparkline"
206 ></div> is a stacked area chart!
210 <div style="width: 33%; display: inline-block;">
211 <div data-netdata="system.processes"
212 data-chart-library="dygraph"
213 data-dygraph-theme="sparkline"
217 data-dt-element-name="time501"
220 <small>rendered in <span id="time501">X</span> ms</small>
222 <div style="width: 33%; display: inline-block;">
223 <div data-netdata="system.ipv4"
224 data-chart-library="dygraph"
225 data-dygraph-theme="sparkline"
229 data-dt-element-name="time502"
232 <small>rendered in <span id="time502">X</span> ms</small>
234 <div style="width: 33%; display: inline-block;">
235 <div data-netdata="system.cpu"
236 data-chart-library="dygraph"
237 data-dygraph-theme="sparkline"
241 data-dt-element-name="time503"
244 <small>rendered in <span id="time503">X</span> ms</small>
250 <div style="width: 33%; display: inline-block;">
251 <div data-netdata="system.processes"
252 data-chart-library="dygraph"
256 data-dt-element-name="time201"
259 <small>rendered in <span id="time201">X</span> ms</small>
261 <div style="width: 33%; display: inline-block;">
262 <div data-netdata="system.ipv4"
263 data-chart-library="dygraph"
267 data-dt-element-name="time202"
270 <small>rendered in <span id="time202">X</span> ms</small>
272 <div style="width: 33%; display: inline-block;">
273 <div data-netdata="system.cpu"
274 data-chart-library="dygraph"
278 data-dt-element-name="time203"
281 <small>rendered in <span id="time203">X</span> ms</small>
283 <div style="width: 33%; display: inline-block;">
284 <div data-netdata="system.io"
285 data-chart-library="dygraph"
289 data-dt-element-name="time204"
292 <small>rendered in <span id="time204">X</span> ms</small>
294 <div style="width: 33%; display: inline-block;">
295 <div data-netdata="apps.cpu"
296 data-chart-library="dygraph"
300 data-dt-element-name="time205"
303 <small>rendered in <span id="time205">X</span> ms</small>
305 <div style="width: 33%; display: inline-block;">
306 <div data-netdata="netdata.net"
307 data-chart-library="dygraph"
311 data-dt-element-name="time206"
314 <small>rendered in <span id="time206">X</span> ms</small>
316 <div style="width: 33%; display: inline-block;">
317 <div data-netdata="netdata.server_cpu"
318 data-chart-library="dygraph"
322 data-dt-element-name="time207"
325 <small>rendered in <span id="time207">X</span> ms</small>
327 <div style="width: 33%; display: inline-block;">
328 <div data-netdata="netdata.requests"
329 data-chart-library="dygraph"
333 data-dt-element-name="time208"
336 <small>rendered in <span id="time208">X</span> ms</small>
338 <div style="width: 33%; display: inline-block;">
339 <div data-netdata="net.gstag0"
340 data-chart-library="dygraph"
344 data-dt-element-name="time209"
347 <small>rendered in <span id="time209">X</span> ms</small>
353 <h1>EasyPieChart</h1>
355 <div style="width: 33%; display: inline-block;">
356 <div style="display: inline-block; position: relative;">
357 <div data-netdata="system.processes"
358 data-chart-library="easypiechart"
363 data-dt-element-name="time601"
366 <small>rendered in <span id="time601">X</span> ms</small>
368 <div style="display: inline-block; position: relative;">
369 <div data-netdata="system.processes"
370 data-chart-library="easypiechart"
375 data-dt-element-name="time601a"
378 <small>rendered in <span id="time601a">X</span> ms</small>
381 <div style="width: 33%; display: inline-block;">
382 <div style="display: inline-block; position: relative;">
383 <div data-netdata="system.ipv4"
384 data-chart-library="easypiechart"
389 data-dt-element-name="time602"
392 <small>rendered in <span id="time602">X</span> ms</small>
394 <div style="display: inline-block; position: relative;">
395 <div data-netdata="system.ipv4"
396 data-chart-library="easypiechart"
401 data-dt-element-name="time602a"
404 <small>rendered in <span id="time602a">X</span> ms</small>
407 <div style="width: 33%; display: inline-block;">
408 <div style="display: inline-block; position: relative;">
409 <div data-netdata="system.cpu"
410 data-chart-library="easypiechart"
415 data-dt-element-name="time603"
418 <small>rendered in <span id="time603">X</span> ms</small>
420 <div style="display: inline-block; position: relative;">
421 <div data-netdata="system.cpu"
422 data-chart-library="easypiechart"
427 data-dt-element-name="time603a"
430 <small>rendered in <span id="time603a">X</span> ms</small>
438 <div style="width: 33%; display: inline-block;">
439 <div style="display: inline-block; position: relative;">
440 <div data-netdata="system.processes"
441 data-chart-library="gauge"
446 data-dt-element-name="time701"
449 <small>rendered in <span id="time701">X</span> ms</small>
451 <div style="display: inline-block; position: relative;">
452 <div data-netdata="system.processes"
453 data-chart-library="gauge"
458 data-dt-element-name="time701a"
461 <small>rendered in <span id="time701a">X</span> ms</small>
464 <div style="width: 33%; display: inline-block;">
465 <div style="display: inline-block; position: relative;">
466 <div data-netdata="system.ipv4"
467 data-chart-library="gauge"
472 data-dt-element-name="time702"
475 <small>rendered in <span id="time702">X</span> ms</small>
477 <div style="display: inline-block; position: relative;">
478 <div data-netdata="system.ipv4"
479 data-chart-library="gauge"
484 data-dt-element-name="time702a"
487 <small>rendered in <span id="time702a">X</span> ms</small>
490 <div style="width: 33%; display: inline-block;">
491 <div style="display: inline-block; position: relative;">
492 <div data-netdata="system.cpu"
493 data-chart-library="gauge"
498 data-dt-element-name="time703"
501 <small>rendered in <span id="time703">X</span> ms</small>
503 <div style="display: inline-block; position: relative;">
504 <div data-netdata="system.cpu"
505 data-chart-library="gauge"
510 data-dt-element-name="time703a"
513 <small>rendered in <span id="time703a">X</span> ms</small>
519 <h1>Google Charts</h1>
520 NetData was originaly developed with Google Charts.
521 NetData is a complete Google Visualization API provider.
523 <div style="width: 33%; display: inline-block;">
524 <div data-netdata="system.processes"
525 data-chart-library="google"
529 data-dt-element-name="time301"
532 <small>rendered in <span id="time301">X</span> ms</small>
534 <div style="width: 33%; display: inline-block;">
535 <div data-netdata="system.ipv4"
536 data-chart-library="google"
540 data-dt-element-name="time302"
543 <small>rendered in <span id="time302">X</span> ms</small>
545 <div style="width: 33%; display: inline-block;">
546 <div data-netdata="system.cpu"
547 data-chart-library="google"
551 data-dt-element-name="time303"
554 <small>rendered in <span id="time303">X</span> ms</small>
563 <h1>Morris Charts</h1>
564 Unfortunatelly, Morris Charts are very slow. Here we force them to lower their detail to get acceptable results.
566 <div style="width: 33%; display: inline-block;">
567 <div data-netdata="system.processes"
568 data-chart-library="morris"
572 data-dt-element-name="time401"
575 <small>rendered in <span id="time401">X</span> ms</small>
577 <div style="width: 33%; display: inline-block;">
578 <div data-netdata="system.ipv4"
579 data-chart-library="morris"
583 data-dt-element-name="time402"
586 <small>rendered in <span id="time402">X</span> ms</small>
588 <div style="width: 33%; display: inline-block;">
589 <div data-netdata="system.cpu"
590 data-chart-library="morris"
594 data-dt-element-name="time403"
597 <small>rendered in <span id="time403">X</span> ms</small>
603 C3 charts are not usable in large scale. They suffer from the following issues:
605 <li>extreme use of transitions (implemented with D3 instead of CSS, meaning they are javascript rendered) that cannot be disabled - even opacity is hardcoded in the javascript library</li>
606 <li>rendering is done with <code>SVG</code> instead of <code>canvas</code>, so they use DOM elements for every point, becomimg useless if more than 500 points are drawn</li>
607 <li>lack of a <code>raw</code> data format, so every time a chart is updated, data convertion in javascript is required</li>
608 <li>lack of <code>stacked</code> charts support</li>
610 So, to avoid flashing the charts, we destroy and re-create the charts on each update. Also, since they manipulate the data with javascript we were forced to lower the detail they render to get acceptable speeds.
612 <div style="width: 33%; display: inline-block;">
613 <div data-netdata="system.processes"
614 data-chart-library="c3"
618 data-dt-element-name="time801"
621 <small>rendered in <span id="time801">X</span> ms</small>
623 <div style="width: 33%; display: inline-block;">
624 <div data-netdata="system.ipv4"
625 data-chart-library="c3"
629 data-dt-element-name="time802"
632 <small>rendered in <span id="time802">X</span> ms</small>
634 <div style="width: 33%; display: inline-block;">
635 <div data-netdata="system.cpu"
636 data-chart-library="c3"
640 data-dt-element-name="time803"
643 <small>rendered in <span id="time803">X</span> ms</small>
646 </div> <!-- 1st container -->
650 <!-- you can set your netdata server globally, by ucommenting this -->
651 <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
652 <!-- <script> netdataServer = "http://box:19999"; </script> -->
654 <!-- load the dashboard manager - it will do the rest -->
655 <script type="text/javascript" src="dashboard.js?v20170105-7"></script>