4 <title>NetData - Real-time performance monitoring, done right!</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">
14 <meta property="og:locale" content="en_US" />
15 <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/>
16 <meta property="og:url" content="http://my-netdata.io/"/>
17 <meta property="og:type" content="website"/>
18 <meta property="og:site_name" content="netdata"/>
19 <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
20 <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
23 // --- OPTIONS FOR THE DASHBOARD --
25 // this section has to appear before loading dashboard.js
28 // uncomment on of the two themes:
30 // var netdataTheme = 'default'; // this is white
31 var netdataTheme = 'slate'; // this is dark
34 // Set the default netdata server.
35 // on charts without a 'data-host', this one will be used.
36 // the default is the server that dashboard.js is downloaded from.
38 // var netdataServer = 'http://my.server:19999/';
42 --- LOAD dashboard.js ---
44 to host this HTML file on your web server,
45 you have to load dashboard.js from the netdata server.
47 So, pick one the two below
48 If you pick the first, set the server name/IP.
50 The second assumes you host this file on /usr/share/netdata/web
51 and that you have chown it to be owned by netdata:netdata
53 <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
54 <script type="text/javascript" src="dashboard.js?v40"></script>
57 // --- OPTIONS FOR THE CHARTS --
59 // destroy charts not shown (lowers memory on the browsers)
60 // set this to 'yes' to destroy, 'false' to hide the charts
61 NETDATA.options.current.destroy_on_hide = false;
63 // set this to false, to always show all dimensions
64 NETDATA.options.current.eliminate_zero_dimensions = true;
66 // set this to false, to lower the pressure on the browser
67 NETDATA.options.current.concurrent_refreshes = true;
69 // if you need to support slow mobile phones, set this to false
70 NETDATA.options.current.parallel_refresher = true;
72 // set this to false, to always update the charts, even if focus is lost
73 NETDATA.options.current.stop_updates_when_focus_is_lost = true;
84 display: inline-block;
91 .mysparkline-overchart-label {
102 .mysparkline-overchart-value {
111 text-shadow: #333 0px 0px 2px;
116 display: inline-block;
124 display: inline-block;
157 @media only screen and (min-width : 992px) {
162 @media only screen and (max-width : 992px) {
170 <body style="text-align: center;">
172 <div class="container">
174 <div style="text-align: center; font-size: 13vw; height: 14vw;">
177 <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
178 real-time performance monitoring
180 <div style="width:80%; text-align: right; font-size: 2.7vw;">
181 <strong>scaled out</strong>!
183 <div class="mytitle">
184 pick a <b>netdata</b> demo server
186 <div class="mycontent">
187 these demo servers show what you will get by installing <b>netdata</b>
190 <div style="width: 100%; text-align: center; padding-top: 2vw;">
191 <div style="width: 100%; text-align: center;">
193 <div class="mygauge-combo">
194 <div class="mygauge">
195 <div data-netdata="netdata.requests"
196 data-host="//london.my-netdata.io"
197 data-title="EU - London"
198 data-chart-library="gauge"
202 data-colors="#558855"
205 <div class="mygauge-button">
207 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//london.my-netdata.io/default.html'" style="font-size: 1.5vw;">Enter London!</button>
208 <div style="font-size: 1vw;">
209 Donated by DigitalOcean.com
213 <div class="mygauge-combo">
214 <div class="mygauge">
215 <div data-netdata="netdata.requests"
216 data-host="//atlanta.my-netdata.io"
217 data-title="US - Atlanta"
218 data-chart-library="gauge"
222 data-colors="#AA5555"
225 <div class="mygauge-button">
227 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//atlanta.my-netdata.io/default.html'" style="font-size: 1.5vw;">Enter Atlanta!</button>
228 <div style="font-size: 1vw;">
233 <div class="mygauge-combo">
234 <div class="mygauge">
235 <div data-netdata="netdata.requests"
236 data-host="//athens.my-netdata.io"
237 data-title="EU - Greece"
238 data-chart-library="gauge"
242 data-colors="#5555AA"
245 <div class="mygauge-button">
247 <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//athens.my-netdata.io/default.html'" style="font-size: 1.5vw;">Come to Greece!</button>
248 <div style="font-size: 0.8vw;">
256 <div class="mytitle">
257 this page is a custom <b>netdata</b> dashboard
259 <div class="mycontent">
260 charts are coming from 3 servers, in parallel
262 the servers are not aware of this multi-server dashboard,
264 each server is not aware of the other 2 servers,
266 but on this dashboard <b>they are one</b>!
268 <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
269 <i class="fa fa-comment" aria-hidden="true"></i>
270 hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
272 double click on a chart to reset them all
275 <div class="mytitle">
276 our <code>nginx</code> performance
278 <div class="mycontent">
279 (we proxy netdata through nginx, on the demo sites)
283 <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
284 <li role="presentation" class="active"><a href="#nginx_requests" aria-controls="nginx_requests" role="tab" data-toggle="tab">Requests</a></li>
285 <li role="presentation"><a href="#nginx_connections" aria-controls="nginx_connections" role="tab" data-toggle="tab">Connections</a></li>
289 <div class="tab-content">
290 <div role="tabpanel" class="tab-pane active" id="nginx_requests">
291 <div class="mysparkline">
292 <div class="mysparkline-overchart-label">
293 <b>EU - London</b> web requests/s
295 <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
297 <div data-netdata="nginx.requests"
298 data-dimensions="requests"
299 data-host="//london.my-netdata.io"
300 data-chart-library="dygraph"
301 data-dygraph-theme="sparkline"
302 data-dygraph-type="area"
306 data-colors="#558855"
307 data-show-value-of-requests-at="nginx.requests.netdata"
311 <div class="mysparkline">
312 <div class="mysparkline-overchart-label">
313 <b>US - Atlanta</b> web requests/s
315 <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
317 <div data-netdata="nginx.requests"
318 data-dimensions="requests"
319 data-host="//atlanta.my-netdata.io"
320 data-chart-library="dygraph"
321 data-dygraph-theme="sparkline"
322 data-dygraph-type="area"
326 data-colors="#AA5555"
327 data-show-value-of-requests-at="nginx.requests.netdata2"
331 <div class="mysparkline">
332 <div class="mysparkline-overchart-label">
333 <b>EU - Greece</b> web requests/s
335 <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
337 <div data-netdata="nginx.requests"
338 data-dimensions="requests"
339 data-host="//athens.my-netdata.io"
340 data-chart-library="dygraph"
341 data-dygraph-theme="sparkline"
342 data-dygraph-type="area"
346 data-colors="#5555AA"
347 data-show-value-of-requests-at="nginx.requests.netdata3"
352 <div role="tabpanel" class="tab-pane" id="nginx_connections">
353 <div class="mysparkline">
354 <div class="mysparkline-overchart-label">
355 <b>EU - London</b> active connections
357 <div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
359 <div data-netdata="nginx.connections"
360 data-dimensions="active"
361 data-host="//london.my-netdata.io"
362 data-chart-library="dygraph"
363 data-dygraph-theme="sparkline"
364 data-dygraph-type="area"
368 data-colors="#558855"
369 data-show-value-of-active-at="nginx.connections.netdata1"
373 <div class="mysparkline">
374 <div class="mysparkline-overchart-label">
375 <b>US - Atlanta</b> active connections
377 <div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
379 <div data-netdata="nginx.connections"
380 data-dimensions="active"
381 data-host="//atlanta.my-netdata.io"
382 data-chart-library="dygraph"
383 data-dygraph-theme="sparkline"
384 data-dygraph-type="area"
388 data-colors="#AA5555"
389 data-show-value-of-active-at="nginx.connections.netdata2"
393 <div class="mysparkline">
394 <div class="mysparkline-overchart-label">
395 <b>EU - Greece</b> active connections
397 <div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
399 <div data-netdata="nginx.connections"
400 data-dimensions="active"
401 data-host="//athens.my-netdata.io"
402 data-chart-library="dygraph"
403 data-dygraph-theme="sparkline"
404 data-dygraph-type="area"
408 data-colors="#5555AA"
409 data-show-value-of-active-at="nginx.connections.netdata3"
415 <div style="width: 100%; text-align: right; font-size: 1vw;">
416 <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
420 <div class="mytitle">
421 bandwidth consumption on the demo sites
423 <div class="mycontent">
424 Linux QoS is configured by <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>
428 <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
429 <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
430 <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
434 <div class="tab-content">
435 <div role="tabpanel" class="tab-pane active" id="outbout">
436 <div class="myfullchart">
437 <div data-netdata="tc.world_out"
438 data-host="//london.my-netdata.io"
439 data-chart-library="dygraph"
440 data-title="EU - London, traffic we send per service"
447 <div class="myfullchart">
448 <div data-netdata="tc.world_out"
449 data-host="//atlanta.my-netdata.io"
450 data-chart-library="dygraph"
451 data-title="US - Atlanta, traffic we send per service"
459 <div class="myfullchart">
460 <div data-netdata="tc.world_out"
461 data-host="//athens.my-netdata.io"
462 data-chart-library="dygraph"
463 data-title="EU - Greece, traffic we send per service"
470 <div role="tabpanel" class="tab-pane" id="inbound">
471 <div class="myfullchart">
472 <div data-netdata="tc.world_in"
473 data-host="//london.my-netdata.io"
474 data-chart-library="dygraph"
475 data-title="EU - London, traffic we receive per service"
483 <div class="myfullchart">
484 <div data-netdata="tc.world_in"
485 data-host="//atlanta.my-netdata.io"
486 data-chart-library="dygraph"
487 data-title="US - Atlanta, traffic we receive per service"
495 <div class="myfullchart">
496 <div data-netdata="tc.world_in"
497 data-host="//athens.my-netdata.io"
498 data-chart-library="dygraph"
499 data-title="EU - Greece, traffic we receive per service"
507 <div style="width: 100%; text-align: right; font-size: 1vw;">
508 <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
511 <div class="mytitle">
512 DDoS protection performance on the demo sites
514 <div class="mycontent">
515 iptables SYNPROXY configured by <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
518 <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
520 <div class="mysparkline">
521 <div class="mysparkline-overchart-label">
522 <b>EU - London</b>, TCP SYN packets/s received
524 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
526 <div data-netdata="netfilter.synproxy_syn_received"
527 data-dimensions="received"
528 data-host="//london.my-netdata.io"
529 data-chart-library="dygraph"
530 data-dygraph-theme="sparkline"
531 data-dygraph-type="area"
535 data-colors="#558855"
536 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
540 <div class="mysparkline">
541 <div class="mysparkline-overchart-label">
542 <b>US - Atlanta</b>, TCP SYN packets/s received
544 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
546 <div data-netdata="netfilter.synproxy_syn_received"
547 data-dimensions="received"
548 data-host="//atlanta.my-netdata.io"
549 data-chart-library="dygraph"
550 data-dygraph-theme="sparkline"
551 data-dygraph-type="area"
555 data-colors="#885555"
556 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
560 <div class="mysparkline">
561 <div class="mysparkline-overchart-label">
562 <b>EU - Greece</b>, TCP SYN packets/s received
564 <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
566 <div data-netdata="netfilter.synproxy_syn_received"
567 data-dimensions="received"
568 data-host="//athens.my-netdata.io"
569 data-chart-library="dygraph"
570 data-dygraph-theme="sparkline"
571 data-dygraph-type="area"
575 data-colors="#555588"
576 data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
580 <div style="width: 100%; text-align: right; font-size: 1vw;">
581 <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
582 <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
586 <div class="mytitle">
587 CPU Utilization of the demo sites
590 <div style="padding-top: 1vw;">
591 <div class="myfullchart">
592 <div data-netdata="system.cpu"
593 data-host="//london.my-netdata.io"
594 data-chart-library="dygraph"
595 data-title="EU - London, CPU Usage"
602 <div class="myfullchart">
603 <div data-netdata="system.cpu"
604 data-host="//atlanta.my-netdata.io"
605 data-chart-library="dygraph"
606 data-title="US - Atlanta, CPU Usage"
613 <div class="myfullchart">
614 <div data-netdata="system.cpu"
615 data-host="//athens.my-netdata.io"
616 data-chart-library="dygraph"
617 data-title="EU - Greece, CPU Usage"
624 <div style="width: 100%; text-align: right; font-size: 1vw;">
625 <i class="fa fa-comment" aria-hidden="true"></i> <i>what is using so much CPU?
626 <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>
629 <div class="mytitle">
632 <div class="mycontent">
633 netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
635 <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.) and SNMP devices.
639 <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
640 <li role="presentation" class="active"><a href="#netdata_cpu" aria-controls="netdata_cpu" role="tab" data-toggle="tab">CPU</a></li>
641 <li role="presentation"><a href="#netdata_avgtime" aria-controls="netdata_avgtime" role="tab" data-toggle="tab">Average Response Time</a></li>
645 <div class="tab-content">
646 <div role="tabpanel" class="tab-pane active" id="netdata_cpu">
647 <div class="mysparkline">
648 <div class="mysparkline-overchart-label">
649 <b>EU - London</b>, CPU % of a single core
651 <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
653 <div data-netdata="users.cpu"
654 data-dimensions="netdata"
655 data-host="//london.my-netdata.io"
656 data-chart-library="dygraph"
657 data-dygraph-theme="sparkline"
658 data-dygraph-type="area"
662 data-colors="#558855"
663 data-show-value-of-netdata-at="users.cpu.netdata1"
667 <div class="mysparkline">
668 <div class="mysparkline-overchart-label">
669 <b>US - Atlanta</b>, CPU % of a single core
671 <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
673 <div data-netdata="users.cpu"
674 data-dimensions="netdata"
675 data-host="//atlanta.my-netdata.io"
676 data-chart-library="dygraph"
677 data-dygraph-theme="sparkline"
678 data-dygraph-type="area"
682 data-colors="#885555"
683 data-show-value-of-netdata-at="users.cpu.netdata2"
687 <div class="mysparkline">
688 <div class="mysparkline-overchart-label">
689 <b>EU - Greece</b>, CPU % of a single core
691 <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
693 <div data-netdata="users.cpu"
694 data-dimensions="netdata"
695 data-host="//athens.my-netdata.io"
696 data-chart-library="dygraph"
697 data-dygraph-theme="sparkline"
698 data-dygraph-type="area"
702 data-colors="#555588"
703 data-show-value-of-netdata-at="users.cpu.netdata3"
707 <div style="width: 100%; text-align: right; font-size: 1vw;">
708 <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>!
709 <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.
710 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
714 <div role="tabpanel" class="tab-pane" id="netdata_avgtime">
715 <div class="mysparkline">
716 <div class="mysparkline-overchart-label">
717 <b>EU - London</b>, API average response time in milliseconds
719 <div class="mysparkline-overchart-value" id="netdata.response_time1" >
721 <div data-netdata="netdata.response_time"
722 data-host="//london.my-netdata.io"
723 data-chart-library="dygraph"
724 data-dygraph-theme="sparkline"
725 data-dygraph-type="area"
729 data-colors="#558855"
730 data-show-value-of-response_time-at="netdata.response_time1"
734 <div class="mysparkline">
735 <div class="mysparkline-overchart-label">
736 <b>US - Atlanta</b>, API average response time in milliseconds
738 <div class="mysparkline-overchart-value" id="netdata.response_time2" >
740 <div data-netdata="netdata.response_time"
741 data-host="//atlanta.my-netdata.io"
742 data-chart-library="dygraph"
743 data-dygraph-theme="sparkline"
744 data-dygraph-type="area"
748 data-colors="#885555"
749 data-show-value-of-response_time-at="netdata.response_time2"
753 <div class="mysparkline">
754 <div class="mysparkline-overchart-label">
755 <b>EU - Greece</b>, API average response time in milliseconds
757 <div class="mysparkline-overchart-value" id="netdata.response_time3" >
759 <div data-netdata="netdata.response_time"
760 data-host="//athens.my-netdata.io"
761 data-chart-library="dygraph"
762 data-dygraph-theme="sparkline"
763 data-dygraph-type="area"
767 data-colors="#555588"
768 data-show-value-of-response_time-at="netdata.response_time3"
772 <div style="width: 100%; text-align: right; font-size: 1vw;">
773 <i class="fa fa-comment" aria-hidden="true"></i> <i>netdata is really <b>fast</b> (the values are milliseconds!)
775 These values include everything, from the reception of the first byte to the dispatch of the last, including gzip compression.
777 Values above 2-3ms are usually chart refreshes of charts with several dimensions, charts with very long durations (zoomed out), or file transfers.
783 <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
786 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>
788 it needs just 3 mins to be installed on your servers!
795 // google analytics when this is used for the home page of the demo sites
796 // you don't need this if you customize this dashboard for your needs
797 setTimeout(function() {
798 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
799 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
800 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
801 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
803 ga('create', 'UA-64295674-3', 'auto');
804 ga('send', 'pageview');