web/demosites.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>NetData Multi-Server Dashboard</title>
   5
   6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   7         <meta charset="utf-8">
   8         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   9         <meta name="viewport" content="width=device-width, initial-scale=1">
  10         <meta name="apple-mobile-web-app-capable" content="yes">
  11         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  12
  13         <script>
  14         // --- OPTIONS FOR THE DASHBOARD --
  15
  16         // this section has to appear before loading dashboard.js
  17
  18         // Select a theme.
  19         // uncomment on of the two themes:
  20
  21         // var netdataTheme = 'default'; // this is white
  22         var netdataTheme = 'slate'; // this is dark
  23
  24
  25         // Set the default netdata server.
  26         // on charts without a 'data-host', this one will be used.
  27         // the default is the server that dashboard.js is downloaded from.
  28
  29         // var netdataServer = 'http://my.server:19999/';
  30         </script>
  31
  32         <!--
  33                 --- LOAD dashboard.js ---
  34
  35                 to host this HTML file on your web server,
  36                 you have to load dashboard.js from the netdata server.
  37
  38                 So, pick one the two below
  39                 If you pick the first, set the server name/IP.
  40
  41                 The second assumes you host this file on /usr/share/netdata/web
  42                 and that you have chown it to be owned by netdata:netdata
  43         -->
  44         <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
  45         <script type="text/javascript" src="dashboard.js"></script>
  46
  47         <script>
  48         // --- OPTIONS FOR THE CHARTS --
  49
  50         // destroy charts not shown (lowers memory on the browsers)
  51         // set this to 'yes' to destroy, 'false' to hide the charts
  52         NETDATA.options.current.destroy_on_hide = false;
  53
  54         // set this to false, to always show all dimensions
  55         NETDATA.options.current.eliminate_zero_dimensions = true;
  56
  57         // set this to false, to lower the pressure on the browser
  58         NETDATA.options.current.concurrent_refreshes = true;
  59
  60         // if you need to support slow mobile phones, set this to false
  61         NETDATA.options.current.parallel_refresher = true;
  62
  63         // set this to false, to always update the charts, even if focus is lost
  64         NETDATA.options.current.stop_updates_when_focus_is_lost = true;
  65         </script>
  66
  67         <style>
  68
  69 body {
  70         font-size: 1vw;
  71 }
  72
  73 .mysparkline {
  74         position: relative;
  75         display: inline-block;
  76         min-height: 50px;
  77         width: 100%;
  78         height: 8vw;
  79         text-align: left;
  80 }
  81
  82 .mysparkline-overchart-label {
  83         position: absolute;
  84         display: block;
  85         top: 0;
  86         left: 10px;
  87         bottom: 0;
  88         right: 0;
  89         font-size: 1vw;
  90         z-index: 1;
  91 }
  92
  93 .mysparkline-overchart-value {
  94         position: absolute;
  95         display: block;
  96         top: 1.1vw;
  97         left: 10px;
  98         bottom: 0;
  99         right: 0;
 100         font-size: 5vw;
 101         z-index: 2;
 102         text-shadow: #333 0px 0px 2px;
 103 }
 104
 105 .myfullchart {
 106         position: relative;
 107         display: inline-block;
 108         width: 100%;
 109         height: 15vw;
 110         min-height: 150px;
 111         text-align: left;
 112 }
 113
 114 .mygauge-combo {
 115         display: inline-block;
 116 }
 117
 118 .mygauge {
 119         position: relative;
 120         display: block;
 121         width: 20vw;
 122         height: 12vw;
 123 }
 124
 125 .mygauge-button {
 126         display: block;
 127 }
 128
 129 .mytitle {
 130         padding-top: 6vw;
 131         padding-bottom: 1vw;
 132         text-align: center;
 133         font-size: 2.4vw;
 134 }
 135
 136 .mysubtitle {
 137         padding-top: 2vw;
 138         padding-bottom: 1vw;
 139         text-align: center;
 140         font-size: 1.8vw;
 141 }
 142
 143 .mycontent {
 144         text-align: center;
 145         font-size: 1.5vw;
 146 }
 147
 148         </style>
 149
 150 </head>
 151 <body style="text-align: center;">
 152
 153 <div class="container">
 154
 155         <div style="text-align: center; font-size: 13vw; height: 14vw;">
 156                 <b>netdata</b>
 157         </div>
 158         <div style="text-align: center; font-size: 2vw; height: 2.5vw;">
 159                 real-time performance monitoring
 160         </div>
 161         <div style="width:80%; text-align: right; font-size: 2.7vw;">
 162                 <strong>scaled out</strong>!
 163         </div>
 164         <div class="mytitle">
 165                 pick a <b>netdata</b> demo server
 166         </div>
 167         <div class="mycontent">
 168                 these demo servers is what you will get by installing <b>netdata</b>
 169         </div>
 170
 171         <div style="width: 100%; text-align: center; padding-top: 2vw;">
 172                 <div style="width: 100%; text-align: center;">
 173
 174                         <div class="mygauge-combo">
 175                                 <div class="mygauge">
 176                                         <div data-netdata="netdata.requests"
 177                                                         data-host="//netdata1.firehol.org"
 178                                                         data-title="EU - London"
 179                                                         data-chart-library="gauge"
 180                                                         data-width="100%"
 181                                                         data-after="-300"
 182                                                         data-points="300"
 183                                                         data-colors="#558855"
 184                                                         ></div>
 185                                 </div>
 186                                 <div class="mygauge-button">
 187                                         <br/>&nbsp;<br/>
 188                                         <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata1.firehol.org/default.html'" style="font-size: 1.5vw;">Enter London!</button>
 189                                         <div style="font-size: 1vw;">
 190                                                 Donated by DigitalOcean.com
 191                                         </div>
 192                                 </div>
 193                         </div>
 194                         <div class="mygauge-combo">
 195                                 <div class="mygauge">
 196                                         <div data-netdata="netdata.requests"
 197                                                         data-host="//netdata2.firehol.org"
 198                                                         data-title="US - Atlanta"
 199                                                         data-chart-library="gauge"
 200                                                         data-width="100%"
 201                                                         data-after="-300"
 202                                                         data-points="300"
 203                                                         data-colors="#AA5555"
 204                                                         ></div>
 205                                 </div>
 206                                 <div class="mygauge-button">
 207                                         <br/>&nbsp;<br/>
 208                                         <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata2.firehol.org/default.html'" style="font-size: 1.5vw;">Enter Atlanta!</button>
 209                                         <div style="font-size: 1vw;">
 210                                                 Donated by CDN77.com
 211                                         </div>
 212                                 </div>
 213                         </div>
 214                         <div class="mygauge-combo">
 215                                 <div class="mygauge">
 216                                         <div data-netdata="netdata.requests"
 217                                                         data-host="//netdata3.firehol.org"
 218                                                         data-title="EU - Greece"
 219                                                         data-chart-library="gauge"
 220                                                         data-width="100%"
 221                                                         data-after="-300"
 222                                                         data-points="300"
 223                                                         data-colors="#5555AA"
 224                                                         ></div>
 225                                 </div>
 226                                 <div class="mygauge-button">
 227                                         <br/>&nbsp;<br/>
 228                                         <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata3.firehol.org/default.html'" style="font-size: 1.5vw;">Come to Greece!</button>
 229                                         <div style="font-size: 0.8vw;">
 230                                                 &nbsp;
 231                                         </div>
 232                                 </div>
 233                         </div>
 234                 </div>
 235         </div>
 236
 237         <div class="mytitle">
 238                 this page is a custom <b>netdata</b> dashboard
 239         </div>
 240         <div class="mycontent">
 241                 charts are coming from 3 servers, in parallel
 242                 <br/>
 243                 the servers are not aware of this multi-server dashboard,
 244                 <br/>
 245                 each server is not aware of the other 2 servers,
 246                 <br/>
 247                 but on this dashboard <b>they are one</b>!
 248         </div>
 249         <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
 250                 <i class="fa fa-comment" aria-hidden="true"></i>
 251                 hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
 252                 <br/>
 253                 double click on a chart to reset them all
 254         </div>
 255
 256         <div class="mytitle">
 257                 our <code>ngnix</code> performance
 258         </div>
 259         <div class="mycontent">
 260                 (we proxy netdata through nginx, on the demo sites)
 261         </div>
 262
 263         <!-- Nav tabs -->
 264         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 265                 <li role="presentation" class="active"><a href="#nginx_requests" aria-controls="nginx_requests" role="tab" data-toggle="tab">Requests</a></li>
 266                 <li role="presentation"><a href="#nginx_connections" aria-controls="nginx_connections" role="tab" data-toggle="tab">Connections</a></li>
 267         </ul>
 268
 269         <!-- Tab panes -->
 270         <div class="tab-content">
 271                 <div role="tabpanel" class="tab-pane active" id="nginx_requests">
 272                         <div class="mysparkline">
 273                                 <div class="mysparkline-overchart-label">
 274                                         <b>EU - London</b> web requests/s
 275                                 </div>
 276                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
 277                                 </div>
 278                                 <div data-netdata="nginx.requests"
 279                                                 data-dimensions="requests"
 280                                                 data-host="//netdata1.firehol.org"
 281                                                 data-chart-library="dygraph"
 282                                                 data-dygraph-theme="sparkline"
 283                                                 data-dygraph-type="area"
 284                                                 data-width="100%"
 285                                                 data-height="100%"
 286                                                 data-after="-300"
 287                                                 data-colors="#558855"
 288                                                 data-show-value-of-requests-at="nginx.requests.netdata"
 289                                                 ></div>
 290                         </div>
 291
 292                         <div class="mysparkline">
 293                                 <div class="mysparkline-overchart-label">
 294                                         <b>US - Atlanta</b> web requests/s
 295                                 </div>
 296                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
 297                                 </div>
 298                                 <div data-netdata="nginx.requests"
 299                                                 data-dimensions="requests"
 300                                                 data-host="//netdata2.firehol.org"
 301                                                 data-chart-library="dygraph"
 302                                                 data-dygraph-theme="sparkline"
 303                                                 data-dygraph-type="area"
 304                                                 data-width="100%"
 305                                                 data-height="100%"
 306                                                 data-after="-300"
 307                                                 data-colors="#AA5555"
 308                                                 data-show-value-of-requests-at="nginx.requests.netdata2"
 309                                                 ></div>
 310                         </div>
 311
 312                         <div class="mysparkline">
 313                                 <div class="mysparkline-overchart-label">
 314                                         <b>EU - Greece</b> web requests/s
 315                                 </div>
 316                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
 317                                 </div>
 318                                 <div data-netdata="nginx.requests"
 319                                                 data-dimensions="requests"
 320                                                 data-host="//netdata3.firehol.org"
 321                                                 data-chart-library="dygraph"
 322                                                 data-dygraph-theme="sparkline"
 323                                                 data-dygraph-type="area"
 324                                                 data-width="100%"
 325                                                 data-height="100%"
 326                                                 data-after="-300"
 327                                                 data-colors="#5555AA"
 328                                                 data-show-value-of-requests-at="nginx.requests.netdata3"
 329                                                 ></div>
 330                         </div>
 331                 </div>
 332
 333                 <div role="tabpanel" class="tab-pane" id="nginx_connections">
 334                         <div class="mysparkline">
 335                                 <div class="mysparkline-overchart-label">
 336                                         <b>EU - London</b> active connections
 337                                 </div>
 338                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
 339                                 </div>
 340                                 <div data-netdata="nginx.connections"
 341                                                 data-dimensions="active"
 342                                                 data-host="//netdata1.firehol.org"
 343                                                 data-chart-library="dygraph"
 344                                                 data-dygraph-theme="sparkline"
 345                                                 data-dygraph-type="area"
 346                                                 data-width="100%"
 347                                                 data-height="100%"
 348                                                 data-after="-300"
 349                                                 data-colors="#558855"
 350                                                 data-show-value-of-active-at="nginx.connections.netdata1"
 351                                                 ></div>
 352                         </div>
 353
 354                         <div class="mysparkline">
 355                                 <div class="mysparkline-overchart-label">
 356                                         <b>US - Atlanta</b> active connections
 357                                 </div>
 358                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
 359                                 </div>
 360                                 <div data-netdata="nginx.connections"
 361                                                 data-dimensions="active"
 362                                                 data-host="//netdata2.firehol.org"
 363                                                 data-chart-library="dygraph"
 364                                                 data-dygraph-theme="sparkline"
 365                                                 data-dygraph-type="area"
 366                                                 data-width="100%"
 367                                                 data-height="100%"
 368                                                 data-after="-300"
 369                                                 data-colors="#AA5555"
 370                                                 data-show-value-of-active-at="nginx.connections.netdata2"
 371                                                 ></div>
 372                         </div>
 373
 374                         <div class="mysparkline">
 375                                 <div class="mysparkline-overchart-label">
 376                                         <b>EU - Greece</b> active connections
 377                                 </div>
 378                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
 379                                 </div>
 380                                 <div data-netdata="nginx.connections"
 381                                                 data-dimensions="active"
 382                                                 data-host="//netdata3.firehol.org"
 383                                                 data-chart-library="dygraph"
 384                                                 data-dygraph-theme="sparkline"
 385                                                 data-dygraph-type="area"
 386                                                 data-width="100%"
 387                                                 data-height="100%"
 388                                                 data-after="-300"
 389                                                 data-colors="#5555AA"
 390                                                 data-show-value-of-active-at="nginx.connections.netdata3"
 391                                                 ></div>
 392                         </div>
 393                 </div>
 394         </div>
 395
 396         <div style="width: 100%; text-align: right; font-size: 1vw;">
 397                 <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
 398         </div>
 399
 400
 401         <div class="mytitle">
 402                 bandwidth consumption on the demo sites
 403         </div>
 404         <div class="mycontent">
 405                 Linux QoS is configured by <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>
 406         </div>
 407
 408         <!-- Nav tabs -->
 409         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 410                 <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
 411                 <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
 412         </ul>
 413
 414         <!-- Tab panes -->
 415         <div class="tab-content">
 416                 <div role="tabpanel" class="tab-pane active" id="outbout">
 417                         <div class="myfullchart">
 418                                 <div data-netdata="tc.world_out"
 419                                         data-host="//netdata1.firehol.org"
 420                                         data-chart-library="dygraph"
 421                                         data-title="EU - London, traffic we send per service"
 422                                         data-width="100%"
 423                                         data-height="100%"
 424                                         data-after="-300"
 425                                         ></div>
 426                         </div>
 427
 428                         <div class="myfullchart">
 429                                 <div data-netdata="tc.world_out"
 430                                         data-host="//netdata2.firehol.org"
 431                                         data-chart-library="dygraph"
 432                                         data-title="US - Atlanta, traffic we send per service"
 433                                         data-width="100%"
 434                                         data-height="100%"
 435                                         data-after="-300"
 436                                         ></div>
 437
 438                         </div>
 439
 440                         <div class="myfullchart">
 441                                 <div data-netdata="tc.world_out"
 442                                         data-host="//netdata3.firehol.org"
 443                                         data-chart-library="dygraph"
 444                                         data-title="EU - Greece, traffic we send per service"
 445                                         data-width="100%"
 446                                         data-height="100%"
 447                                         data-after="-300"
 448                                         ></div>
 449                         </div>
 450                 </div>
 451                 <div role="tabpanel" class="tab-pane" id="inbound">
 452                         <div class="myfullchart">
 453                                 <div data-netdata="tc.world_in"
 454                                         data-host="//netdata1.firehol.org"
 455                                         data-chart-library="dygraph"
 456                                         data-title="EU - London, traffic we receive per service"
 457                                         data-width="100%"
 458                                         data-height="100%"
 459                                         data-after="-300"
 460                                         ></div>
 461
 462                         </div>
 463
 464                         <div class="myfullchart">
 465                                 <div data-netdata="tc.world_in"
 466                                         data-host="//netdata2.firehol.org"
 467                                         data-chart-library="dygraph"
 468                                         data-title="US - Atlanta, traffic we receive per service"
 469                                         data-width="100%"
 470                                         data-height="100%"
 471                                         data-after="-300"
 472                                         ></div>
 473
 474                         </div>
 475
 476                         <div class="myfullchart">
 477                                 <div data-netdata="tc.world_in"
 478                                         data-host="//netdata3.firehol.org"
 479                                         data-chart-library="dygraph"
 480                                         data-title="EU - Greece, traffic we receive per service"
 481                                         data-width="100%"
 482                                         data-height="100%"
 483                                         data-after="-300"
 484                                         ></div>
 485                         </div>
 486                 </div>
 487         </div>
 488         <div style="width: 100%; text-align: right; font-size: 1vw;">
 489                 <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
 490         </div>
 491
 492         <div class="mytitle">
 493                 DDoS protection performance on the demo sites
 494         </div>
 495         <div class="mycontent">
 496                 iptables SYNPROXY configured by <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
 497         </div>
 498
 499         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 500
 501                 <div class="mysparkline">
 502                         <div class="mysparkline-overchart-label">
 503                                 <b>EU - London</b>, TCP SYN packets/s received
 504                         </div>
 505                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
 506                         </div>
 507                         <div data-netdata="netfilter.synproxy_syn_received"
 508                                         data-dimensions="received"
 509                                         data-host="//netdata1.firehol.org"
 510                                         data-chart-library="dygraph"
 511                                         data-dygraph-theme="sparkline"
 512                                         data-dygraph-type="area"
 513                                         data-width="100%"
 514                                         data-height="100%"
 515                                         data-after="-300"
 516                                         data-colors="#558855"
 517                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
 518                                         ></div>
 519                 </div>
 520
 521                 <div class="mysparkline">
 522                         <div class="mysparkline-overchart-label">
 523                                 <b>US - Atlanta</b>, TCP SYN packets/s received
 524                         </div>
 525                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
 526                         </div>
 527                         <div data-netdata="netfilter.synproxy_syn_received"
 528                                         data-dimensions="received"
 529                                         data-host="//netdata2.firehol.org"
 530                                         data-chart-library="dygraph"
 531                                         data-dygraph-theme="sparkline"
 532                                         data-dygraph-type="area"
 533                                         data-width="100%"
 534                                         data-height="100%"
 535                                         data-after="-300"
 536                                         data-colors="#885555"
 537                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
 538                                         ></div>
 539                 </div>
 540
 541                 <div class="mysparkline">
 542                         <div class="mysparkline-overchart-label">
 543                                 <b>EU - Greece</b>, TCP SYN packets/s received
 544                         </div>
 545                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
 546                         </div>
 547                         <div data-netdata="netfilter.synproxy_syn_received"
 548                                         data-dimensions="received"
 549                                         data-host="//netdata3.firehol.org"
 550                                         data-chart-library="dygraph"
 551                                         data-dygraph-theme="sparkline"
 552                                         data-dygraph-type="area"
 553                                         data-width="100%"
 554                                         data-height="100%"
 555                                         data-after="-300"
 556                                         data-colors="#555588"
 557                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
 558                                         ></div>
 559                 </div>
 560         </div>
 561         <div style="width: 100%; text-align: right; font-size: 1vw;">
 562                 <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
 563                 <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
 564         </div>
 565
 566
 567         <div class="mytitle">
 568                 CPU Utilization of the demo sites
 569         </div>
 570
 571         <div style="padding-top: 1vw;">
 572                 <div class="myfullchart">
 573                         <div data-netdata="system.cpu"
 574                                 data-host="//netdata1.firehol.org"
 575                                 data-chart-library="dygraph"
 576                                 data-title="EU - London, CPU Usage"
 577                                 data-width="100%"
 578                                 data-height="100%"
 579                                 data-after="-300"
 580                                 ></div>
 581                 </div>
 582
 583                 <div class="myfullchart">
 584                         <div data-netdata="system.cpu"
 585                                 data-host="//netdata2.firehol.org"
 586                                 data-chart-library="dygraph"
 587                                 data-title="US - Atlanta, CPU Usage"
 588                                 data-width="100%"
 589                                 data-height="100%"
 590                                 data-after="-300"
 591                                 ></div>
 592                 </div>
 593
 594                 <div class="myfullchart">
 595                         <div data-netdata="system.cpu"
 596                                 data-host="//netdata3.firehol.org"
 597                                 data-chart-library="dygraph"
 598                                 data-title="EU - Greece, CPU Usage"
 599                                 data-width="100%"
 600                                 data-height="100%"
 601                                 data-after="-300"
 602                                 ></div>
 603                 </div>
 604         </div>
 605         <div style="width: 100%; text-align: right; font-size: 1vw;">
 606                 <i class="fa fa-comment" aria-hidden="true"></i> <i>what is using so much CPU?
 607                 <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>
 608         </div>
 609
 610         <div class="mytitle">
 611                 CPU Usage of the netdata user
 612         </div>
 613         <div class="mycontent">
 614                 netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
 615                 <br/>
 616                 and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
 617         </div>
 618
 619         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 620
 621                 <div class="mysparkline">
 622                         <div class="mysparkline-overchart-label">
 623                                 <b>EU - London</b>, CPU % of a single core
 624                         </div>
 625                         <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
 626                         </div>
 627                         <div data-netdata="users.cpu"
 628                                         data-dimensions="netdata"
 629                                         data-host="//netdata1.firehol.org"
 630                                         data-chart-library="dygraph"
 631                                         data-dygraph-theme="sparkline"
 632                                         data-dygraph-type="area"
 633                                         data-width="100%"
 634                                         data-height="100%"
 635                                         data-after="-300"
 636                                         data-colors="#558855"
 637                                         data-show-value-of-netdata-at="users.cpu.netdata1"
 638                                         ></div>
 639                 </div>
 640
 641                 <div class="mysparkline">
 642                         <div class="mysparkline-overchart-label">
 643                                 <b>US - Atlanta</b>, CPU % of a single core
 644                         </div>
 645                         <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
 646                         </div>
 647                         <div data-netdata="users.cpu"
 648                                         data-dimensions="netdata"
 649                                         data-host="//netdata2.firehol.org"
 650                                         data-chart-library="dygraph"
 651                                         data-dygraph-theme="sparkline"
 652                                         data-dygraph-type="area"
 653                                         data-width="100%"
 654                                         data-height="100%"
 655                                         data-after="-300"
 656                                         data-colors="#885555"
 657                                         data-show-value-of-netdata-at="users.cpu.netdata2"
 658                                         ></div>
 659                 </div>
 660
 661                 <div class="mysparkline">
 662                         <div class="mysparkline-overchart-label">
 663                                 <b>EU - Greece</b>, CPU % of a single core
 664                         </div>
 665                         <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
 666                         </div>
 667                         <div data-netdata="users.cpu"
 668                                         data-dimensions="netdata"
 669                                         data-host="//netdata3.firehol.org"
 670                                         data-chart-library="dygraph"
 671                                         data-dygraph-theme="sparkline"
 672                                         data-dygraph-type="area"
 673                                         data-width="100%"
 674                                         data-height="100%"
 675                                         data-after="-300"
 676                                         data-colors="#555588"
 677                                         data-show-value-of-netdata-at="users.cpu.netdata3"
 678                                         ></div>
 679                 </div>
 680         </div>
 681         <div style="width: 100%; text-align: right; font-size: 1vw;">
 682                 <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>!
 683                 <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.
 684                 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
 685         </div>
 686
 687         <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
 688                 want to know more?
 689                 <br/>
 690                 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>!
 691                 <br/>
 692                 <b>netdata</b> monitors 1.000 - 5.000 metrics out of the box
 693                 <br/>
 694                 and it needs just 3 mins to be installed!
 695                 <br/>
 696                 &nbsp;
 697         </div>
 698 </div>
 699 </body>
 700 </html>