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