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://cloud.githubusercontent.com/assets/2662304/19168687/f6a567be-8c19-11e6-8561-ce8d589e8346.gif"/>
  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 </head>
  22
  23 <script>
  24     // --- OPTIONS FOR THE DASHBOARD --
  25
  26     // this section has to appear before loading dashboard.js
  27
  28     // Select a theme.
  29     // uncomment on of the two themes:
  30
  31     // var netdataTheme = 'default'; // this is white
  32     var netdataTheme = 'slate'; // this is dark
  33
  34
  35     // Set the default netdata server.
  36     // on charts without a 'data-host', this one will be used.
  37     // the default is the server that dashboard.js is downloaded from.
  38
  39     // var netdataServer = 'http://my.server:19999/';
  40     </script>
  41
  42     <!--
  43         --- LOAD dashboard.js ---
  44
  45         to host this HTML file on your web server,
  46         you have to load dashboard.js from the netdata server.
  47
  48         So, pick one the two below
  49         If you pick the first, set the server name/IP.
  50
  51         The second assumes you host this file on /usr/share/netdata/web
  52         and that you have chown it to be owned by netdata:netdata
  53     -->
  54     <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
  55     <script type="text/javascript" src="dashboard.js?v20161009-1"></script>
  56
  57     <script>
  58     // --- OPTIONS FOR THE CHARTS --
  59
  60     // destroy charts not shown (lowers memory on the browsers)
  61     // set this to 'true' to destroy, 'false' to hide the charts
  62     NETDATA.options.current.destroy_on_hide = true;
  63
  64     // set this to false, to always show all dimensions
  65     NETDATA.options.current.eliminate_zero_dimensions = true;
  66
  67     // set this to false, to lower the pressure on the browser
  68     NETDATA.options.current.concurrent_refreshes = false;
  69
  70     // if you need to support slow mobile phones, set this to false
  71     NETDATA.options.current.parallel_refresher = true;
  72
  73     // set this to false, to always update the charts, even if focus is lost
  74     NETDATA.options.current.stop_updates_when_focus_is_lost = true;
  75 </script>
  76 <style>
  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: 18vw;
 130         height: 11vw;
 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: 80%;
 159         }
 160     }
 161     @media only screen and (max-width : 992px) {
 162         .container {
 163             width: 100%;
 164         }
 165     }
 166 </style>
 167
 168 <body style="text-align: center; background-color: #272b30;">
 169
 170 <div class="container">
 171
 172     <div style="text-align: center; font-size: 13vw; height: 14vw;">
 173         <b>netdata</b>
 174     </div>
 175     <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
 176         real-time performance monitoring
 177     </div>
 178     <div style="width:80%; text-align: right; font-size: 2.7vw;">
 179         <strong>scaled out</strong>!
 180     </div>
 181     <div class="mytitle">
 182         pick a <b>netdata</b> demo server
 183     </div>
 184     <div class="mycontent">
 185         these demo servers show what you will get by installing <b>netdata</b>
 186     </div>
 187
 188     <div style="width: 100%; text-align: center; padding-top: 2vw;">
 189         <div style="width: 100%; text-align: center;">
 190
 191             <div class="mygauge-combo">
 192                 <div class="mygauge">
 193                     <div data-netdata="netdata.requests"
 194                             data-host="//london.my-netdata.io"
 195                             data-title="EU - London"
 196                             data-chart-library="gauge"
 197                             data-width="100%"
 198                             data-after="-300"
 199                             data-points="300"
 200                             data-colors="#558855"
 201                             ></div>
 202                 </div>
 203                 <div class="mygauge-button">
 204                     <br/>&nbsp;<br/>
 205                     <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//london.my-netdata.io/default.html'" style="font-size: 1.0vw;">Enter London!</button>
 206                     <div style="font-size: 0.8vw;">
 207                         Donated by DigitalOcean.com
 208                     </div>
 209                 </div>
 210             </div>
 211             <div class="mygauge-combo">
 212                 <div class="mygauge">
 213                     <div data-netdata="netdata.requests"
 214                             data-host="//atlanta.my-netdata.io"
 215                             data-title="US - Atlanta"
 216                             data-chart-library="gauge"
 217                             data-width="100%"
 218                             data-after="-300"
 219                             data-points="300"
 220                             data-colors="#AA5555"
 221                             ></div>
 222                 </div>
 223                 <div class="mygauge-button">
 224                     <br/>&nbsp;<br/>
 225                     <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//atlanta.my-netdata.io/default.html'" style="font-size: 1.0vw;">Enter Atlanta!</button>
 226                     <div style="font-size: 0.8vw;">
 227                         Donated by CDN77.com
 228                     </div>
 229                 </div>
 230             </div>
 231             <div class="mygauge-combo">
 232                 <div class="mygauge">
 233                     <div data-netdata="netdata.requests"
 234                             data-host="//sanfrancisco.netdata.rocks"
 235                             data-title="US - California"
 236                             data-chart-library="gauge"
 237                             data-width="100%"
 238                             data-after="-300"
 239                             data-points="300"
 240                             data-colors="#5555AA"
 241                             ></div>
 242                 </div>
 243                 <div class="mygauge-button">
 244                     <br/>&nbsp;<br/>
 245                     <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//sanfrancisco.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter California!</button>
 246                     <div style="font-size: 0.8vw;">
 247                         Donated by DigitalOcean.com
 248                     </div>
 249                 </div>
 250             </div>
 251             <div class="mygauge-combo">
 252                 <div class="mygauge">
 253                     <div data-netdata="netdata.requests"
 254                             data-host="//toronto.netdata.rocks"
 255                             data-title="Canada"
 256                             data-chart-library="gauge"
 257                             data-width="100%"
 258                             data-after="-300"
 259                             data-points="300"
 260                             data-colors="#885588"
 261                             ></div>
 262                 </div>
 263                 <div class="mygauge-button">
 264                     <br/>&nbsp;<br/>
 265                     <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//toronto.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Canada!</button>
 266                     <div style="font-size: 0.8vw;">
 267                         Donated by DigitalOcean.com
 268                     </div>
 269                 </div>
 270             </div>
 271             <br/>&nbsp;<br/>
 272             <div class="mygauge-combo">
 273                 <div class="mygauge">
 274                     <div data-netdata="netdata.requests"
 275                             data-host="//frankfurt.netdata.rocks"
 276                             data-title="EU - Germany"
 277                             data-chart-library="easypiechart"
 278                             data-width="75%"
 279                             data-after="-300"
 280                             data-points="300"
 281                             data-colors="#AAAA55"
 282                             ></div>
 283                 </div>
 284                 <div class="mygauge-button">
 285                     <br/>&nbsp;<br/>
 286                     <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//frankfurt.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Germany!</button>
 287                     <div style="font-size: 0.8vw;">
 288                         Donated by DigitalOcean.com
 289                     </div>
 290                 </div>
 291             </div>
 292             <div class="mygauge-combo">
 293                 <div class="mygauge">
 294                     <div data-netdata="netdata.requests"
 295                             data-host="//newyork.netdata.rocks"
 296                             data-title="US - New York"
 297                             data-chart-library="easypiechart"
 298                             data-width="75%"
 299                             data-after="-300"
 300                             data-points="300"
 301                             data-colors="#BB5533"
 302                             ></div>
 303                 </div>
 304                 <div class="mygauge-button">
 305                     <br/>&nbsp;<br/>
 306                     <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//newyork.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter New York!</button>
 307                     <div style="font-size: 0.8vw;">
 308                         Donated by DigitalOcean.com
 309                     </div>
 310                 </div>
 311             </div>
 312             <div class="mygauge-combo">
 313                 <div class="mygauge">
 314                     <div data-netdata="netdata.requests"
 315                             data-host="//singapore.netdata.rocks"
 316                             data-title="Singapore"
 317                             data-chart-library="easypiechart"
 318                             data-width="75%"
 319                             data-after="-300"
 320                             data-points="300"
 321                             data-colors="#5588BB"
 322                             ></div>
 323                 </div>
 324                 <div class="mygauge-button">
 325                     <br/>&nbsp;<br/>
 326                     <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//singapore.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Singapore!</button>
 327                     <div style="font-size: 0.8vw;">
 328                         Donated by DigitalOcean.com
 329                     </div>
 330                 </div>
 331             </div>
 332             <div class="mygauge-combo">
 333                 <div class="mygauge">
 334                     <div data-netdata="netdata.requests"
 335                             data-host="//bangalore.netdata.rocks"
 336                             data-title="India"
 337                             data-chart-library="easypiechart"
 338                             data-width="75%"
 339                             data-after="-300"
 340                             data-points="300"
 341                             data-colors="#BB55BB"
 342                             ></div>
 343                 </div>
 344                 <div class="mygauge-button">
 345                     <br/>&nbsp;<br/>
 346                     <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//bangalore.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter India!</button>
 347                     <div style="font-size: 0.8vw;">
 348                         Donated by DigitalOcean.com
 349                     </div>
 350                 </div>
 351             </div>
 352         </div>
 353     </div>
 354
 355     <div class="mytitle">
 356         this page is a custom <b>netdata</b> dashboard
 357     </div>
 358     <div class="mycontent">
 359         charts are coming from 8 servers, in parallel
 360         <br/>
 361         the servers are not aware of this multi-server dashboard,
 362         <br/>
 363         each server is not aware of the other servers,
 364         <br/>
 365         but on this dashboard <b>they are one</b>!
 366     </div>
 367     <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
 368         <i class="fa fa-comment" aria-hidden="true"></i>
 369         hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
 370         <br/>
 371         double click on a chart to reset them all
 372     </div>
 373
 374     <div class="mytitle">
 375         our <code>nginx</code> performance
 376     </div>
 377     <div class="mycontent">
 378         (we proxy netdata through nginx, on the demo sites)
 379     </div>
 380
 381     <!-- Nav tabs -->
 382     <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 383         <li role="presentation" class="active"><a href="#nginx_requests" aria-controls="nginx_requests" role="tab" data-toggle="tab">Requests</a></li>
 384         <li role="presentation"><a href="#nginx_connections" aria-controls="nginx_connections" role="tab" data-toggle="tab">Connections</a></li>
 385     </ul>
 386
 387     <!-- Tab panes -->
 388     <div class="tab-content">
 389         <div role="tabpanel" class="tab-pane active" id="nginx_requests">
 390             <div class="mysparkline">
 391                 <div class="mysparkline-overchart-label">
 392                     <b>EU - London</b> web requests/s
 393                 </div>
 394                 <div class="mysparkline-overchart-value" id="nginx_local.requests.netdata" >
 395                 </div>
 396                 <div data-netdata="nginx_local.requests"
 397                         data-dimensions="requests"
 398                         data-host="//london.my-netdata.io"
 399                         data-chart-library="dygraph"
 400                         data-dygraph-theme="sparkline"
 401                         data-dygraph-type="area"
 402                         data-width="100%"
 403                         data-height="100%"
 404                         data-after="-300"
 405                         data-colors="#558855"
 406                         data-show-value-of-requests-at="nginx_local.requests.netdata"
 407                         ></div>
 408             </div>
 409
 410             <div class="mysparkline">
 411                 <div class="mysparkline-overchart-label">
 412                     <b>US - Atlanta</b> web requests/s
 413                 </div>
 414                 <div class="mysparkline-overchart-value" id="nginx_local.requests.netdata2" >
 415                 </div>
 416                 <div data-netdata="nginx_local.requests"
 417                         data-dimensions="requests"
 418                         data-host="//atlanta.my-netdata.io"
 419                         data-chart-library="dygraph"
 420                         data-dygraph-theme="sparkline"
 421                         data-dygraph-type="area"
 422                         data-width="100%"
 423                         data-height="100%"
 424                         data-after="-300"
 425                         data-colors="#AA5555"
 426                         data-show-value-of-requests-at="nginx_local.requests.netdata2"
 427                         ></div>
 428             </div>
 429
 430             <div class="mysparkline">
 431                 <div class="mysparkline-overchart-label">
 432                     <b>US - California</b> web requests/s
 433                 </div>
 434                 <div class="mysparkline-overchart-value" id="nginx_local.requests.netdata3" >
 435                 </div>
 436                 <div data-netdata="nginx_local.requests"
 437                         data-dimensions="requests"
 438                         data-host="//sanfrancisco.netdata.rocks"
 439                         data-chart-library="dygraph"
 440                         data-dygraph-theme="sparkline"
 441                         data-dygraph-type="area"
 442                         data-width="100%"
 443                         data-height="100%"
 444                         data-after="-300"
 445                         data-colors="#5555AA"
 446                         data-show-value-of-requests-at="nginx_local.requests.netdata3"
 447                         ></div>
 448             </div>
 449
 450             <div class="mysparkline">
 451                 <div class="mysparkline-overchart-label">
 452                     <b>Canada</b> web requests/s
 453                 </div>
 454                 <div class="mysparkline-overchart-value" id="nginx_local.requests.netdata4" >
 455                 </div>
 456                 <div data-netdata="nginx_local.requests"
 457                         data-dimensions="requests"
 458                         data-host="//toronto.netdata.rocks"
 459                         data-chart-library="dygraph"
 460                         data-dygraph-theme="sparkline"
 461                         data-dygraph-type="area"
 462                         data-width="100%"
 463                         data-height="100%"
 464                         data-after="-300"
 465                         data-colors="#885588"
 466                         data-show-value-of-requests-at="nginx_local.requests.netdata4"
 467                         ></div>
 468             </div>
 469         </div>
 470
 471         <div role="tabpanel" class="tab-pane" id="nginx_connections">
 472             <div class="mysparkline">
 473                 <div class="mysparkline-overchart-label">
 474                     <b>EU - London</b> active connections
 475                 </div>
 476                 <div class="mysparkline-overchart-value" id="nginx_local.connections.netdata1" >
 477                 </div>
 478                 <div data-netdata="nginx_local.connections"
 479                         data-dimensions="active"
 480                         data-host="//london.my-netdata.io"
 481                         data-chart-library="dygraph"
 482                         data-dygraph-theme="sparkline"
 483                         data-dygraph-type="area"
 484                         data-width="100%"
 485                         data-height="100%"
 486                         data-after="-300"
 487                         data-colors="#558855"
 488                         data-show-value-of-active-at="nginx_local.connections.netdata1"
 489                         ></div>
 490             </div>
 491
 492             <div class="mysparkline">
 493                 <div class="mysparkline-overchart-label">
 494                     <b>US - Atlanta</b> active connections
 495                 </div>
 496                 <div class="mysparkline-overchart-value" id="nginx_local.connections.netdata2" >
 497                 </div>
 498                 <div data-netdata="nginx_local.connections"
 499                         data-dimensions="active"
 500                         data-host="//atlanta.my-netdata.io"
 501                         data-chart-library="dygraph"
 502                         data-dygraph-theme="sparkline"
 503                         data-dygraph-type="area"
 504                         data-width="100%"
 505                         data-height="100%"
 506                         data-after="-300"
 507                         data-colors="#AA5555"
 508                         data-show-value-of-active-at="nginx_local.connections.netdata2"
 509                         ></div>
 510             </div>
 511
 512             <div class="mysparkline">
 513                 <div class="mysparkline-overchart-label">
 514                     <b>US - California</b> active connections
 515                 </div>
 516                 <div class="mysparkline-overchart-value" id="nginx_local.connections.netdata3" >
 517                 </div>
 518                 <div data-netdata="nginx_local.connections"
 519                         data-dimensions="active"
 520                         data-host="//sanfrancisco.netdata.rocks"
 521                         data-chart-library="dygraph"
 522                         data-dygraph-theme="sparkline"
 523                         data-dygraph-type="area"
 524                         data-width="100%"
 525                         data-height="100%"
 526                         data-after="-300"
 527                         data-colors="#5555AA"
 528                         data-show-value-of-active-at="nginx_local.connections.netdata3"
 529                         ></div>
 530             </div>
 531
 532             <div class="mysparkline">
 533                 <div class="mysparkline-overchart-label">
 534                     <b>Canada</b> active connections
 535                 </div>
 536                 <div class="mysparkline-overchart-value" id="nginx_local.connections.netdata4" >
 537                 </div>
 538                 <div data-netdata="nginx_local.connections"
 539                         data-dimensions="active"
 540                         data-host="//toronto.netdata.rocks"
 541                         data-chart-library="dygraph"
 542                         data-dygraph-theme="sparkline"
 543                         data-dygraph-type="area"
 544                         data-width="100%"
 545                         data-height="100%"
 546                         data-after="-300"
 547                         data-colors="#885588"
 548                         data-show-value-of-active-at="nginx_local.connections.netdata4"
 549                         ></div>
 550             </div>
 551         </div>
 552     </div>
 553
 554     <div style="width: 100%; text-align: right; font-size: 1vw;">
 555         <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
 556     </div>
 557
 558
 559     <div class="mytitle">
 560         bandwidth consumption on the demo sites
 561     </div>
 562     <div class="mycontent">
 563         Linux QoS is configured by <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>
 564     </div>
 565
 566     <!-- Nav tabs -->
 567     <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 568         <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
 569         <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
 570     </ul>
 571
 572     <!-- Tab panes -->
 573     <div class="tab-content">
 574         <div role="tabpanel" class="tab-pane active" id="outbout">
 575             <div class="myfullchart">
 576                 <div data-netdata="tc.world_out"
 577                     data-host="//london.my-netdata.io"
 578                     data-chart-library="dygraph"
 579                     data-title="EU - London, traffic we send per service"
 580                     data-width="100%"
 581                     data-height="100%"
 582                     data-after="-300"
 583                     ></div>
 584             </div>
 585
 586             <div class="myfullchart">
 587                 <div data-netdata="tc.world_out"
 588                     data-host="//atlanta.my-netdata.io"
 589                     data-chart-library="dygraph"
 590                     data-title="US - Atlanta, traffic we send per service"
 591                     data-width="100%"
 592                     data-height="100%"
 593                     data-after="-300"
 594                     ></div>
 595
 596             </div>
 597
 598             <div class="myfullchart">
 599                 <div data-netdata="tc.world_out"
 600                     data-host="//sanfrancisco.netdata.rocks"
 601                     data-chart-library="dygraph"
 602                     data-title="US - California, traffic we send per service"
 603                     data-width="100%"
 604                     data-height="100%"
 605                     data-after="-300"
 606                     ></div>
 607             </div>
 608
 609             <div class="myfullchart">
 610                 <div data-netdata="tc.world_out"
 611                     data-host="//toronto.netdata.rocks"
 612                     data-chart-library="dygraph"
 613                     data-title="Canada, traffic we send per service"
 614                     data-width="100%"
 615                     data-height="100%"
 616                     data-after="-300"
 617                     ></div>
 618             </div>
 619         </div>
 620
 621         <div role="tabpanel" class="tab-pane" id="inbound">
 622             <div class="myfullchart">
 623                 <div data-netdata="tc.world_in"
 624                     data-host="//london.my-netdata.io"
 625                     data-chart-library="dygraph"
 626                     data-title="EU - London, traffic we receive per service"
 627                     data-width="100%"
 628                     data-height="100%"
 629                     data-after="-300"
 630                     ></div>
 631
 632             </div>
 633
 634             <div class="myfullchart">
 635                 <div data-netdata="tc.world_in"
 636                     data-host="//atlanta.my-netdata.io"
 637                     data-chart-library="dygraph"
 638                     data-title="US - Atlanta, traffic we receive per service"
 639                     data-width="100%"
 640                     data-height="100%"
 641                     data-after="-300"
 642                     ></div>
 643
 644             </div>
 645
 646             <div class="myfullchart">
 647                 <div data-netdata="tc.world_in"
 648                     data-host="//sanfrancisco.netdata.rocks"
 649                     data-chart-library="dygraph"
 650                     data-title="US - California, traffic we receive per service"
 651                     data-width="100%"
 652                     data-height="100%"
 653                     data-after="-300"
 654                     ></div>
 655             </div>
 656
 657             <div class="myfullchart">
 658                 <div data-netdata="tc.world_in"
 659                     data-host="//toronto.netdata.rocks"
 660                     data-chart-library="dygraph"
 661                     data-title="Canada, traffic we receive per service"
 662                     data-width="100%"
 663                     data-height="100%"
 664                     data-after="-300"
 665                     ></div>
 666             </div>
 667         </div>
 668     </div>
 669     <div style="width: 100%; text-align: right; font-size: 1vw;">
 670         <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
 671     </div>
 672
 673     <div class="mytitle">
 674         DDoS protection performance on the demo sites
 675     </div>
 676     <div class="mycontent">
 677         iptables SYNPROXY configured by <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
 678     </div>
 679
 680     <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 681
 682         <div class="mysparkline">
 683             <div class="mysparkline-overchart-label">
 684                 <b>EU - London</b>, TCP SYN packets/s received
 685             </div>
 686             <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
 687             </div>
 688             <div data-netdata="netfilter.synproxy_syn_received"
 689                     data-dimensions="received"
 690                     data-host="//london.my-netdata.io"
 691                     data-chart-library="dygraph"
 692                     data-dygraph-theme="sparkline"
 693                     data-dygraph-type="area"
 694                     data-width="100%"
 695                     data-height="100%"
 696                     data-after="-300"
 697                     data-colors="#558855"
 698                     data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
 699                     ></div>
 700         </div>
 701
 702         <div class="mysparkline">
 703             <div class="mysparkline-overchart-label">
 704                 <b>US - Atlanta</b>, TCP SYN packets/s received
 705             </div>
 706             <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
 707             </div>
 708             <div data-netdata="netfilter.synproxy_syn_received"
 709                     data-dimensions="received"
 710                     data-host="//atlanta.my-netdata.io"
 711                     data-chart-library="dygraph"
 712                     data-dygraph-theme="sparkline"
 713                     data-dygraph-type="area"
 714                     data-width="100%"
 715                     data-height="100%"
 716                     data-after="-300"
 717                     data-colors="#885555"
 718                     data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
 719                     ></div>
 720         </div>
 721
 722         <div class="mysparkline">
 723             <div class="mysparkline-overchart-label">
 724                 <b>US - California</b>, TCP SYN packets/s received
 725             </div>
 726             <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
 727             </div>
 728             <div data-netdata="netfilter.synproxy_syn_received"
 729                     data-dimensions="received"
 730                     data-host="//sanfrancisco.netdata.rocks"
 731                     data-chart-library="dygraph"
 732                     data-dygraph-theme="sparkline"
 733                     data-dygraph-type="area"
 734                     data-width="100%"
 735                     data-height="100%"
 736                     data-after="-300"
 737                     data-colors="#555588"
 738                     data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
 739                     ></div>
 740         </div>
 741
 742         <div class="mysparkline">
 743             <div class="mysparkline-overchart-label">
 744                 <b>Canada</b>, TCP SYN packets/s received
 745             </div>
 746             <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata4" >
 747             </div>
 748             <div data-netdata="netfilter.synproxy_syn_received"
 749                     data-dimensions="received"
 750                     data-host="//toronto.netdata.rocks"
 751                     data-chart-library="dygraph"
 752                     data-dygraph-theme="sparkline"
 753                     data-dygraph-type="area"
 754                     data-width="100%"
 755                     data-height="100%"
 756                     data-after="-300"
 757                     data-colors="#885588"
 758                     data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata4"
 759                     ></div>
 760         </div>
 761     </div>
 762     <div style="width: 100%; text-align: right; font-size: 1vw;">
 763         <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
 764         <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
 765     </div>
 766
 767
 768     <div class="mytitle">
 769         CPU Utilization of the demo sites
 770     </div>
 771
 772     <div style="padding-top: 1vw;">
 773         <div class="myfullchart">
 774             <div data-netdata="system.cpu"
 775                 data-host="//london.my-netdata.io"
 776                 data-chart-library="dygraph"
 777                 data-title="EU - London, CPU Usage"
 778                 data-width="100%"
 779                 data-height="100%"
 780                 data-after="-300"
 781                 data-dygraph-valuerange="[0, 100]"
 782                 ></div>
 783         </div>
 784
 785         <div class="myfullchart">
 786             <div data-netdata="system.cpu"
 787                 data-host="//atlanta.my-netdata.io"
 788                 data-chart-library="dygraph"
 789                 data-title="US - Atlanta, CPU Usage"
 790                 data-width="100%"
 791                 data-height="100%"
 792                 data-after="-300"
 793                 data-dygraph-valuerange="[0, 100]"
 794                 ></div>
 795         </div>
 796
 797         <div class="myfullchart">
 798             <div data-netdata="system.cpu"
 799                 data-host="//sanfrancisco.netdata.rocks"
 800                 data-chart-library="dygraph"
 801                 data-title="US - California, CPU Usage"
 802                 data-width="100%"
 803                 data-height="100%"
 804                 data-after="-300"
 805                 data-dygraph-valuerange="[0, 100]"
 806                 ></div>
 807         </div>
 808
 809         <div class="myfullchart">
 810             <div data-netdata="system.cpu"
 811                 data-host="//toronto.netdata.rocks"
 812                 data-chart-library="dygraph"
 813                 data-title="Canada, CPU Usage"
 814                 data-width="100%"
 815                 data-height="100%"
 816                 data-after="-300"
 817                 data-dygraph-valuerange="[0, 100]"
 818                 ></div>
 819         </div>
 820     </div>
 821     <div style="width: 100%; text-align: right; font-size: 1vw;">
 822         <i class="fa fa-comment" aria-hidden="true"></i> <i>what is using so much CPU?
 823         <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>
 824     </div>
 825
 826     <div class="mytitle">
 827         Netdata performance
 828     </div>
 829     <div class="mycontent">
 830         netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
 831         <br/>
 832         <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.) and SNMP devices.
 833     </div>
 834
 835     <!-- Nav tabs -->
 836     <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 837         <li role="presentation" class="active"><a href="#netdata_cpu" aria-controls="netdata_cpu" role="tab" data-toggle="tab">CPU</a></li>
 838         <li role="presentation"><a href="#netdata_avgtime" aria-controls="netdata_avgtime" role="tab" data-toggle="tab">Average Response Time</a></li>
 839     </ul>
 840
 841     <!-- Tab panes -->
 842     <div class="tab-content">
 843         <div role="tabpanel" class="tab-pane active" id="netdata_cpu">
 844             <div class="mysparkline">
 845                 <div class="mysparkline-overchart-label">
 846                     <b>EU - London</b>, CPU % of a single core
 847                 </div>
 848                 <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
 849                 </div>
 850                 <div data-netdata="apps.cpu"
 851                         data-dimensions="netdata"
 852                         data-host="//london.my-netdata.io"
 853                         data-chart-library="dygraph"
 854                         data-dygraph-theme="sparkline"
 855                         data-dygraph-type="area"
 856                         data-width="100%"
 857                         data-height="100%"
 858                         data-after="-300"
 859                         data-colors="#558855"
 860                         data-show-value-of-netdata-at="users.cpu.netdata1"
 861                         ></div>
 862             </div>
 863
 864             <div class="mysparkline">
 865                 <div class="mysparkline-overchart-label">
 866                     <b>US - Atlanta</b>, CPU % of a single core
 867                 </div>
 868                 <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
 869                 </div>
 870                 <div data-netdata="apps.cpu"
 871                         data-dimensions="netdata"
 872                         data-host="//atlanta.my-netdata.io"
 873                         data-chart-library="dygraph"
 874                         data-dygraph-theme="sparkline"
 875                         data-dygraph-type="area"
 876                         data-width="100%"
 877                         data-height="100%"
 878                         data-after="-300"
 879                         data-colors="#885555"
 880                         data-show-value-of-netdata-at="users.cpu.netdata2"
 881                         ></div>
 882             </div>
 883
 884             <div class="mysparkline">
 885                 <div class="mysparkline-overchart-label">
 886                     <b>US - California</b>, CPU % of a single core
 887                 </div>
 888                 <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
 889                 </div>
 890                 <div data-netdata="apps.cpu"
 891                         data-dimensions="netdata"
 892                         data-host="//sanfrancisco.netdata.rocks"
 893                         data-chart-library="dygraph"
 894                         data-dygraph-theme="sparkline"
 895                         data-dygraph-type="area"
 896                         data-width="100%"
 897                         data-height="100%"
 898                         data-after="-300"
 899                         data-colors="#555588"
 900                         data-show-value-of-netdata-at="users.cpu.netdata3"
 901                         ></div>
 902             </div>
 903
 904             <div class="mysparkline">
 905                 <div class="mysparkline-overchart-label">
 906                     <b>Toronto</b>, CPU % of a single core
 907                 </div>
 908                 <div class="mysparkline-overchart-value" id="users.cpu.netdata4" >
 909                 </div>
 910                 <div data-netdata="apps.cpu"
 911                         data-dimensions="netdata"
 912                         data-host="//toronto.netdata.rocks"
 913                         data-chart-library="dygraph"
 914                         data-dygraph-theme="sparkline"
 915                         data-dygraph-type="area"
 916                         data-width="100%"
 917                         data-height="100%"
 918                         data-after="-300"
 919                         data-colors="#885588"
 920                         data-show-value-of-netdata-at="users.cpu.netdata4"
 921                         ></div>
 922             </div>
 923
 924             <div style="width: 100%; text-align: right; font-size: 1vw;">
 925                 <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>!
 926                 <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.
 927                 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
 928             </div>
 929         </div>
 930
 931         <div role="tabpanel" class="tab-pane" id="netdata_avgtime">
 932             <div class="mysparkline">
 933                 <div class="mysparkline-overchart-label">
 934                     <b>EU - London</b>, API average response time in milliseconds
 935                 </div>
 936                 <div class="mysparkline-overchart-value" id="netdata.response_time1" >
 937                 </div>
 938                 <div data-netdata="netdata.response_time"
 939                         data-host="//london.my-netdata.io"
 940                         data-chart-library="dygraph"
 941                         data-dygraph-theme="sparkline"
 942                         data-dygraph-type="area"
 943                         data-width="100%"
 944                         data-height="100%"
 945                         data-after="-300"
 946                         data-colors="#558855 #356835"
 947                         data-show-value-of-average-at="netdata.response_time1"
 948                         ></div>
 949             </div>
 950
 951             <div class="mysparkline">
 952                 <div class="mysparkline-overchart-label">
 953                     <b>US - Atlanta</b>, API average response time in milliseconds
 954                 </div>
 955                 <div class="mysparkline-overchart-value" id="netdata.response_time2" >
 956                 </div>
 957                 <div data-netdata="netdata.response_time"
 958                         data-host="//atlanta.my-netdata.io"
 959                         data-chart-library="dygraph"
 960                         data-dygraph-theme="sparkline"
 961                         data-dygraph-type="area"
 962                         data-width="100%"
 963                         data-height="100%"
 964                         data-after="-300"
 965                         data-colors="#885555 #683535"
 966                         data-show-value-of-average-at="netdata.response_time2"
 967                         ></div>
 968             </div>
 969
 970             <div class="mysparkline">
 971                 <div class="mysparkline-overchart-label">
 972                     <b>US - California</b>, API average response time in milliseconds
 973                 </div>
 974                 <div class="mysparkline-overchart-value" id="netdata.response_time3" >
 975                 </div>
 976                 <div data-netdata="netdata.response_time"
 977                         data-host="//sanfrancisco.netdata.rocks"
 978                         data-chart-library="dygraph"
 979                         data-dygraph-theme="sparkline"
 980                         data-dygraph-type="area"
 981                         data-width="100%"
 982                         data-height="100%"
 983                         data-after="-300"
 984                         data-colors="#555588 #353568"
 985                         data-show-value-of-average-at="netdata.response_time3"
 986                         ></div>
 987             </div>
 988
 989             <div class="mysparkline">
 990                 <div class="mysparkline-overchart-label">
 991                     <b>Canada</b>, API average response time in milliseconds
 992                 </div>
 993                 <div class="mysparkline-overchart-value" id="netdata.response_time4" >
 994                 </div>
 995                 <div data-netdata="netdata.response_time"
 996                         data-host="//toronto.netdata.rocks"
 997                         data-chart-library="dygraph"
 998                         data-dygraph-theme="sparkline"
 999                         data-dygraph-type="area"
1000                         data-width="100%"
1001                         data-height="100%"
1002                         data-after="-300"
1003                         data-colors="#885588 #683568"
1004                         data-show-value-of-average-at="netdata.response_time4"
1005                         ></div>
1006             </div>
1007
1008             <div style="width: 100%; text-align: right; font-size: 1vw;">
1009                 <i class="fa fa-comment" aria-hidden="true"></i> <i>netdata is really <b>fast</b> (the values are milliseconds!)
1010                 <br/>
1011                 These values include everything, from the reception of the first byte to the dispatch of the last, including gzip compression.
1012                 <br/>
1013                 Values above 2-3ms are usually chart refreshes of charts with several dimensions, charts with very long durations (zoomed out), or file transfers.
1014                 </i>
1015             </div>
1016         </div>
1017     </div>
1018
1019     <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
1020         want to know more?
1021         <br/>
1022         jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>
1023         <br/>
1024         it needs just 3 mins to be installed on your servers!
1025         <br/>
1026         &nbsp;
1027     </div>
1028 </div>
1029 </body>
1030 <script>
1031     // google analytics when this is used for the home page of the demo sites
1032     // you don't need this if you customize this dashboard for your needs
1033     setTimeout(function() {
1034         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
1035         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
1036         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
1037         })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
1038
1039         ga('create', 'UA-64295674-3', 'auto');
1040         ga('send', 'pageview');
1041     }, 2000);
1042 </script>
1043 </html>