web/demosites.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>NetData - Real-time performance monitoring, done right!</title>
   5
   6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7         <meta charset="utf-8">
   8         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   9         <meta name="viewport" content="width=device-width, initial-scale=1">
  10         <meta name="apple-mobile-web-app-capable" content="yes">
  11         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  12
  13         <meta property="og:locale" content="en_US" />
  14         <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/>
  15         <meta property="og:url" content="http://my-netdata.io/"/>
  16         <meta property="og:type" content="website"/>
  17         <meta property="og:site_name" content="netdata"/>
  18         <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
  19         <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
  20
  21         <script>
  22         // --- OPTIONS FOR THE DASHBOARD --
  23
  24         // this section has to appear before loading dashboard.js
  25
  26         // Select a theme.
  27         // uncomment on of the two themes:
  28
  29         // var netdataTheme = 'default'; // this is white
  30         var netdataTheme = 'slate'; // this is dark
  31
  32
  33         // Set the default netdata server.
  34         // on charts without a 'data-host', this one will be used.
  35         // the default is the server that dashboard.js is downloaded from.
  36
  37         // var netdataServer = 'http://my.server:19999/';
  38         </script>
  39
  40         <!--
  41                 --- LOAD dashboard.js ---
  42
  43                 to host this HTML file on your web server,
  44                 you have to load dashboard.js from the netdata server.
  45
  46                 So, pick one the two below
  47                 If you pick the first, set the server name/IP.
  48
  49                 The second assumes you host this file on /usr/share/netdata/web
  50                 and that you have chown it to be owned by netdata:netdata
  51         -->
  52         <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
  53         <script type="text/javascript" src="dashboard.js?v39"></script>
  54
  55         <script>
  56         // --- OPTIONS FOR THE CHARTS --
  57
  58         // destroy charts not shown (lowers memory on the browsers)
  59         // set this to 'yes' to destroy, 'false' to hide the charts
  60         NETDATA.options.current.destroy_on_hide = false;
  61
  62         // set this to false, to always show all dimensions
  63         NETDATA.options.current.eliminate_zero_dimensions = true;
  64
  65         // set this to false, to lower the pressure on the browser
  66         NETDATA.options.current.concurrent_refreshes = true;
  67
  68         // if you need to support slow mobile phones, set this to false
  69         NETDATA.options.current.parallel_refresher = true;
  70
  71         // set this to false, to always update the charts, even if focus is lost
  72         NETDATA.options.current.stop_updates_when_focus_is_lost = true;
  73         </script>
  74
  75         <style>
  76
  77 body {
  78         font-size: 1vw;
  79 }
  80
  81 .mysparkline {
  82         position: relative;
  83         display: inline-block;
  84         min-height: 50px;
  85         width: 100%;
  86         height: 8vmax;
  87         text-align: left;
  88 }
  89
  90 .mysparkline-overchart-label {
  91         position: absolute;
  92         display: block;
  93         top: 0;
  94         left: 10px;
  95         bottom: 0;
  96         right: 0;
  97         font-size: 1vmax;
  98         z-index: 1;
  99 }
 100
 101 .mysparkline-overchart-value {
 102         position: absolute;
 103         display: block;
 104         top: 1.1vmax;
 105         left: 10px;
 106         bottom: 0;
 107         right: 0;
 108         font-size: 5vmax;
 109         z-index: 2;
 110         text-shadow: #333 0px 0px 2px;
 111 }
 112
 113 .myfullchart {
 114         position: relative;
 115         display: inline-block;
 116         width: 100%;
 117         height: 14vmax;
 118         min-height: 150px;
 119         text-align: left;
 120 }
 121
 122 .mygauge-combo {
 123         display: inline-block;
 124 }
 125
 126 .mygauge {
 127         position: relative;
 128         display: block;
 129         width: 20vw;
 130         height: 12vw;
 131 }
 132
 133 .mygauge-button {
 134         display: block;
 135 }
 136
 137 .mytitle {
 138         padding-top: 6vw;
 139         padding-bottom: 1vw;
 140         text-align: center;
 141         font-size: 2.4vw;
 142 }
 143
 144 .mysubtitle {
 145         padding-top: 2vw;
 146         padding-bottom: 1vw;
 147         text-align: center;
 148         font-size: 1.8vw;
 149 }
 150
 151 .mycontent {
 152         text-align: center;
 153         font-size: 1.5vw;
 154 }
 155
 156 @media only screen and (min-width : 992px) {
 157         .container {
 158                 width: 90%;
 159         }
 160 }
 161 @media only screen and (max-width : 992px) {
 162         .container {
 163                 width: 100%;
 164         }
 165 }
 166         </style>
 167
 168 </head>
 169 <body style="text-align: center;">
 170
 171 <div class="container">
 172
 173         <div style="text-align: center; font-size: 13vw; height: 14vw;">
 174                 <b>netdata</b>
 175         </div>
 176         <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
 177                 real-time performance monitoring
 178         </div>
 179         <div style="width:80%; text-align: right; font-size: 2.7vw;">
 180                 <strong>scaled out</strong>!
 181         </div>
 182         <div class="mytitle">
 183                 pick a <b>netdata</b> demo server
 184         </div>
 185         <div class="mycontent">
 186                 these demo servers show what you will get by installing <b>netdata</b>
 187         </div>
 188
 189         <div style="width: 100%; text-align: center; padding-top: 2vw;">
 190                 <div style="width: 100%; text-align: center;">
 191
 192                         <div class="mygauge-combo">
 193                                 <div class="mygauge">
 194                                         <div data-netdata="netdata.requests"
 195                                                         data-host="//london.my-netdata.io"
 196                                                         data-title="EU - London"
 197                                                         data-chart-library="gauge"
 198                                                         data-width="100%"
 199                                                         data-after="-300"
 200                                                         data-points="300"
 201                                                         data-colors="#558855"
 202                                                         ></div>
 203                                 </div>
 204                                 <div class="mygauge-button">
 205                                         <br/>&nbsp;<br/>
 206                                         <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>
 207                                         <div style="font-size: 1vw;">
 208                                                 Donated by DigitalOcean.com
 209                                         </div>
 210                                 </div>
 211                         </div>
 212                         <div class="mygauge-combo">
 213                                 <div class="mygauge">
 214                                         <div data-netdata="netdata.requests"
 215                                                         data-host="//atlanta.my-netdata.io"
 216                                                         data-title="US - Atlanta"
 217                                                         data-chart-library="gauge"
 218                                                         data-width="100%"
 219                                                         data-after="-300"
 220                                                         data-points="300"
 221                                                         data-colors="#AA5555"
 222                                                         ></div>
 223                                 </div>
 224                                 <div class="mygauge-button">
 225                                         <br/>&nbsp;<br/>
 226                                         <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>
 227                                         <div style="font-size: 1vw;">
 228                                                 Donated by CDN77.com
 229                                         </div>
 230                                 </div>
 231                         </div>
 232                         <div class="mygauge-combo">
 233                                 <div class="mygauge">
 234                                         <div data-netdata="netdata.requests"
 235                                                         data-host="//athens.my-netdata.io"
 236                                                         data-title="EU - Greece"
 237                                                         data-chart-library="gauge"
 238                                                         data-width="100%"
 239                                                         data-after="-300"
 240                                                         data-points="300"
 241                                                         data-colors="#5555AA"
 242                                                         ></div>
 243                                 </div>
 244                                 <div class="mygauge-button">
 245                                         <br/>&nbsp;<br/>
 246                                         <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>
 247                                         <div style="font-size: 0.8vw;">
 248                                                 &nbsp;
 249                                         </div>
 250                                 </div>
 251                         </div>
 252                 </div>
 253         </div>
 254
 255         <div class="mytitle">
 256                 this page is a custom <b>netdata</b> dashboard
 257         </div>
 258         <div class="mycontent">
 259                 charts are coming from 3 servers, in parallel
 260                 <br/>
 261                 the servers are not aware of this multi-server dashboard,
 262                 <br/>
 263                 each server is not aware of the other 2 servers,
 264                 <br/>
 265                 but on this dashboard <b>they are one</b>!
 266         </div>
 267         <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
 268                 <i class="fa fa-comment" aria-hidden="true"></i>
 269                 hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
 270                 <br/>
 271                 double click on a chart to reset them all
 272         </div>
 273
 274         <div class="mytitle">
 275                 our <code>ngnix</code> performance
 276         </div>
 277         <div class="mycontent">
 278                 (we proxy netdata through nginx, on the demo sites)
 279         </div>
 280
 281         <!-- Nav tabs -->
 282         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 283                 <li role="presentation" class="active"><a href="#nginx_requests" aria-controls="nginx_requests" role="tab" data-toggle="tab">Requests</a></li>
 284                 <li role="presentation"><a href="#nginx_connections" aria-controls="nginx_connections" role="tab" data-toggle="tab">Connections</a></li>
 285         </ul>
 286
 287         <!-- Tab panes -->
 288         <div class="tab-content">
 289                 <div role="tabpanel" class="tab-pane active" id="nginx_requests">
 290                         <div class="mysparkline">
 291                                 <div class="mysparkline-overchart-label">
 292                                         <b>EU - London</b> web requests/s
 293                                 </div>
 294                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
 295                                 </div>
 296                                 <div data-netdata="nginx.requests"
 297                                                 data-dimensions="requests"
 298                                                 data-host="//london.my-netdata.io"
 299                                                 data-chart-library="dygraph"
 300                                                 data-dygraph-theme="sparkline"
 301                                                 data-dygraph-type="area"
 302                                                 data-width="100%"
 303                                                 data-height="100%"
 304                                                 data-after="-300"
 305                                                 data-colors="#558855"
 306                                                 data-show-value-of-requests-at="nginx.requests.netdata"
 307                                                 ></div>
 308                         </div>
 309
 310                         <div class="mysparkline">
 311                                 <div class="mysparkline-overchart-label">
 312                                         <b>US - Atlanta</b> web requests/s
 313                                 </div>
 314                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
 315                                 </div>
 316                                 <div data-netdata="nginx.requests"
 317                                                 data-dimensions="requests"
 318                                                 data-host="//atlanta.my-netdata.io"
 319                                                 data-chart-library="dygraph"
 320                                                 data-dygraph-theme="sparkline"
 321                                                 data-dygraph-type="area"
 322                                                 data-width="100%"
 323                                                 data-height="100%"
 324                                                 data-after="-300"
 325                                                 data-colors="#AA5555"
 326                                                 data-show-value-of-requests-at="nginx.requests.netdata2"
 327                                                 ></div>
 328                         </div>
 329
 330                         <div class="mysparkline">
 331                                 <div class="mysparkline-overchart-label">
 332                                         <b>EU - Greece</b> web requests/s
 333                                 </div>
 334                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
 335                                 </div>
 336                                 <div data-netdata="nginx.requests"
 337                                                 data-dimensions="requests"
 338                                                 data-host="//athens.my-netdata.io"
 339                                                 data-chart-library="dygraph"
 340                                                 data-dygraph-theme="sparkline"
 341                                                 data-dygraph-type="area"
 342                                                 data-width="100%"
 343                                                 data-height="100%"
 344                                                 data-after="-300"
 345                                                 data-colors="#5555AA"
 346                                                 data-show-value-of-requests-at="nginx.requests.netdata3"
 347                                                 ></div>
 348                         </div>
 349                 </div>
 350
 351                 <div role="tabpanel" class="tab-pane" id="nginx_connections">
 352                         <div class="mysparkline">
 353                                 <div class="mysparkline-overchart-label">
 354                                         <b>EU - London</b> active connections
 355                                 </div>
 356                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
 357                                 </div>
 358                                 <div data-netdata="nginx.connections"
 359                                                 data-dimensions="active"
 360                                                 data-host="//london.my-netdata.io"
 361                                                 data-chart-library="dygraph"
 362                                                 data-dygraph-theme="sparkline"
 363                                                 data-dygraph-type="area"
 364                                                 data-width="100%"
 365                                                 data-height="100%"
 366                                                 data-after="-300"
 367                                                 data-colors="#558855"
 368                                                 data-show-value-of-active-at="nginx.connections.netdata1"
 369                                                 ></div>
 370                         </div>
 371
 372                         <div class="mysparkline">
 373                                 <div class="mysparkline-overchart-label">
 374                                         <b>US - Atlanta</b> active connections
 375                                 </div>
 376                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
 377                                 </div>
 378                                 <div data-netdata="nginx.connections"
 379                                                 data-dimensions="active"
 380                                                 data-host="//atlanta.my-netdata.io"
 381                                                 data-chart-library="dygraph"
 382                                                 data-dygraph-theme="sparkline"
 383                                                 data-dygraph-type="area"
 384                                                 data-width="100%"
 385                                                 data-height="100%"
 386                                                 data-after="-300"
 387                                                 data-colors="#AA5555"
 388                                                 data-show-value-of-active-at="nginx.connections.netdata2"
 389                                                 ></div>
 390                         </div>
 391
 392                         <div class="mysparkline">
 393                                 <div class="mysparkline-overchart-label">
 394                                         <b>EU - Greece</b> active connections
 395                                 </div>
 396                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
 397                                 </div>
 398                                 <div data-netdata="nginx.connections"
 399                                                 data-dimensions="active"
 400                                                 data-host="//athens.my-netdata.io"
 401                                                 data-chart-library="dygraph"
 402                                                 data-dygraph-theme="sparkline"
 403                                                 data-dygraph-type="area"
 404                                                 data-width="100%"
 405                                                 data-height="100%"
 406                                                 data-after="-300"
 407                                                 data-colors="#5555AA"
 408                                                 data-show-value-of-active-at="nginx.connections.netdata3"
 409                                                 ></div>
 410                         </div>
 411                 </div>
 412         </div>
 413
 414         <div style="width: 100%; text-align: right; font-size: 1vw;">
 415                 <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
 416         </div>
 417
 418
 419         <div class="mytitle">
 420                 bandwidth consumption on the demo sites
 421         </div>
 422         <div class="mycontent">
 423                 Linux QoS is configured by <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>
 424         </div>
 425
 426         <!-- Nav tabs -->
 427         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 428                 <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
 429                 <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
 430         </ul>
 431
 432         <!-- Tab panes -->
 433         <div class="tab-content">
 434                 <div role="tabpanel" class="tab-pane active" id="outbout">
 435                         <div class="myfullchart">
 436                                 <div data-netdata="tc.world_out"
 437                                         data-host="//london.my-netdata.io"
 438                                         data-chart-library="dygraph"
 439                                         data-title="EU - London, traffic we send per service"
 440                                         data-width="100%"
 441                                         data-height="100%"
 442                                         data-after="-300"
 443                                         ></div>
 444                         </div>
 445
 446                         <div class="myfullchart">
 447                                 <div data-netdata="tc.world_out"
 448                                         data-host="//atlanta.my-netdata.io"
 449                                         data-chart-library="dygraph"
 450                                         data-title="US - Atlanta, traffic we send per service"
 451                                         data-width="100%"
 452                                         data-height="100%"
 453                                         data-after="-300"
 454                                         ></div>
 455
 456                         </div>
 457
 458                         <div class="myfullchart">
 459                                 <div data-netdata="tc.world_out"
 460                                         data-host="//athens.my-netdata.io"
 461                                         data-chart-library="dygraph"
 462                                         data-title="EU - Greece, traffic we send per service"
 463                                         data-width="100%"
 464                                         data-height="100%"
 465                                         data-after="-300"
 466                                         ></div>
 467                         </div>
 468                 </div>
 469                 <div role="tabpanel" class="tab-pane" id="inbound">
 470                         <div class="myfullchart">
 471                                 <div data-netdata="tc.world_in"
 472                                         data-host="//london.my-netdata.io"
 473                                         data-chart-library="dygraph"
 474                                         data-title="EU - London, traffic we receive per service"
 475                                         data-width="100%"
 476                                         data-height="100%"
 477                                         data-after="-300"
 478                                         ></div>
 479
 480                         </div>
 481
 482                         <div class="myfullchart">
 483                                 <div data-netdata="tc.world_in"
 484                                         data-host="//atlanta.my-netdata.io"
 485                                         data-chart-library="dygraph"
 486                                         data-title="US - Atlanta, traffic we receive per service"
 487                                         data-width="100%"
 488                                         data-height="100%"
 489                                         data-after="-300"
 490                                         ></div>
 491
 492                         </div>
 493
 494                         <div class="myfullchart">
 495                                 <div data-netdata="tc.world_in"
 496                                         data-host="//athens.my-netdata.io"
 497                                         data-chart-library="dygraph"
 498                                         data-title="EU - Greece, traffic we receive per service"
 499                                         data-width="100%"
 500                                         data-height="100%"
 501                                         data-after="-300"
 502                                         ></div>
 503                         </div>
 504                 </div>
 505         </div>
 506         <div style="width: 100%; text-align: right; font-size: 1vw;">
 507                 <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
 508         </div>
 509
 510         <div class="mytitle">
 511                 DDoS protection performance on the demo sites
 512         </div>
 513         <div class="mycontent">
 514                 iptables SYNPROXY configured by <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
 515         </div>
 516
 517         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 518
 519                 <div class="mysparkline">
 520                         <div class="mysparkline-overchart-label">
 521                                 <b>EU - London</b>, TCP SYN packets/s received
 522                         </div>
 523                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
 524                         </div>
 525                         <div data-netdata="netfilter.synproxy_syn_received"
 526                                         data-dimensions="received"
 527                                         data-host="//london.my-netdata.io"
 528                                         data-chart-library="dygraph"
 529                                         data-dygraph-theme="sparkline"
 530                                         data-dygraph-type="area"
 531                                         data-width="100%"
 532                                         data-height="100%"
 533                                         data-after="-300"
 534                                         data-colors="#558855"
 535                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
 536                                         ></div>
 537                 </div>
 538
 539                 <div class="mysparkline">
 540                         <div class="mysparkline-overchart-label">
 541                                 <b>US - Atlanta</b>, TCP SYN packets/s received
 542                         </div>
 543                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
 544                         </div>
 545                         <div data-netdata="netfilter.synproxy_syn_received"
 546                                         data-dimensions="received"
 547                                         data-host="//atlanta.my-netdata.io"
 548                                         data-chart-library="dygraph"
 549                                         data-dygraph-theme="sparkline"
 550                                         data-dygraph-type="area"
 551                                         data-width="100%"
 552                                         data-height="100%"
 553                                         data-after="-300"
 554                                         data-colors="#885555"
 555                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
 556                                         ></div>
 557                 </div>
 558
 559                 <div class="mysparkline">
 560                         <div class="mysparkline-overchart-label">
 561                                 <b>EU - Greece</b>, TCP SYN packets/s received
 562                         </div>
 563                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
 564                         </div>
 565                         <div data-netdata="netfilter.synproxy_syn_received"
 566                                         data-dimensions="received"
 567                                         data-host="//athens.my-netdata.io"
 568                                         data-chart-library="dygraph"
 569                                         data-dygraph-theme="sparkline"
 570                                         data-dygraph-type="area"
 571                                         data-width="100%"
 572                                         data-height="100%"
 573                                         data-after="-300"
 574                                         data-colors="#555588"
 575                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
 576                                         ></div>
 577                 </div>
 578         </div>
 579         <div style="width: 100%; text-align: right; font-size: 1vw;">
 580                 <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
 581                 <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
 582         </div>
 583
 584
 585         <div class="mytitle">
 586                 CPU Utilization of the demo sites
 587         </div>
 588
 589         <div style="padding-top: 1vw;">
 590                 <div class="myfullchart">
 591                         <div data-netdata="system.cpu"
 592                                 data-host="//london.my-netdata.io"
 593                                 data-chart-library="dygraph"
 594                                 data-title="EU - London, CPU Usage"
 595                                 data-width="100%"
 596                                 data-height="100%"
 597                                 data-after="-300"
 598                                 ></div>
 599                 </div>
 600
 601                 <div class="myfullchart">
 602                         <div data-netdata="system.cpu"
 603                                 data-host="//atlanta.my-netdata.io"
 604                                 data-chart-library="dygraph"
 605                                 data-title="US - Atlanta, CPU Usage"
 606                                 data-width="100%"
 607                                 data-height="100%"
 608                                 data-after="-300"
 609                                 ></div>
 610                 </div>
 611
 612                 <div class="myfullchart">
 613                         <div data-netdata="system.cpu"
 614                                 data-host="//athens.my-netdata.io"
 615                                 data-chart-library="dygraph"
 616                                 data-title="EU - Greece, CPU Usage"
 617                                 data-width="100%"
 618                                 data-height="100%"
 619                                 data-after="-300"
 620                                 ></div>
 621                 </div>
 622         </div>
 623         <div style="width: 100%; text-align: right; font-size: 1vw;">
 624                 <i class="fa fa-comment" aria-hidden="true"></i> <i>what is using so much CPU?
 625                 <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>
 626         </div>
 627
 628         <div class="mytitle">
 629                 Netdata performance
 630         </div>
 631         <div class="mycontent">
 632                 netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
 633                 <br/>
 634                 <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.) and SNMP devices.
 635         </div>
 636
 637         <!-- Nav tabs -->
 638         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 639                 <li role="presentation" class="active"><a href="#netdata_cpu" aria-controls="netdata_cpu" role="tab" data-toggle="tab">CPU</a></li>
 640                 <li role="presentation"><a href="#netdata_avgtime" aria-controls="netdata_avgtime" role="tab" data-toggle="tab">Average Response Time</a></li>
 641         </ul>
 642
 643         <!-- Tab panes -->
 644         <div class="tab-content">
 645                 <div role="tabpanel" class="tab-pane active" id="netdata_cpu">
 646                         <div class="mysparkline">
 647                                 <div class="mysparkline-overchart-label">
 648                                         <b>EU - London</b>, CPU % of a single core
 649                                 </div>
 650                                 <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
 651                                 </div>
 652                                 <div data-netdata="users.cpu"
 653                                                 data-dimensions="netdata"
 654                                                 data-host="//london.my-netdata.io"
 655                                                 data-chart-library="dygraph"
 656                                                 data-dygraph-theme="sparkline"
 657                                                 data-dygraph-type="area"
 658                                                 data-width="100%"
 659                                                 data-height="100%"
 660                                                 data-after="-300"
 661                                                 data-colors="#558855"
 662                                                 data-show-value-of-netdata-at="users.cpu.netdata1"
 663                                                 ></div>
 664                         </div>
 665
 666                         <div class="mysparkline">
 667                                 <div class="mysparkline-overchart-label">
 668                                         <b>US - Atlanta</b>, CPU % of a single core
 669                                 </div>
 670                                 <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
 671                                 </div>
 672                                 <div data-netdata="users.cpu"
 673                                                 data-dimensions="netdata"
 674                                                 data-host="//atlanta.my-netdata.io"
 675                                                 data-chart-library="dygraph"
 676                                                 data-dygraph-theme="sparkline"
 677                                                 data-dygraph-type="area"
 678                                                 data-width="100%"
 679                                                 data-height="100%"
 680                                                 data-after="-300"
 681                                                 data-colors="#885555"
 682                                                 data-show-value-of-netdata-at="users.cpu.netdata2"
 683                                                 ></div>
 684                         </div>
 685
 686                         <div class="mysparkline">
 687                                 <div class="mysparkline-overchart-label">
 688                                         <b>EU - Greece</b>, CPU % of a single core
 689                                 </div>
 690                                 <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
 691                                 </div>
 692                                 <div data-netdata="users.cpu"
 693                                                 data-dimensions="netdata"
 694                                                 data-host="//athens.my-netdata.io"
 695                                                 data-chart-library="dygraph"
 696                                                 data-dygraph-theme="sparkline"
 697                                                 data-dygraph-type="area"
 698                                                 data-width="100%"
 699                                                 data-height="100%"
 700                                                 data-after="-300"
 701                                                 data-colors="#555588"
 702                                                 data-show-value-of-netdata-at="users.cpu.netdata3"
 703                                                 ></div>
 704                         </div>
 705
 706                         <div style="width: 100%; text-align: right; font-size: 1vw;">
 707                                 <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>!
 708                                 <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.
 709                                 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
 710                         </div>
 711                 </div>
 712
 713                 <div role="tabpanel" class="tab-pane" id="netdata_avgtime">
 714                         <div class="mysparkline">
 715                                 <div class="mysparkline-overchart-label">
 716                                         <b>EU - London</b>, API average response time in milliseconds
 717                                 </div>
 718                                 <div class="mysparkline-overchart-value" id="netdata.response_time1" >
 719                                 </div>
 720                                 <div data-netdata="netdata.response_time"
 721                                                 data-host="//london.my-netdata.io"
 722                                                 data-chart-library="dygraph"
 723                                                 data-dygraph-theme="sparkline"
 724                                                 data-dygraph-type="area"
 725                                                 data-width="100%"
 726                                                 data-height="100%"
 727                                                 data-after="-300"
 728                                                 data-colors="#558855"
 729                                                 data-show-value-of-response_time-at="netdata.response_time1"
 730                                                 ></div>
 731                         </div>
 732
 733                         <div class="mysparkline">
 734                                 <div class="mysparkline-overchart-label">
 735                                         <b>US - Atlanta</b>, API average response time in milliseconds
 736                                 </div>
 737                                 <div class="mysparkline-overchart-value" id="netdata.response_time2" >
 738                                 </div>
 739                                 <div data-netdata="netdata.response_time"
 740                                                 data-host="//atlanta.my-netdata.io"
 741                                                 data-chart-library="dygraph"
 742                                                 data-dygraph-theme="sparkline"
 743                                                 data-dygraph-type="area"
 744                                                 data-width="100%"
 745                                                 data-height="100%"
 746                                                 data-after="-300"
 747                                                 data-colors="#885555"
 748                                                 data-show-value-of-response_time-at="netdata.response_time2"
 749                                                 ></div>
 750                         </div>
 751
 752                         <div class="mysparkline">
 753                                 <div class="mysparkline-overchart-label">
 754                                         <b>EU - Greece</b>, API average response time in milliseconds
 755                                 </div>
 756                                 <div class="mysparkline-overchart-value" id="netdata.response_time3" >
 757                                 </div>
 758                                 <div data-netdata="netdata.response_time"
 759                                                 data-host="//athens.my-netdata.io"
 760                                                 data-chart-library="dygraph"
 761                                                 data-dygraph-theme="sparkline"
 762                                                 data-dygraph-type="area"
 763                                                 data-width="100%"
 764                                                 data-height="100%"
 765                                                 data-after="-300"
 766                                                 data-colors="#555588"
 767                                                 data-show-value-of-response_time-at="netdata.response_time3"
 768                                                 ></div>
 769                         </div>
 770
 771                         <div style="width: 100%; text-align: right; font-size: 1vw;">
 772                                 <i class="fa fa-comment" aria-hidden="true"></i> <i>netdata is really <b>fast</b> (the values are milliseconds!)
 773                                 <br/>
 774                                 These values include everything, from the reception of the first byte to the dispatch of the last, including gzip compression.
 775                                 <br/>
 776                                 Values above 2-3ms are usually chart refreshes of charts with several dimensions, charts with very long durations (zoomed out), or file transfers.
 777                                 </i>
 778                         </div>
 779                 </div>
 780         </div>
 781
 782         <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
 783                 want to know more?
 784                 <br/>
 785                 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>
 786                 <br/>
 787                 it needs just 3 mins to be installed on your servers!
 788                 <br/>
 789                 &nbsp;
 790         </div>
 791 </div>
 792 </body>
 793 <script>
 794         // google analytics when this is used for the home page of the demo sites
 795         // you don't need this if you customize this dashboard for your needs
 796         setTimeout(function() {
 797                 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 798                 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 799                 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 800                 })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 801
 802                 ga('create', 'UA-64295674-3', 'auto');
 803                 ga('send', 'pageview');
 804         }, 2000);
 805 </script>
 806 </html>