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?v41"></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.requests.netdata" >
 397                                 </div>
 398                                 <div data-netdata="nginx.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.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.requests.netdata2" >
 417                                 </div>
 418                                 <div data-netdata="nginx.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.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.requests.netdata3" >
 437                                 </div>
 438                                 <div data-netdata="nginx.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.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.requests.netdata4" >
 457                                 </div>
 458                                 <div data-netdata="nginx.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.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.connections.netdata1" >
 479                                 </div>
 480                                 <div data-netdata="nginx.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.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.connections.netdata2" >
 499                                 </div>
 500                                 <div data-netdata="nginx.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.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.connections.netdata3" >
 519                                 </div>
 520                                 <div data-netdata="nginx.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.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.connections.netdata4" >
 539                                 </div>
 540                                 <div data-netdata="nginx.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.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>