web/demosites.html

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