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