]> arthur.barton.de Git - netdata.git/blobdiff - web/demosites.html
Merge pull request #643 from paulfantom/master
[netdata.git] / web / demosites.html
index 49334e2aa72000db63fbf5194ab8fc4adde54537..252312c744f46993236bac0aad7e05f9daef833c 100644 (file)
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-       <title>NetData Multi-Server Dashboard</title>
+       <title>NetData - Real-time performance monitoring, done right!</title>
+       <meta name="application-name" content="netdata">
 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
+       <meta property="og:locale" content="en_US" />
+       <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/>
+       <meta property="og:url" content="http://my-netdata.io/"/>
+       <meta property="og:type" content="website"/>
+       <meta property="og:site_name" content="netdata"/>
+       <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
+       <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
+
        <script>
        // --- OPTIONS FOR THE DASHBOARD --
 
                and that you have chown it to be owned by netdata:netdata
        -->
        <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
-       <script type="text/javascript" src="dashboard.js"></script>
+       <script type="text/javascript" src="dashboard.js?v41"></script>
 
        <script>
        // --- OPTIONS FOR THE CHARTS --
 
        // destroy charts not shown (lowers memory on the browsers)
-       // set this to 'yes' to destroy, 'false' to hide the charts
-       NETDATA.options.current.destroy_on_hide = false;
+       // set this to 'true' to destroy, 'false' to hide the charts
+       NETDATA.options.current.destroy_on_hide = true;
        
        // set this to false, to always show all dimensions
        NETDATA.options.current.eliminate_zero_dimensions = true;
        
        // set this to false, to lower the pressure on the browser
-       NETDATA.options.current.concurrent_refreshes = true;
+       NETDATA.options.current.concurrent_refreshes = false;
 
        // if you need to support slow mobile phones, set this to false
        NETDATA.options.current.parallel_refresher = true;
@@ -75,7 +84,7 @@ body {
        display: inline-block;
        min-height: 50px;
        width: 100%;
-       height: 8vw;
+       height: 8vmax;
        text-align: left;
 }
 
@@ -86,18 +95,18 @@ body {
        left: 10px;
        bottom: 0;
        right: 0;
-       font-size: 1vw;
+       font-size: 1vmax;
        z-index: 1;
 }
 
 .mysparkline-overchart-value {
        position: absolute;
        display: block;
-       top: 1.1vw;
+       top: 1.1vmax;
        left: 10px;
        bottom: 0;
        right: 0;
-       font-size: 5vw;
+       font-size: 5vmax;
        z-index: 2;
        text-shadow: #333 0px 0px 2px;
 }
@@ -106,7 +115,7 @@ body {
        position: relative;
        display: inline-block;
        width: 100%;
-       height: 15vw;
+       height: 14vmax;
        min-height: 150px;
        text-align: left;
 }
@@ -118,8 +127,8 @@ body {
 .mygauge {
        position: relative;
        display: block;
-       width: 20vw;
-       height: 12vw;
+       width: 18vw;
+       height: 11vw;
 }
 
 .mygauge-button {
@@ -145,6 +154,16 @@ body {
        font-size: 1.5vw;
 }
 
+@media only screen and (min-width : 992px) {
+       .container {
+               width: 90%;
+       }
+}
+@media only screen and (max-width : 992px) {
+       .container {
+               width: 100%;
+       }
+}
        </style>
 
 </head>
@@ -162,13 +181,10 @@ body {
                <strong>scaled out</strong>!
        </div>
        <div class="mytitle">
-               welcome to <b>netdata</b>
-       </div>
-       <div class="mysubtitle">
-               pick a demo server, to view its dashboard
+               pick a <b>netdata</b> demo server
        </div>
        <div class="mycontent">
-               these dashboards is what you will get by installing <b>netdata</b>
+               these demo servers show what you will get by installing <b>netdata</b>
        </div>
 
        <div style="width: 100%; text-align: center; padding-top: 2vw;">
@@ -177,7 +193,7 @@ body {
                        <div class="mygauge-combo">
                                <div class="mygauge">
                                        <div data-netdata="netdata.requests"
-                                                       data-host="//netdata1.firehol.org"
+                                                       data-host="//london.my-netdata.io"
                                                        data-title="EU - London"
                                                        data-chart-library="gauge"
                                                        data-width="100%"
@@ -188,8 +204,8 @@ body {
                                </div>
                                <div class="mygauge-button">
                                        <br/>&nbsp;<br/>
-                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata1.firehol.org/default.html'" style="font-size: 1.5vw;">Enter London!</button>
-                                       <div style="font-size: 1vw;">
+                                       <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.0vw;">Enter London!</button>
+                                       <div style="font-size: 0.8vw;">
                                                Donated by DigitalOcean.com
                                        </div>
                                </div>
@@ -197,7 +213,7 @@ body {
                        <div class="mygauge-combo">
                                <div class="mygauge">
                                        <div data-netdata="netdata.requests"
-                                                       data-host="//netdata2.firehol.org"
+                                                       data-host="//atlanta.my-netdata.io"
                                                        data-title="US - Atlanta"
                                                        data-chart-library="gauge"
                                                        data-width="100%"
@@ -208,8 +224,8 @@ body {
                                </div>
                                <div class="mygauge-button">
                                        <br/>&nbsp;<br/>
-                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata2.firehol.org/default.html'" style="font-size: 1.5vw;">Enter Atlanta!</button>
-                                       <div style="font-size: 1vw;">
+                                       <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.0vw;">Enter Atlanta!</button>
+                                       <div style="font-size: 0.8vw;">
                                                Donated by CDN77.com
                                        </div>
                                </div>
@@ -217,8 +233,8 @@ body {
                        <div class="mygauge-combo">
                                <div class="mygauge">
                                        <div data-netdata="netdata.requests"
-                                                       data-host="//netdata3.firehol.org"
-                                                       data-title="EU - Greece"
+                                                       data-host="//sanfrancisco.netdata.rocks"
+                                                       data-title="US - California"
                                                        data-chart-library="gauge"
                                                        data-width="100%"
                                                        data-after="-300"
@@ -228,9 +244,110 @@ body {
                                </div>
                                <div class="mygauge-button">
                                        <br/>&nbsp;<br/>
-                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata3.firehol.org/default.html'" style="font-size: 1.5vw;">Come to Greece!</button>
+                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//sanfrancisco.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter California!</button>
+                                       <div style="font-size: 0.8vw;">
+                                               Donated by DigitalOcean.com
+                                       </div>
+                               </div>
+                       </div>
+                       <div class="mygauge-combo">
+                               <div class="mygauge">
+                                       <div data-netdata="netdata.requests"
+                                                       data-host="//toronto.netdata.rocks"
+                                                       data-title="Canada"
+                                                       data-chart-library="gauge"
+                                                       data-width="100%"
+                                                       data-after="-300"
+                                                       data-points="300"
+                                                       data-colors="#885588"
+                                                       ></div>
+                               </div>
+                               <div class="mygauge-button">
+                                       <br/>&nbsp;<br/>
+                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//toronto.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Canada!</button>
+                                       <div style="font-size: 0.8vw;">
+                                               Donated by DigitalOcean.com
+                                       </div>
+                               </div>
+                       </div>
+                       <br/>&nbsp;<br/>
+                       <div class="mygauge-combo">
+                               <div class="mygauge">
+                                       <div data-netdata="netdata.requests"
+                                                       data-host="//frankfurt.netdata.rocks"
+                                                       data-title="EU - Germany"
+                                                       data-chart-library="easypiechart"
+                                                       data-width="75%"
+                                                       data-after="-300"
+                                                       data-points="300"
+                                                       data-colors="#AAAA55"
+                                                       ></div>
+                               </div>
+                               <div class="mygauge-button">
+                                       <br/>&nbsp;<br/>
+                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//frankfurt.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Germany!</button>
+                                       <div style="font-size: 0.8vw;">
+                                               Donated by DigitalOcean.com
+                                       </div>
+                               </div>
+                       </div>
+                       <div class="mygauge-combo">
+                               <div class="mygauge">
+                                       <div data-netdata="netdata.requests"
+                                                       data-host="//newyork.netdata.rocks"
+                                                       data-title="US - New York"
+                                                       data-chart-library="easypiechart"
+                                                       data-width="75%"
+                                                       data-after="-300"
+                                                       data-points="300"
+                                                       data-colors="#BB5533"
+                                                       ></div>
+                               </div>
+                               <div class="mygauge-button">
+                                       <br/>&nbsp;<br/>
+                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//newyork.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter New York!</button>
+                                       <div style="font-size: 0.8vw;">
+                                               Donated by DigitalOcean.com
+                                       </div>
+                               </div>
+                       </div>
+                       <div class="mygauge-combo">
+                               <div class="mygauge">
+                                       <div data-netdata="netdata.requests"
+                                                       data-host="//singapore.netdata.rocks"
+                                                       data-title="Signapore"
+                                                       data-chart-library="easypiechart"
+                                                       data-width="75%"
+                                                       data-after="-300"
+                                                       data-points="300"
+                                                       data-colors="#5588BB"
+                                                       ></div>
+                               </div>
+                               <div class="mygauge-button">
+                                       <br/>&nbsp;<br/>
+                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//singapore.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Singapore!</button>
+                                       <div style="font-size: 0.8vw;">
+                                               Donated by DigitalOcean.com
+                                       </div>
+                               </div>
+                       </div>
+                       <div class="mygauge-combo">
+                               <div class="mygauge">
+                                       <div data-netdata="netdata.requests"
+                                                       data-host="//bangalore.netdata.rocks"
+                                                       data-title="India"
+                                                       data-chart-library="easypiechart"
+                                                       data-width="75%"
+                                                       data-after="-300"
+                                                       data-points="300"
+                                                       data-colors="#BB55BB"
+                                                       ></div>
+                               </div>
+                               <div class="mygauge-button">
+                                       <br/>&nbsp;<br/>
+                                       <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//bangalore.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter India!</button>
                                        <div style="font-size: 0.8vw;">
-                                               &nbsp;
+                                               Donated by DigitalOcean.com
                                        </div>
                                </div>
                        </div>
@@ -241,11 +358,11 @@ body {
                this page is a custom <b>netdata</b> dashboard
        </div>
        <div class="mycontent">
-               charts are coming from 3 servers, in parallel
+               charts are coming from 8 servers, in parallel
                <br/>
                the servers are not aware of this multi-server dashboard,
                <br/>
-               each server is not aware of the other servers,
+               each server is not aware of the other servers,
                <br/>
                but on this dashboard <b>they are one</b>!
        </div>
@@ -257,7 +374,7 @@ body {
        </div>
 
        <div class="mytitle">
-               our <code>ngnix</code> performance
+               our <code>nginx</code> performance
        </div>
        <div class="mycontent">
                (we proxy netdata through nginx, on the demo sites)
@@ -280,7 +397,7 @@ body {
                                </div>
                                <div data-netdata="nginx.requests"
                                                data-dimensions="requests"
-                                               data-host="//netdata1.firehol.org"
+                                               data-host="//london.my-netdata.io"
                                                data-chart-library="dygraph"
                                                data-dygraph-theme="sparkline"
                                                data-dygraph-type="area"
@@ -300,7 +417,7 @@ body {
                                </div>
                                <div data-netdata="nginx.requests"
                                                data-dimensions="requests"
-                                               data-host="//netdata2.firehol.org"
+                                               data-host="//atlanta.my-netdata.io"
                                                data-chart-library="dygraph"
                                                data-dygraph-theme="sparkline"
                                                data-dygraph-type="area"
@@ -314,13 +431,13 @@ body {
 
                        <div class="mysparkline">
                                <div class="mysparkline-overchart-label">
-                                       <b>EU - Greece</b> web requests/s
+                                       <b>US - California</b> web requests/s
                                </div>
                                <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
                                </div>
                                <div data-netdata="nginx.requests"
                                                data-dimensions="requests"
-                                               data-host="//netdata3.firehol.org"
+                                               data-host="//sanfrancisco.netdata.rocks"
                                                data-chart-library="dygraph"
                                                data-dygraph-theme="sparkline"
                                                data-dygraph-type="area"
@@ -331,18 +448,38 @@ body {
                                                data-show-value-of-requests-at="nginx.requests.netdata3"
                                                ></div>
                        </div>
+
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>Canada</b> web requests/s
+                               </div>
+                               <div class="mysparkline-overchart-value" id="nginx.requests.netdata4" >
+                               </div>
+                               <div data-netdata="nginx.requests"
+                                               data-dimensions="requests"
+                                               data-host="//toronto.netdata.rocks"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#885588"
+                                               data-show-value-of-requests-at="nginx.requests.netdata4"
+                                               ></div>
+                       </div>
                </div>
 
                <div role="tabpanel" class="tab-pane" id="nginx_connections">
                        <div class="mysparkline">
                                <div class="mysparkline-overchart-label">
-                                       <b>EU - London</b> web requests/s
+                                       <b>EU - London</b> active connections
                                </div>
                                <div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
                                </div>
                                <div data-netdata="nginx.connections"
                                                data-dimensions="active"
-                                               data-host="//netdata1.firehol.org"
+                                               data-host="//london.my-netdata.io"
                                                data-chart-library="dygraph"
                                                data-dygraph-theme="sparkline"
                                                data-dygraph-type="area"
@@ -356,13 +493,13 @@ body {
 
                        <div class="mysparkline">
                                <div class="mysparkline-overchart-label">
-                                       <b>US - Atlanta</b> web requests/s
+                                       <b>US - Atlanta</b> active connections
                                </div>
                                <div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
                                </div>
                                <div data-netdata="nginx.connections"
                                                data-dimensions="active"
-                                               data-host="//netdata2.firehol.org"
+                                               data-host="//atlanta.my-netdata.io"
                                                data-chart-library="dygraph"
                                                data-dygraph-theme="sparkline"
                                                data-dygraph-type="area"
@@ -376,13 +513,13 @@ body {
 
                        <div class="mysparkline">
                                <div class="mysparkline-overchart-label">
-                                       <b>EU - Greece</b> web requests/s
+                                       <b>US - California</b> active connections
                                </div>
                                <div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
                                </div>
                                <div data-netdata="nginx.connections"
                                                data-dimensions="active"
-                                               data-host="//netdata3.firehol.org"
+                                               data-host="//sanfrancisco.netdata.rocks"
                                                data-chart-library="dygraph"
                                                data-dygraph-theme="sparkline"
                                                data-dygraph-type="area"
@@ -393,6 +530,26 @@ body {
                                                data-show-value-of-active-at="nginx.connections.netdata3"
                                                ></div>
                        </div>
+
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>Canada</b> active connections
+                               </div>
+                               <div class="mysparkline-overchart-value" id="nginx.connections.netdata4" >
+                               </div>
+                               <div data-netdata="nginx.connections"
+                                               data-dimensions="active"
+                                               data-host="//toronto.netdata.rocks"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#885588"
+                                               data-show-value-of-active-at="nginx.connections.netdata4"
+                                               ></div>
+                       </div>
                </div>
        </div>
 
@@ -419,7 +576,7 @@ body {
                <div role="tabpanel" class="tab-pane active" id="outbout">
                        <div class="myfullchart">
                                <div data-netdata="tc.world_out"
-                                       data-host="//netdata1.firehol.org"
+                                       data-host="//london.my-netdata.io"
                                        data-chart-library="dygraph"
                                        data-title="EU - London, traffic we send per service"
                                        data-width="100%"
@@ -430,7 +587,7 @@ body {
 
                        <div class="myfullchart">
                                <div data-netdata="tc.world_out"
-                                       data-host="//netdata2.firehol.org"
+                                       data-host="//atlanta.my-netdata.io"
                                        data-chart-library="dygraph"
                                        data-title="US - Atlanta, traffic we send per service"
                                        data-width="100%"
@@ -442,19 +599,31 @@ body {
 
                        <div class="myfullchart">
                                <div data-netdata="tc.world_out"
-                                       data-host="//netdata3.firehol.org"
+                                       data-host="//sanfrancisco.netdata.rocks"
+                                       data-chart-library="dygraph"
+                                       data-title="US - California, traffic we send per service"
+                                       data-width="100%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+                       </div>
+
+                       <div class="myfullchart">
+                               <div data-netdata="tc.world_out"
+                                       data-host="//toronto.netdata.rocks"
                                        data-chart-library="dygraph"
-                                       data-title="EU - Greece, traffic we send per service"
+                                       data-title="Canada, traffic we send per service"
                                        data-width="100%"
                                        data-height="100%"
                                        data-after="-300"
                                        ></div>
                        </div>
                </div>
+
                <div role="tabpanel" class="tab-pane" id="inbound">
                        <div class="myfullchart">
                                <div data-netdata="tc.world_in"
-                                       data-host="//netdata1.firehol.org"
+                                       data-host="//london.my-netdata.io"
                                        data-chart-library="dygraph"
                                        data-title="EU - London, traffic we receive per service"
                                        data-width="100%"
@@ -466,7 +635,7 @@ body {
 
                        <div class="myfullchart">
                                <div data-netdata="tc.world_in"
-                                       data-host="//netdata2.firehol.org"
+                                       data-host="//atlanta.my-netdata.io"
                                        data-chart-library="dygraph"
                                        data-title="US - Atlanta, traffic we receive per service"
                                        data-width="100%"
@@ -478,9 +647,20 @@ body {
 
                        <div class="myfullchart">
                                <div data-netdata="tc.world_in"
-                                       data-host="//netdata3.firehol.org"
+                                       data-host="//sanfrancisco.netdata.rocks"
                                        data-chart-library="dygraph"
-                                       data-title="EU - Greece, traffic we receive per service"
+                                       data-title="US - California, traffic we receive per service"
+                                       data-width="100%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       ></div>
+                       </div>
+
+                       <div class="myfullchart">
+                               <div data-netdata="tc.world_in"
+                                       data-host="//toronto.netdata.rocks"
+                                       data-chart-library="dygraph"
+                                       data-title="Canada, traffic we receive per service"
                                        data-width="100%"
                                        data-height="100%"
                                        data-after="-300"
@@ -496,7 +676,7 @@ body {
                DDoS protection performance on the demo sites
        </div>
        <div class="mycontent">
-               iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
+               iptables SYNPROXY configured by <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
        </div>
 
        <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
@@ -509,7 +689,7 @@ body {
                        </div>
                        <div data-netdata="netfilter.synproxy_syn_received"
                                        data-dimensions="received"
-                                       data-host="//netdata1.firehol.org"
+                                       data-host="//london.my-netdata.io"
                                        data-chart-library="dygraph"
                                        data-dygraph-theme="sparkline"
                                        data-dygraph-type="area"
@@ -529,7 +709,7 @@ body {
                        </div>
                        <div data-netdata="netfilter.synproxy_syn_received"
                                        data-dimensions="received"
-                                       data-host="//netdata2.firehol.org"
+                                       data-host="//atlanta.my-netdata.io"
                                        data-chart-library="dygraph"
                                        data-dygraph-theme="sparkline"
                                        data-dygraph-type="area"
@@ -543,13 +723,13 @@ body {
 
                <div class="mysparkline">
                        <div class="mysparkline-overchart-label">
-                               <b>EU - Greece</b>, TCP SYN packets/s received
+                               <b>US - California</b>, TCP SYN packets/s received
                        </div>
                        <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
                        </div>
                        <div data-netdata="netfilter.synproxy_syn_received"
                                        data-dimensions="received"
-                                       data-host="//netdata3.firehol.org"
+                                       data-host="//sanfrancisco.netdata.rocks"
                                        data-chart-library="dygraph"
                                        data-dygraph-theme="sparkline"
                                        data-dygraph-type="area"
@@ -560,6 +740,26 @@ body {
                                        data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
                                        ></div>
                </div>
+
+               <div class="mysparkline">
+                       <div class="mysparkline-overchart-label">
+                               <b>Canada</b>, TCP SYN packets/s received
+                       </div>
+                       <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata4" >
+                       </div>
+                       <div data-netdata="netfilter.synproxy_syn_received"
+                                       data-dimensions="received"
+                                       data-host="//toronto.netdata.rocks"
+                                       data-chart-library="dygraph"
+                                       data-dygraph-theme="sparkline"
+                                       data-dygraph-type="area"
+                                       data-width="100%"
+                                       data-height="100%"
+                                       data-after="-300"
+                                       data-colors="#885588"
+                                       data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata4"
+                                       ></div>
+               </div>
        </div>
        <div style="width: 100%; text-align: right; font-size: 1vw;">
                <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
@@ -574,130 +774,272 @@ body {
        <div style="padding-top: 1vw;">
                <div class="myfullchart">
                        <div data-netdata="system.cpu"
-                               data-host="//netdata1.firehol.org"
+                               data-host="//london.my-netdata.io"
                                data-chart-library="dygraph"
                                data-title="EU - London, CPU Usage"
                                data-width="100%"
                                data-height="100%"
                                data-after="-300"
+                               data-dygraph-valuerange="[0, 100]"
                                ></div>
                </div>
 
                <div class="myfullchart">
                        <div data-netdata="system.cpu"
-                               data-host="//netdata2.firehol.org"
+                               data-host="//atlanta.my-netdata.io"
                                data-chart-library="dygraph"
                                data-title="US - Atlanta, CPU Usage"
                                data-width="100%"
                                data-height="100%"
                                data-after="-300"
+                               data-dygraph-valuerange="[0, 100]"
+                               ></div>
+               </div>
+
+               <div class="myfullchart">
+                       <div data-netdata="system.cpu"
+                               data-host="//sanfrancisco.netdata.rocks"
+                               data-chart-library="dygraph"
+                               data-title="US - California, CPU Usage"
+                               data-width="100%"
+                               data-height="100%"
+                               data-after="-300"
+                               data-dygraph-valuerange="[0, 100]"
                                ></div>
                </div>
 
                <div class="myfullchart">
                        <div data-netdata="system.cpu"
-                               data-host="//netdata3.firehol.org"
+                               data-host="//toronto.netdata.rocks"
                                data-chart-library="dygraph"
-                               data-title="EU - Greece, CPU Usage"
+                               data-title="Canada, CPU Usage"
                                data-width="100%"
                                data-height="100%"
                                data-after="-300"
+                               data-dygraph-valuerange="[0, 100]"
                                ></div>
                </div>
        </div>
        <div style="width: 100%; text-align: right; font-size: 1vw;">
-               <i class="fa fa-comment" aria-hidden="true"></i> <i>what does it take so much CPU?
+               <i class="fa fa-comment" aria-hidden="true"></i> <i>what is using so much CPU?
                <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>
        </div>
 
        <div class="mytitle">
-               CPU Usage of the netdata user
+               Netdata performance
        </div>
        <div class="mycontent">
                netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
                <br/>
-               and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
+               <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.) and SNMP devices.
        </div>
 
-       <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
+       <!-- Nav tabs -->
+       <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
+               <li role="presentation" class="active"><a href="#netdata_cpu" aria-controls="netdata_cpu" role="tab" data-toggle="tab">CPU</a></li>
+               <li role="presentation"><a href="#netdata_avgtime" aria-controls="netdata_avgtime" role="tab" data-toggle="tab">Average Response Time</a></li>
+       </ul>
 
-               <div class="mysparkline">
-                       <div class="mysparkline-overchart-label">
-                               <b>EU - London</b>, CPU % of a single core
+       <!-- Tab panes -->
+       <div class="tab-content">
+               <div role="tabpanel" class="tab-pane active" id="netdata_cpu">
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>EU - London</b>, CPU % of a single core
+                               </div>
+                               <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
+                               </div>
+                               <div data-netdata="users.cpu"
+                                               data-dimensions="netdata"
+                                               data-host="//london.my-netdata.io"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#558855"
+                                               data-show-value-of-netdata-at="users.cpu.netdata1"
+                                               ></div>
                        </div>
-                       <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
+
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>US - Atlanta</b>, CPU % of a single core
+                               </div>
+                               <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
+                               </div>
+                               <div data-netdata="users.cpu"
+                                               data-dimensions="netdata"
+                                               data-host="//atlanta.my-netdata.io"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#885555"
+                                               data-show-value-of-netdata-at="users.cpu.netdata2"
+                                               ></div>
                        </div>
-                       <div data-netdata="users.cpu"
-                                       data-dimensions="netdata"
-                                       data-host="//netdata1.firehol.org"
-                                       data-chart-library="dygraph"
-                                       data-dygraph-theme="sparkline"
-                                       data-dygraph-type="area"
-                                       data-width="100%"
-                                       data-height="100%"
-                                       data-after="-300"
-                                       data-colors="#558855"
-                                       data-show-value-of-netdata-at="users.cpu.netdata1"
-                                       ></div>
-               </div>
 
-               <div class="mysparkline">
-                       <div class="mysparkline-overchart-label">
-                               <b>US - Atlanta</b>, CPU % of a single core
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>US - California</b>, CPU % of a single core
+                               </div>
+                               <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
+                               </div>
+                               <div data-netdata="users.cpu"
+                                               data-dimensions="netdata"
+                                               data-host="//sanfrancisco.netdata.rocks"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#555588"
+                                               data-show-value-of-netdata-at="users.cpu.netdata3"
+                                               ></div>
                        </div>
-                       <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
+
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>Toronto</b>, CPU % of a single core
+                               </div>
+                               <div class="mysparkline-overchart-value" id="users.cpu.netdata4" >
+                               </div>
+                               <div data-netdata="users.cpu"
+                                               data-dimensions="netdata"
+                                               data-host="//toronto.netdata.rocks"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#885588"
+                                               data-show-value-of-netdata-at="users.cpu.netdata4"
+                                               ></div>
+                       </div>
+
+                       <div style="width: 100%; text-align: right; font-size: 1vw;">
+                               <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>!
+                               <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.
+                               <br/>and including the chart refreshes for the dashboards of all viewers.</i>
                        </div>
-                       <div data-netdata="users.cpu"
-                                       data-dimensions="netdata"
-                                       data-host="//netdata2.firehol.org"
-                                       data-chart-library="dygraph"
-                                       data-dygraph-theme="sparkline"
-                                       data-dygraph-type="area"
-                                       data-width="100%"
-                                       data-height="100%"
-                                       data-after="-300"
-                                       data-colors="#885555"
-                                       data-show-value-of-netdata-at="users.cpu.netdata2"
-                                       ></div>
                </div>
 
-               <div class="mysparkline">
-                       <div class="mysparkline-overchart-label">
-                               <b>EU - Greece</b>, CPU % of a single core
+               <div role="tabpanel" class="tab-pane" id="netdata_avgtime">
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>EU - London</b>, API average response time in milliseconds
+                               </div>
+                               <div class="mysparkline-overchart-value" id="netdata.response_time1" >
+                               </div>
+                               <div data-netdata="netdata.response_time"
+                                               data-host="//london.my-netdata.io"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#558855"
+                                               data-show-value-of-response_time-at="netdata.response_time1"
+                                               ></div>
                        </div>
-                       <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
+
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>US - Atlanta</b>, API average response time in milliseconds
+                               </div>
+                               <div class="mysparkline-overchart-value" id="netdata.response_time2" >
+                               </div>
+                               <div data-netdata="netdata.response_time"
+                                               data-host="//atlanta.my-netdata.io"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#885555"
+                                               data-show-value-of-response_time-at="netdata.response_time2"
+                                               ></div>
+                       </div>
+
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>US - California</b>, API average response time in milliseconds
+                               </div>
+                               <div class="mysparkline-overchart-value" id="netdata.response_time3" >
+                               </div>
+                               <div data-netdata="netdata.response_time"
+                                               data-host="//sanfrancisco.netdata.rocks"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#555588"
+                                               data-show-value-of-response_time-at="netdata.response_time3"
+                                               ></div>
+                       </div>
+
+                       <div class="mysparkline">
+                               <div class="mysparkline-overchart-label">
+                                       <b>Canada</b>, API average response time in milliseconds
+                               </div>
+                               <div class="mysparkline-overchart-value" id="netdata.response_time4" >
+                               </div>
+                               <div data-netdata="netdata.response_time"
+                                               data-host="//toronto.netdata.rocks"
+                                               data-chart-library="dygraph"
+                                               data-dygraph-theme="sparkline"
+                                               data-dygraph-type="area"
+                                               data-width="100%"
+                                               data-height="100%"
+                                               data-after="-300"
+                                               data-colors="#885588"
+                                               data-show-value-of-response_time-at="netdata.response_time4"
+                                               ></div>
+                       </div>
+
+                       <div style="width: 100%; text-align: right; font-size: 1vw;">
+                               <i class="fa fa-comment" aria-hidden="true"></i> <i>netdata is really <b>fast</b> (the values are milliseconds!)
+                               <br/>
+                               These values include everything, from the reception of the first byte to the dispatch of the last, including gzip compression.
+                               <br/>
+                               Values above 2-3ms are usually chart refreshes of charts with several dimensions, charts with very long durations (zoomed out), or file transfers.
+                               </i>
                        </div>
-                       <div data-netdata="users.cpu"
-                                       data-dimensions="netdata"
-                                       data-host="//netdata3.firehol.org"
-                                       data-chart-library="dygraph"
-                                       data-dygraph-theme="sparkline"
-                                       data-dygraph-type="area"
-                                       data-width="100%"
-                                       data-height="100%"
-                                       data-after="-300"
-                                       data-colors="#555588"
-                                       data-show-value-of-netdata-at="users.cpu.netdata3"
-                                       ></div>
                </div>
        </div>
-       <div style="width: 100%; text-align: right; font-size: 1vw;">
-               <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>!
-               <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.
-               <br/>and including the chart refreshes for the dashboards of all viewers.</i>
-       </div>
 
        <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
                want to know more?
                <br/>
-               jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>!
-               <br/>
-               <b>netdata</b> monitors 1.000 - 5.000 metrics out of the box
+               jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>
                <br/>
-               and it needs just 3 mins to be installed!
+               it needs just 3 mins to be installed on your servers!
                <br/>
                &nbsp;
        </div>
 </div>
 </body>
+<script>
+       // google analytics when this is used for the home page of the demo sites
+       // you don't need this if you customize this dashboard for your needs
+       setTimeout(function() {
+               (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+               (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+               m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+               })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+               ga('create', 'UA-64295674-3', 'auto');
+               ga('send', 'pageview');
+       }, 2000);
+</script>
 </html>