web/demosites.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>NetData - Real-time performance monitoring, done right!</title>
   5         <meta name="application-name" content="netdata">
   6
   7         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8         <meta 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
  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." />
  21
  22         <script>
  23         // --- OPTIONS FOR THE DASHBOARD --
  24
  25         // this section has to appear before loading dashboard.js
  26
  27         // Select a theme.
  28         // uncomment on of the two themes:
  29
  30         // var netdataTheme = 'default'; // this is white
  31         var netdataTheme = 'slate'; // this is dark
  32
  33
  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.
  37
  38         // var netdataServer = 'http://my.server:19999/';
  39         </script>
  40
  41         <!--
  42                 --- LOAD dashboard.js ---
  43
  44                 to host this HTML file on your web server,
  45                 you have to load dashboard.js from the netdata server.
  46
  47                 So, pick one the two below
  48                 If you pick the first, set the server name/IP.
  49
  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
  52         -->
  53         <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
  54         <script type="text/javascript" src="dashboard.js?v40"></script>
  55
  56         <script>
  57         // --- OPTIONS FOR THE CHARTS --
  58
  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;
  62
  63         // set this to false, to always show all dimensions
  64         NETDATA.options.current.eliminate_zero_dimensions = true;
  65
  66         // set this to false, to lower the pressure on the browser
  67         NETDATA.options.current.concurrent_refreshes = true;
  68
  69         // if you need to support slow mobile phones, set this to false
  70         NETDATA.options.current.parallel_refresher = true;
  71
  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;
  74         </script>
  75
  76         <style>
  77
  78 body {
  79         font-size: 1vw;
  80 }
  81
  82 .mysparkline {
  83         position: relative;
  84         display: inline-block;
  85         min-height: 50px;
  86         width: 100%;
  87         height: 8vmax;
  88         text-align: left;
  89 }
  90
  91 .mysparkline-overchart-label {
  92         position: absolute;
  93         display: block;
  94         top: 0;
  95         left: 10px;
  96         bottom: 0;
  97         right: 0;
  98         font-size: 1vmax;
  99         z-index: 1;
 100 }
 101
 102 .mysparkline-overchart-value {
 103         position: absolute;
 104         display: block;
 105         top: 1.1vmax;
 106         left: 10px;
 107         bottom: 0;
 108         right: 0;
 109         font-size: 5vmax;
 110         z-index: 2;
 111         text-shadow: #333 0px 0px 2px;
 112 }
 113
 114 .myfullchart {
 115         position: relative;
 116         display: inline-block;
 117         width: 100%;
 118         height: 14vmax;
 119         min-height: 150px;
 120         text-align: left;
 121 }
 122
 123 .mygauge-combo {
 124         display: inline-block;
 125 }
 126
 127 .mygauge {
 128         position: relative;
 129         display: block;
 130         width: 20vw;
 131         height: 12vw;
 132 }
 133
 134 .mygauge-button {
 135         display: block;
 136 }
 137
 138 .mytitle {
 139         padding-top: 6vw;
 140         padding-bottom: 1vw;
 141         text-align: center;
 142         font-size: 2.4vw;
 143 }
 144
 145 .mysubtitle {
 146         padding-top: 2vw;
 147         padding-bottom: 1vw;
 148         text-align: center;
 149         font-size: 1.8vw;
 150 }
 151
 152 .mycontent {
 153         text-align: center;
 154         font-size: 1.5vw;
 155 }
 156
 157 @media only screen and (min-width : 992px) {
 158         .container {
 159                 width: 90%;
 160         }
 161 }
 162 @media only screen and (max-width : 992px) {
 163         .container {
 164                 width: 100%;
 165         }
 166 }
 167         </style>
 168
 169 </head>
 170 <body style="text-align: center;">
 171
 172 <div class="container">
 173
 174         <div style="text-align: center; font-size: 13vw; height: 14vw;">
 175                 <b>netdata</b>
 176         </div>
 177         <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
 178                 real-time performance monitoring
 179         </div>
 180         <div style="width:80%; text-align: right; font-size: 2.7vw;">
 181                 <strong>scaled out</strong>!
 182         </div>
 183         <div class="mytitle">
 184                 pick a <b>netdata</b> demo server
 185         </div>
 186         <div class="mycontent">
 187                 these demo servers show what you will get by installing <b>netdata</b>
 188         </div>
 189
 190         <div style="width: 100%; text-align: center; padding-top: 2vw;">
 191                 <div style="width: 100%; text-align: center;">
 192
 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"
 199                                                         data-width="100%"
 200                                                         data-after="-300"
 201                                                         data-points="300"
 202                                                         data-colors="#558855"
 203                                                         ></div>
 204                                 </div>
 205                                 <div class="mygauge-button">
 206                                         <br/>&nbsp;<br/>
 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
 210                                         </div>
 211                                 </div>
 212                         </div>
 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"
 219                                                         data-width="100%"
 220                                                         data-after="-300"
 221                                                         data-points="300"
 222                                                         data-colors="#AA5555"
 223                                                         ></div>
 224                                 </div>
 225                                 <div class="mygauge-button">
 226                                         <br/>&nbsp;<br/>
 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;">
 229                                                 Donated by CDN77.com
 230                                         </div>
 231                                 </div>
 232                         </div>
 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"
 239                                                         data-width="100%"
 240                                                         data-after="-300"
 241                                                         data-points="300"
 242                                                         data-colors="#5555AA"
 243                                                         ></div>
 244                                 </div>
 245                                 <div class="mygauge-button">
 246                                         <br/>&nbsp;<br/>
 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;">
 249                                                 &nbsp;
 250                                         </div>
 251                                 </div>
 252                         </div>
 253                 </div>
 254         </div>
 255
 256         <div class="mytitle">
 257                 this page is a custom <b>netdata</b> dashboard
 258         </div>
 259         <div class="mycontent">
 260                 charts are coming from 3 servers, in parallel
 261                 <br/>
 262                 the servers are not aware of this multi-server dashboard,
 263                 <br/>
 264                 each server is not aware of the other 2 servers,
 265                 <br/>
 266                 but on this dashboard <b>they are one</b>!
 267         </div>
 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>!
 271                 <br/>
 272                 double click on a chart to reset them all
 273         </div>
 274
 275         <div class="mytitle">
 276                 our <code>nginx</code> performance
 277         </div>
 278         <div class="mycontent">
 279                 (we proxy netdata through nginx, on the demo sites)
 280         </div>
 281
 282         <!-- Nav tabs -->
 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>
 286         </ul>
 287
 288         <!-- Tab panes -->
 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
 294                                 </div>
 295                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
 296                                 </div>
 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"
 303                                                 data-width="100%"
 304                                                 data-height="100%"
 305                                                 data-after="-300"
 306                                                 data-colors="#558855"
 307                                                 data-show-value-of-requests-at="nginx.requests.netdata"
 308                                                 ></div>
 309                         </div>
 310
 311                         <div class="mysparkline">
 312                                 <div class="mysparkline-overchart-label">
 313                                         <b>US - Atlanta</b> web requests/s
 314                                 </div>
 315                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
 316                                 </div>
 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"
 323                                                 data-width="100%"
 324                                                 data-height="100%"
 325                                                 data-after="-300"
 326                                                 data-colors="#AA5555"
 327                                                 data-show-value-of-requests-at="nginx.requests.netdata2"
 328                                                 ></div>
 329                         </div>
 330
 331                         <div class="mysparkline">
 332                                 <div class="mysparkline-overchart-label">
 333                                         <b>EU - Greece</b> web requests/s
 334                                 </div>
 335                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
 336                                 </div>
 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"
 343                                                 data-width="100%"
 344                                                 data-height="100%"
 345                                                 data-after="-300"
 346                                                 data-colors="#5555AA"
 347                                                 data-show-value-of-requests-at="nginx.requests.netdata3"
 348                                                 ></div>
 349                         </div>
 350                 </div>
 351
 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
 356                                 </div>
 357                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
 358                                 </div>
 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"
 365                                                 data-width="100%"
 366                                                 data-height="100%"
 367                                                 data-after="-300"
 368                                                 data-colors="#558855"
 369                                                 data-show-value-of-active-at="nginx.connections.netdata1"
 370                                                 ></div>
 371                         </div>
 372
 373                         <div class="mysparkline">
 374                                 <div class="mysparkline-overchart-label">
 375                                         <b>US - Atlanta</b> active connections
 376                                 </div>
 377                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
 378                                 </div>
 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"
 385                                                 data-width="100%"
 386                                                 data-height="100%"
 387                                                 data-after="-300"
 388                                                 data-colors="#AA5555"
 389                                                 data-show-value-of-active-at="nginx.connections.netdata2"
 390                                                 ></div>
 391                         </div>
 392
 393                         <div class="mysparkline">
 394                                 <div class="mysparkline-overchart-label">
 395                                         <b>EU - Greece</b> active connections
 396                                 </div>
 397                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
 398                                 </div>
 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"
 405                                                 data-width="100%"
 406                                                 data-height="100%"
 407                                                 data-after="-300"
 408                                                 data-colors="#5555AA"
 409                                                 data-show-value-of-active-at="nginx.connections.netdata3"
 410                                                 ></div>
 411                         </div>
 412                 </div>
 413         </div>
 414
 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
 417         </div>
 418
 419
 420         <div class="mytitle">
 421                 bandwidth consumption on the demo sites
 422         </div>
 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>
 425         </div>
 426
 427         <!-- Nav tabs -->
 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>
 431         </ul>
 432
 433         <!-- Tab panes -->
 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"
 441                                         data-width="100%"
 442                                         data-height="100%"
 443                                         data-after="-300"
 444                                         ></div>
 445                         </div>
 446
 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"
 452                                         data-width="100%"
 453                                         data-height="100%"
 454                                         data-after="-300"
 455                                         ></div>
 456
 457                         </div>
 458
 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"
 464                                         data-width="100%"
 465                                         data-height="100%"
 466                                         data-after="-300"
 467                                         ></div>
 468                         </div>
 469                 </div>
 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"
 476                                         data-width="100%"
 477                                         data-height="100%"
 478                                         data-after="-300"
 479                                         ></div>
 480
 481                         </div>
 482
 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"
 488                                         data-width="100%"
 489                                         data-height="100%"
 490                                         data-after="-300"
 491                                         ></div>
 492
 493                         </div>
 494
 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"
 500                                         data-width="100%"
 501                                         data-height="100%"
 502                                         data-after="-300"
 503                                         ></div>
 504                         </div>
 505                 </div>
 506         </div>
 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>
 509         </div>
 510
 511         <div class="mytitle">
 512                 DDoS protection performance on the demo sites
 513         </div>
 514         <div class="mycontent">
 515                 iptables SYNPROXY configured by <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
 516         </div>
 517
 518         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 519
 520                 <div class="mysparkline">
 521                         <div class="mysparkline-overchart-label">
 522                                 <b>EU - London</b>, TCP SYN packets/s received
 523                         </div>
 524                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
 525                         </div>
 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"
 532                                         data-width="100%"
 533                                         data-height="100%"
 534                                         data-after="-300"
 535                                         data-colors="#558855"
 536                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
 537                                         ></div>
 538                 </div>
 539
 540                 <div class="mysparkline">
 541                         <div class="mysparkline-overchart-label">
 542                                 <b>US - Atlanta</b>, TCP SYN packets/s received
 543                         </div>
 544                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
 545                         </div>
 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"
 552                                         data-width="100%"
 553                                         data-height="100%"
 554                                         data-after="-300"
 555                                         data-colors="#885555"
 556                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
 557                                         ></div>
 558                 </div>
 559
 560                 <div class="mysparkline">
 561                         <div class="mysparkline-overchart-label">
 562                                 <b>EU - Greece</b>, TCP SYN packets/s received
 563                         </div>
 564                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
 565                         </div>
 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"
 572                                         data-width="100%"
 573                                         data-height="100%"
 574                                         data-after="-300"
 575                                         data-colors="#555588"
 576                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
 577                                         ></div>
 578                 </div>
 579         </div>
 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>
 583         </div>
 584
 585
 586         <div class="mytitle">
 587                 CPU Utilization of the demo sites
 588         </div>
 589
 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"
 596                                 data-width="100%"
 597                                 data-height="100%"
 598                                 data-after="-300"
 599                                 ></div>
 600                 </div>
 601
 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"
 607                                 data-width="100%"
 608                                 data-height="100%"
 609                                 data-after="-300"
 610                                 ></div>
 611                 </div>
 612
 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"
 618                                 data-width="100%"
 619                                 data-height="100%"
 620                                 data-after="-300"
 621                                 ></div>
 622                 </div>
 623         </div>
 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>
 627         </div>
 628
 629         <div class="mytitle">
 630                 Netdata performance
 631         </div>
 632         <div class="mycontent">
 633                 netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
 634                 <br/>
 635                 <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.) and SNMP devices.
 636         </div>
 637
 638         <!-- Nav tabs -->
 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>
 642         </ul>
 643
 644         <!-- Tab panes -->
 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
 650                                 </div>
 651                                 <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
 652                                 </div>
 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"
 659                                                 data-width="100%"
 660                                                 data-height="100%"
 661                                                 data-after="-300"
 662                                                 data-colors="#558855"
 663                                                 data-show-value-of-netdata-at="users.cpu.netdata1"
 664                                                 ></div>
 665                         </div>
 666
 667                         <div class="mysparkline">
 668                                 <div class="mysparkline-overchart-label">
 669                                         <b>US - Atlanta</b>, CPU % of a single core
 670                                 </div>
 671                                 <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
 672                                 </div>
 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"
 679                                                 data-width="100%"
 680                                                 data-height="100%"
 681                                                 data-after="-300"
 682                                                 data-colors="#885555"
 683                                                 data-show-value-of-netdata-at="users.cpu.netdata2"
 684                                                 ></div>
 685                         </div>
 686
 687                         <div class="mysparkline">
 688                                 <div class="mysparkline-overchart-label">
 689                                         <b>EU - Greece</b>, CPU % of a single core
 690                                 </div>
 691                                 <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
 692                                 </div>
 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"
 699                                                 data-width="100%"
 700                                                 data-height="100%"
 701                                                 data-after="-300"
 702                                                 data-colors="#555588"
 703                                                 data-show-value-of-netdata-at="users.cpu.netdata3"
 704                                                 ></div>
 705                         </div>
 706
 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>
 711                         </div>
 712                 </div>
 713
 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
 718                                 </div>
 719                                 <div class="mysparkline-overchart-value" id="netdata.response_time1" >
 720                                 </div>
 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"
 726                                                 data-width="100%"
 727                                                 data-height="100%"
 728                                                 data-after="-300"
 729                                                 data-colors="#558855"
 730                                                 data-show-value-of-response_time-at="netdata.response_time1"
 731                                                 ></div>
 732                         </div>
 733
 734                         <div class="mysparkline">
 735                                 <div class="mysparkline-overchart-label">
 736                                         <b>US - Atlanta</b>, API average response time in milliseconds
 737                                 </div>
 738                                 <div class="mysparkline-overchart-value" id="netdata.response_time2" >
 739                                 </div>
 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"
 745                                                 data-width="100%"
 746                                                 data-height="100%"
 747                                                 data-after="-300"
 748                                                 data-colors="#885555"
 749                                                 data-show-value-of-response_time-at="netdata.response_time2"
 750                                                 ></div>
 751                         </div>
 752
 753                         <div class="mysparkline">
 754                                 <div class="mysparkline-overchart-label">
 755                                         <b>EU - Greece</b>, API average response time in milliseconds
 756                                 </div>
 757                                 <div class="mysparkline-overchart-value" id="netdata.response_time3" >
 758                                 </div>
 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"
 764                                                 data-width="100%"
 765                                                 data-height="100%"
 766                                                 data-after="-300"
 767                                                 data-colors="#555588"
 768                                                 data-show-value-of-response_time-at="netdata.response_time3"
 769                                                 ></div>
 770                         </div>
 771
 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!)
 774                                 <br/>
 775                                 These values include everything, from the reception of the first byte to the dispatch of the last, including gzip compression.
 776                                 <br/>
 777                                 Values above 2-3ms are usually chart refreshes of charts with several dimensions, charts with very long durations (zoomed out), or file transfers.
 778                                 </i>
 779                         </div>
 780                 </div>
 781         </div>
 782
 783         <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
 784                 want to know more?
 785                 <br/>
 786                 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>
 787                 <br/>
 788                 it needs just 3 mins to be installed on your servers!
 789                 <br/>
 790                 &nbsp;
 791         </div>
 792 </div>
 793 </body>
 794 <script>
 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');
 802
 803                 ga('create', 'UA-64295674-3', 'auto');
 804                 ga('send', 'pageview');
 805         }, 2000);
 806 </script>
 807 </html>