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                 welcome to <b>netdata</b>
 166         </div>
 167         <div class="mysubtitle">
 168                 pick a demo server, to view its dashboard
 169         </div>
 170         <div class="mycontent">
 171                 these dashboards is what you will get by installing <b>netdata</b>
 172         </div>
 173
 174         <div style="width: 100%; text-align: center; padding-top: 2vw;">
 175                 <div style="width: 100%; text-align: center;">
 176
 177                         <div class="mygauge-combo">
 178                                 <div class="mygauge">
 179                                         <div data-netdata="netdata.requests"
 180                                                         data-host="//netdata1.firehol.org"
 181                                                         data-title="EU - London"
 182                                                         data-chart-library="gauge"
 183                                                         data-width="100%"
 184                                                         data-after="-300"
 185                                                         data-points="300"
 186                                                         data-colors="#558855"
 187                                                         ></div>
 188                                 </div>
 189                                 <div class="mygauge-button">
 190                                         <br/>&nbsp;<br/>
 191                                         <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata1.firehol.org'" style="font-size: 1.5vw;">Enter London!</button>
 192                                         <div style="font-size: 1vw;">
 193                                                 Donated by DigitalOcean.com
 194                                         </div>
 195                                 </div>
 196                         </div>
 197                         <div class="mygauge-combo">
 198                                 <div class="mygauge">
 199                                         <div data-netdata="netdata.requests"
 200                                                         data-host="//netdata2.firehol.org"
 201                                                         data-title="US - Atlanta"
 202                                                         data-chart-library="gauge"
 203                                                         data-width="100%"
 204                                                         data-after="-300"
 205                                                         data-points="300"
 206                                                         data-colors="#AA5555"
 207                                                         ></div>
 208                                 </div>
 209                                 <div class="mygauge-button">
 210                                         <br/>&nbsp;<br/>
 211                                         <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata2.firehol.org'" style="font-size: 1.5vw;">Enter Atlanta!</button>
 212                                         <div style="font-size: 1vw;">
 213                                                 Donated by CDN77.com
 214                                         </div>
 215                                 </div>
 216                         </div>
 217                         <div class="mygauge-combo">
 218                                 <div class="mygauge">
 219                                         <div data-netdata="netdata.requests"
 220                                                         data-host="//netdata3.firehol.org"
 221                                                         data-title="EU - Greece"
 222                                                         data-chart-library="gauge"
 223                                                         data-width="100%"
 224                                                         data-after="-300"
 225                                                         data-points="300"
 226                                                         data-colors="#5555AA"
 227                                                         ></div>
 228                                 </div>
 229                                 <div class="mygauge-button">
 230                                         <br/>&nbsp;<br/>
 231                                         <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//netdata3.firehol.org'" style="font-size: 1.5vw;">Come to Greece!</button>
 232                                         <div style="font-size: 0.8vw;">
 233                                                 &nbsp;
 234                                         </div>
 235                                 </div>
 236                         </div>
 237                 </div>
 238         </div>
 239
 240         <div class="mytitle">
 241                 this page is a custom <b>netdata</b> dashboard
 242         </div>
 243         <div class="mycontent">
 244                 charts are coming from 3 servers, in parallel
 245                 <br/>
 246                 the servers are not aware of this multi-server dashboard,
 247                 <br/>
 248                 each server is not aware of the other 2 servers,
 249                 <br/>
 250                 but on this dashboard <b>they are one</b>!
 251         </div>
 252         <div style="padding-top: 1vw; width: 100%; text-align: center; font-size: 1.5vw;">
 253                 <i class="fa fa-comment" aria-hidden="true"></i>
 254                 hover on a chart below, or drag it to show the past - <b>the others will follow</b>!
 255                 <br/>
 256                 double click on a chart to reset them all
 257         </div>
 258
 259         <div class="mytitle">
 260                 our <code>ngnix</code> performance
 261         </div>
 262         <div class="mycontent">
 263                 (we proxy netdata through nginx, on the demo sites)
 264         </div>
 265
 266         <!-- Nav tabs -->
 267         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 268                 <li role="presentation" class="active"><a href="#nginx_requests" aria-controls="nginx_requests" role="tab" data-toggle="tab">Requests</a></li>
 269                 <li role="presentation"><a href="#nginx_connections" aria-controls="nginx_connections" role="tab" data-toggle="tab">Connections</a></li>
 270         </ul>
 271
 272         <!-- Tab panes -->
 273         <div class="tab-content">
 274                 <div role="tabpanel" class="tab-pane active" id="nginx_requests">
 275                         <div class="mysparkline">
 276                                 <div class="mysparkline-overchart-label">
 277                                         <b>EU - London</b> web requests/s
 278                                 </div>
 279                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata" >
 280                                 </div>
 281                                 <div data-netdata="nginx.requests"
 282                                                 data-dimensions="requests"
 283                                                 data-host="//netdata1.firehol.org"
 284                                                 data-chart-library="dygraph"
 285                                                 data-dygraph-theme="sparkline"
 286                                                 data-dygraph-type="area"
 287                                                 data-width="100%"
 288                                                 data-height="100%"
 289                                                 data-after="-300"
 290                                                 data-colors="#558855"
 291                                                 data-show-value-of-requests-at="nginx.requests.netdata"
 292                                                 ></div>
 293                         </div>
 294
 295                         <div class="mysparkline">
 296                                 <div class="mysparkline-overchart-label">
 297                                         <b>US - Atlanta</b> web requests/s
 298                                 </div>
 299                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata2" >
 300                                 </div>
 301                                 <div data-netdata="nginx.requests"
 302                                                 data-dimensions="requests"
 303                                                 data-host="//netdata2.firehol.org"
 304                                                 data-chart-library="dygraph"
 305                                                 data-dygraph-theme="sparkline"
 306                                                 data-dygraph-type="area"
 307                                                 data-width="100%"
 308                                                 data-height="100%"
 309                                                 data-after="-300"
 310                                                 data-colors="#AA5555"
 311                                                 data-show-value-of-requests-at="nginx.requests.netdata2"
 312                                                 ></div>
 313                         </div>
 314
 315                         <div class="mysparkline">
 316                                 <div class="mysparkline-overchart-label">
 317                                         <b>EU - Greece</b> web requests/s
 318                                 </div>
 319                                 <div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
 320                                 </div>
 321                                 <div data-netdata="nginx.requests"
 322                                                 data-dimensions="requests"
 323                                                 data-host="//netdata3.firehol.org"
 324                                                 data-chart-library="dygraph"
 325                                                 data-dygraph-theme="sparkline"
 326                                                 data-dygraph-type="area"
 327                                                 data-width="100%"
 328                                                 data-height="100%"
 329                                                 data-after="-300"
 330                                                 data-colors="#5555AA"
 331                                                 data-show-value-of-requests-at="nginx.requests.netdata3"
 332                                                 ></div>
 333                         </div>
 334                 </div>
 335
 336                 <div role="tabpanel" class="tab-pane" id="nginx_connections">
 337                         <div class="mysparkline">
 338                                 <div class="mysparkline-overchart-label">
 339                                         <b>EU - London</b> web requests/s
 340                                 </div>
 341                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata1" >
 342                                 </div>
 343                                 <div data-netdata="nginx.connections"
 344                                                 data-dimensions="active"
 345                                                 data-host="//netdata1.firehol.org"
 346                                                 data-chart-library="dygraph"
 347                                                 data-dygraph-theme="sparkline"
 348                                                 data-dygraph-type="area"
 349                                                 data-width="100%"
 350                                                 data-height="100%"
 351                                                 data-after="-300"
 352                                                 data-colors="#558855"
 353                                                 data-show-value-of-active-at="nginx.connections.netdata1"
 354                                                 ></div>
 355                         </div>
 356
 357                         <div class="mysparkline">
 358                                 <div class="mysparkline-overchart-label">
 359                                         <b>US - Atlanta</b> web requests/s
 360                                 </div>
 361                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata2" >
 362                                 </div>
 363                                 <div data-netdata="nginx.connections"
 364                                                 data-dimensions="active"
 365                                                 data-host="//netdata2.firehol.org"
 366                                                 data-chart-library="dygraph"
 367                                                 data-dygraph-theme="sparkline"
 368                                                 data-dygraph-type="area"
 369                                                 data-width="100%"
 370                                                 data-height="100%"
 371                                                 data-after="-300"
 372                                                 data-colors="#AA5555"
 373                                                 data-show-value-of-active-at="nginx.connections.netdata2"
 374                                                 ></div>
 375                         </div>
 376
 377                         <div class="mysparkline">
 378                                 <div class="mysparkline-overchart-label">
 379                                         <b>EU - Greece</b> web requests/s
 380                                 </div>
 381                                 <div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
 382                                 </div>
 383                                 <div data-netdata="nginx.connections"
 384                                                 data-dimensions="active"
 385                                                 data-host="//netdata3.firehol.org"
 386                                                 data-chart-library="dygraph"
 387                                                 data-dygraph-theme="sparkline"
 388                                                 data-dygraph-type="area"
 389                                                 data-width="100%"
 390                                                 data-height="100%"
 391                                                 data-after="-300"
 392                                                 data-colors="#5555AA"
 393                                                 data-show-value-of-active-at="nginx.connections.netdata3"
 394                                                 ></div>
 395                         </div>
 396                 </div>
 397         </div>
 398
 399         <div style="width: 100%; text-align: right; font-size: 1vw;">
 400                 <i class="fa fa-comment" aria-hidden="true"></i> these charts are draggable and touchable, double click them to reset them
 401         </div>
 402
 403
 404         <div class="mytitle">
 405                 bandwidth consumption on the demo sites
 406         </div>
 407         <div class="mycontent">
 408                 Linux QoS is configured by <a href="https://github.com/firehol/netdata/wiki/You-should-install-QoS-on-all-your-servers">FireQOS</a>
 409         </div>
 410
 411         <!-- Nav tabs -->
 412         <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
 413                 <li role="presentation" class="active"><a href="#outbout" aria-controls="outbout" role="tab" data-toggle="tab">Outbound</a></li>
 414                 <li role="presentation"><a href="#inbound" aria-controls="inbound" role="tab" data-toggle="tab">Inbound</a></li>
 415         </ul>
 416
 417         <!-- Tab panes -->
 418         <div class="tab-content">
 419                 <div role="tabpanel" class="tab-pane active" id="outbout">
 420                         <div class="myfullchart">
 421                                 <div data-netdata="tc.world_out"
 422                                         data-host="//netdata1.firehol.org"
 423                                         data-chart-library="dygraph"
 424                                         data-title="EU - London, traffic we send per service"
 425                                         data-width="100%"
 426                                         data-height="100%"
 427                                         data-after="-300"
 428                                         ></div>
 429                         </div>
 430
 431                         <div class="myfullchart">
 432                                 <div data-netdata="tc.world_out"
 433                                         data-host="//netdata2.firehol.org"
 434                                         data-chart-library="dygraph"
 435                                         data-title="US - Atlanta, traffic we send per service"
 436                                         data-width="100%"
 437                                         data-height="100%"
 438                                         data-after="-300"
 439                                         ></div>
 440
 441                         </div>
 442
 443                         <div class="myfullchart">
 444                                 <div data-netdata="tc.world_out"
 445                                         data-host="//netdata3.firehol.org"
 446                                         data-chart-library="dygraph"
 447                                         data-title="EU - Greece, traffic we send per service"
 448                                         data-width="100%"
 449                                         data-height="100%"
 450                                         data-after="-300"
 451                                         ></div>
 452                         </div>
 453                 </div>
 454                 <div role="tabpanel" class="tab-pane" id="inbound">
 455                         <div class="myfullchart">
 456                                 <div data-netdata="tc.world_in"
 457                                         data-host="//netdata1.firehol.org"
 458                                         data-chart-library="dygraph"
 459                                         data-title="EU - London, traffic we receive per service"
 460                                         data-width="100%"
 461                                         data-height="100%"
 462                                         data-after="-300"
 463                                         ></div>
 464
 465                         </div>
 466
 467                         <div class="myfullchart">
 468                                 <div data-netdata="tc.world_in"
 469                                         data-host="//netdata2.firehol.org"
 470                                         data-chart-library="dygraph"
 471                                         data-title="US - Atlanta, traffic we receive per service"
 472                                         data-width="100%"
 473                                         data-height="100%"
 474                                         data-after="-300"
 475                                         ></div>
 476
 477                         </div>
 478
 479                         <div class="myfullchart">
 480                                 <div data-netdata="tc.world_in"
 481                                         data-host="//netdata3.firehol.org"
 482                                         data-chart-library="dygraph"
 483                                         data-title="EU - Greece, traffic we receive per service"
 484                                         data-width="100%"
 485                                         data-height="100%"
 486                                         data-after="-300"
 487                                         ></div>
 488                         </div>
 489                 </div>
 490         </div>
 491         <div style="width: 100%; text-align: right; font-size: 1vw;">
 492                 <i class="fa fa-comment" aria-hidden="true"></i> <i>these legends are interactive and the charts are resizable here ^^^</i>
 493         </div>
 494
 495         <div class="mytitle">
 496                 DDoS protection performance on the demo sites
 497         </div>
 498         <div class="mycontent">
 499                 iptables SYNPROXY configured by our <a href="https://github.com/firehol/netdata/wiki/Monitoring-SYNPROXY">FireHOL</a>
 500         </div>
 501
 502         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 503
 504                 <div class="mysparkline">
 505                         <div class="mysparkline-overchart-label">
 506                                 <b>EU - London</b>, TCP SYN packets/s received
 507                         </div>
 508                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata1" >
 509                         </div>
 510                         <div data-netdata="netfilter.synproxy_syn_received"
 511                                         data-dimensions="received"
 512                                         data-host="//netdata1.firehol.org"
 513                                         data-chart-library="dygraph"
 514                                         data-dygraph-theme="sparkline"
 515                                         data-dygraph-type="area"
 516                                         data-width="100%"
 517                                         data-height="100%"
 518                                         data-after="-300"
 519                                         data-colors="#558855"
 520                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata1"
 521                                         ></div>
 522                 </div>
 523
 524                 <div class="mysparkline">
 525                         <div class="mysparkline-overchart-label">
 526                                 <b>US - Atlanta</b>, TCP SYN packets/s received
 527                         </div>
 528                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata2" >
 529                         </div>
 530                         <div data-netdata="netfilter.synproxy_syn_received"
 531                                         data-dimensions="received"
 532                                         data-host="//netdata2.firehol.org"
 533                                         data-chart-library="dygraph"
 534                                         data-dygraph-theme="sparkline"
 535                                         data-dygraph-type="area"
 536                                         data-width="100%"
 537                                         data-height="100%"
 538                                         data-after="-300"
 539                                         data-colors="#885555"
 540                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata2"
 541                                         ></div>
 542                 </div>
 543
 544                 <div class="mysparkline">
 545                         <div class="mysparkline-overchart-label">
 546                                 <b>EU - Greece</b>, TCP SYN packets/s received
 547                         </div>
 548                         <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
 549                         </div>
 550                         <div data-netdata="netfilter.synproxy_syn_received"
 551                                         data-dimensions="received"
 552                                         data-host="//netdata3.firehol.org"
 553                                         data-chart-library="dygraph"
 554                                         data-dygraph-theme="sparkline"
 555                                         data-dygraph-type="area"
 556                                         data-width="100%"
 557                                         data-height="100%"
 558                                         data-after="-300"
 559                                         data-colors="#555588"
 560                                         data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
 561                                         ></div>
 562                 </div>
 563         </div>
 564         <div style="width: 100%; text-align: right; font-size: 1vw;">
 565                 <i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
 566                 <br/>netdata interpolates collected values at second boundaries, with nanosecond detail!</i>
 567         </div>
 568
 569
 570         <div class="mytitle">
 571                 CPU Utilization of the demo sites
 572         </div>
 573
 574         <div style="padding-top: 1vw;">
 575                 <div class="myfullchart">
 576                         <div data-netdata="system.cpu"
 577                                 data-host="//netdata1.firehol.org"
 578                                 data-chart-library="dygraph"
 579                                 data-title="EU - London, CPU Usage"
 580                                 data-width="100%"
 581                                 data-height="100%"
 582                                 data-after="-300"
 583                                 ></div>
 584                 </div>
 585
 586                 <div class="myfullchart">
 587                         <div data-netdata="system.cpu"
 588                                 data-host="//netdata2.firehol.org"
 589                                 data-chart-library="dygraph"
 590                                 data-title="US - Atlanta, CPU Usage"
 591                                 data-width="100%"
 592                                 data-height="100%"
 593                                 data-after="-300"
 594                                 ></div>
 595                 </div>
 596
 597                 <div class="myfullchart">
 598                         <div data-netdata="system.cpu"
 599                                 data-host="//netdata3.firehol.org"
 600                                 data-chart-library="dygraph"
 601                                 data-title="EU - Greece, CPU Usage"
 602                                 data-width="100%"
 603                                 data-height="100%"
 604                                 data-after="-300"
 605                                 ></div>
 606                 </div>
 607         </div>
 608         <div style="width: 100%; text-align: right; font-size: 1vw;">
 609                 <i class="fa fa-comment" aria-hidden="true"></i> <i>what does it take so much CPU?
 610                 <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>
 611         </div>
 612
 613         <div class="mytitle">
 614                 CPU Usage of the netdata user
 615         </div>
 616         <div class="mycontent">
 617                 netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
 618                 <br/>
 619                 and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
 620         </div>
 621
 622         <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
 623
 624                 <div class="mysparkline">
 625                         <div class="mysparkline-overchart-label">
 626                                 <b>EU - London</b>, CPU % of a single core
 627                         </div>
 628                         <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
 629                         </div>
 630                         <div data-netdata="users.cpu"
 631                                         data-dimensions="netdata"
 632                                         data-host="//netdata1.firehol.org"
 633                                         data-chart-library="dygraph"
 634                                         data-dygraph-theme="sparkline"
 635                                         data-dygraph-type="area"
 636                                         data-width="100%"
 637                                         data-height="100%"
 638                                         data-after="-300"
 639                                         data-colors="#558855"
 640                                         data-show-value-of-netdata-at="users.cpu.netdata1"
 641                                         ></div>
 642                 </div>
 643
 644                 <div class="mysparkline">
 645                         <div class="mysparkline-overchart-label">
 646                                 <b>US - Atlanta</b>, CPU % of a single core
 647                         </div>
 648                         <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
 649                         </div>
 650                         <div data-netdata="users.cpu"
 651                                         data-dimensions="netdata"
 652                                         data-host="//netdata2.firehol.org"
 653                                         data-chart-library="dygraph"
 654                                         data-dygraph-theme="sparkline"
 655                                         data-dygraph-type="area"
 656                                         data-width="100%"
 657                                         data-height="100%"
 658                                         data-after="-300"
 659                                         data-colors="#885555"
 660                                         data-show-value-of-netdata-at="users.cpu.netdata2"
 661                                         ></div>
 662                 </div>
 663
 664                 <div class="mysparkline">
 665                         <div class="mysparkline-overchart-label">
 666                                 <b>EU - Greece</b>, CPU % of a single core
 667                         </div>
 668                         <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
 669                         </div>
 670                         <div data-netdata="users.cpu"
 671                                         data-dimensions="netdata"
 672                                         data-host="//netdata3.firehol.org"
 673                                         data-chart-library="dygraph"
 674                                         data-dygraph-theme="sparkline"
 675                                         data-dygraph-type="area"
 676                                         data-width="100%"
 677                                         data-height="100%"
 678                                         data-after="-300"
 679                                         data-colors="#555588"
 680                                         data-show-value-of-netdata-at="users.cpu.netdata3"
 681                                         ></div>
 682                 </div>
 683         </div>
 684         <div style="width: 100%; text-align: right; font-size: 1vw;">
 685                 <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>!
 686                 <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.
 687                 <br/>and including the chart refreshes for the dashboards of all viewers.</i>
 688         </div>
 689
 690         <div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
 691                 want to know more?
 692                 <br/>
 693                 jump to <a href="https://github.com/firehol/netdata/">the netdata page at github</a>!
 694                 <br/>
 695                 <b>netdata</b> monitors 1.000 - 5.000 metrics out of the box
 696                 <br/>
 697                 and it needs just 3 mins to be installed!
 698                 <br/>
 699                 &nbsp;
 700         </div>
 701 </div>
 702 </body>
 703 </html>