web/demosites.html

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