web/dashboard.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4         <title>NetData Dashboard</title>
   5         <meta name="application-name" content="netdata">
   6
   7         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   8         <meta charset="utf-8">
   9         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10         <meta name="viewport" content="width=device-width, initial-scale=1">
  11         <meta name="apple-mobile-web-app-capable" content="yes">
  12         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  13         <meta name="author" content="costa@tsaousis.gr">
  14
  15         <meta property="og:locale" content="en_US" />
  16         <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/>
  17         <meta property="og:url" content="http://my-netdata.io/"/>
  18         <meta property="og:type" content="website"/>
  19         <meta property="og:site_name" content="netdata"/>
  20         <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
  21         <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." />
  22 </head>
  23 <body>
  24
  25 <div class="container-fluid">
  26
  27 <h1>NetData Custom Dashboard <div data-netdata="system.cpu" data-chart-library="sparkline" data-height="30" data-after="-600" data-sparkline-linecolor="#888"></div></h1>
  28
  29 This is a template for building custom dashboards. To build a dashboard you just do this:
  30
  31 <pre>
  32 &lt;!DOCTYPE html>
  33 &lt;html lang="en">
  34 &lt;head>
  35         &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  36         &lt;meta charset="utf-8">
  37         &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  38         &lt;meta name="viewport" content="width=device-width, initial-scale=1">
  39         &lt;meta name="apple-mobile-web-app-capable" content="yes">
  40         &lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  41 &lt;/head>
  42 &lt;body>
  43         &lt;div data-netdata="system.processes"
  44                 data-chart-library="dygraph"
  45                 data-width="600"
  46                 data-height="200"
  47                 data-after="-600"
  48                 >&lt;/div>
  49 &lt;/body>
  50 &lt;script type="text/javascript" src="http://netdata.server:19999/dashboard.js">&lt;/script>
  51 &lt;/html>
  52 </pre>
  53
  54 <ul>
  55         <li>You can host your dashboard anywhere.</li>
  56         <li>You can add as many charts as you like.</li>
  57         <li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li>
  58         <li>You can use different chart libraries on the same page: <b>peity</b>, <b>sparkline</b>, <b>dygraph</b>, <b>google</b>, <b>morris</b></li>
  59         <li>You can customize each chart to your preferences. For each chart library most of their attributes can be given in <b>data-</b> attributes.</li>
  60         <li>Each chart can have each own duration - it is controlled with the <b>data-after</b> attribute to give that many seconds of data.</li>
  61         <li>Depending on the width of the chart and <b>data-after</b> attribute, netdata will automatically refresh the chart when it needs to be updated. For example giving 600 pixels for width for -600 seconds of data, using a chart library that needs 3 pixels per point, will yeld in a chart updated once every 3 seconds.</li>
  62 </ul>
  63
  64
  65 <hr>
  66 <h1>Sparkline Charts</h1>
  67 Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.
  68 Sparkline charts stretch the values to show the variations between values in more detail.
  69 They also have mouse-hover support.
  70 <br/>
  71 <b>Sparklines are fantastic</b>. You can inline charts in text. For example this
  72         <div    data-netdata="system.cpu"
  73                         data-chart-library="sparkline"
  74                         data-width="5%"
  75                         data-height="20"
  76                         data-after="-30"
  77                         ></div> is my current cpu usage (last 30 seconds),
  78         while this
  79         <div    data-netdata="netdata.net"
  80                         data-dimensions="out"
  81                         data-chart-library="sparkline"
  82                         data-width="10%"
  83                         data-height="20"
  84                         data-after="-60"
  85                         ></div> is the bandwidth my netdata server is currently transmitting (last minute)
  86         and this
  87         <div    data-netdata="netdata.requests"
  88                         data-chart-library="sparkline"
  89                         data-width="20%"
  90                         data-height="20"
  91                         data-after="-180"
  92                         ></div> is the requests/sec it serves (last 3 minutes).
  93
  94 <br/>
  95 <div style="width: 33%; display: inline-block;">
  96         <div data-netdata="system.processes"
  97                 data-chart-library="sparkline"
  98                 data-width="100%"
  99                 data-height="30"
 100                 data-after="-300"
 101                 data-dt-element-name="time101"
 102                 ></div>
 103         <br/>
 104         <small>rendered in <span id="time101">X</span> ms</small>
 105 </div>
 106 <div style="width: 33%; display: inline-block;">
 107         <div data-netdata="system.ipv4"
 108                 data-chart-library="sparkline"
 109                 data-width="100%"
 110                 data-height="30"
 111                 data-after="-300"
 112                 data-dt-element-name="time102"
 113                 ></div>
 114         <br/>
 115         <small>rendered in <span id="time102">X</span> ms</small>
 116 </div>
 117 <div style="width: 33%; display: inline-block;">
 118         <div data-netdata="system.cpu"
 119                 data-chart-library="sparkline"
 120                 data-width="100%"
 121                 data-height="30"
 122                 data-after="-300"
 123                 data-dt-element-name="time103"
 124                 ></div>
 125         <br/>
 126         <small>rendered in <span id="time103">X</span> ms</small>
 127 </div>
 128
 129
 130
 131 <hr>
 132 <h1>Peity Charts</h1>
 133 Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing.
 134 Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show
 135 the total of all dimensions.
 136 <br/>
 137 <div style="width: 33%; display: inline-block;">
 138         <div data-netdata="system.processes"
 139                 data-chart-library="peity"
 140                 data-width="100%"
 141                 data-height="30"
 142                 data-after="-300"
 143                 data-dt-element-name="time001"
 144                 ></div>
 145         <br/>
 146         <small>rendered in <span id="time001">X</span> ms</small>
 147 </div>
 148 <div style="width: 33%; display: inline-block;">
 149         <div data-netdata="system.ipv4"
 150                 data-chart-library="peity"
 151                 data-width="100%"
 152                 data-height="30"
 153                 data-after="-300"
 154                 data-dt-element-name="time002"
 155                 ></div>
 156         <br/>
 157         <small>rendered in <span id="time002">X</span> ms</small>
 158 </div>
 159 <div style="width: 33%; display: inline-block;">
 160         <div data-netdata="system.cpu"
 161                 data-chart-library="peity"
 162                 data-width="100%"
 163                 data-height="30"
 164                 data-after="-300"
 165                 data-dt-element-name="time003"
 166                 ></div>
 167         <br/>
 168         <small>rendered in <span id="time003">X</span> ms</small>
 169 </div>
 170
 171
 172
 173
 174 <hr>
 175 <h1>Dygraph Charts</h1>
 176 The fastest charting engine that can chart complete charts (not just sparklines).
 177 The charts are zoomable (drag their contents to pan, shift with mouse wheel to zoom-in or zoom-out, double click to reset it).
 178 <b>Netdata magic!</b> Realtime charts on your web page!
 179 <br/>
 180 Sparklines using dygraphs
 181         <div data-netdata="system.processes"
 182                 data-chart-library="dygraph"
 183                 data-dygraph-theme="sparkline"
 184                 data-legend="no"
 185                 data-width="15%"
 186                 data-height="20"
 187                 data-after="-300"
 188                 ></div>
 189         are also possible! This
 190         <div data-netdata="system.ipv4"
 191                 data-chart-library="dygraph"
 192                 data-dygraph-theme="sparkline"
 193                 data-legend="no"
 194                 data-width="15%"
 195                 data-height="20"
 196                 data-after="-300"
 197                 ></div>
 198         is an area chart, while this
 199         <div data-netdata="system.cpu"
 200                 data-chart-library="dygraph"
 201                 data-dygraph-theme="sparkline"
 202                 data-legend="no"
 203                 data-width="15%"
 204                 data-height="20"
 205                 data-after="-300"
 206                 ></div> is a stacked area chart!
 207
 208
 209 <br/>
 210 <div style="width: 33%; display: inline-block;">
 211         <div data-netdata="system.processes"
 212                 data-chart-library="dygraph"
 213                 data-dygraph-theme="sparkline"
 214                 data-width="100%"
 215                 data-height="30"
 216                 data-after="-300"
 217                 data-dt-element-name="time501"
 218                 ></div>
 219         <br/>
 220         <small>rendered in <span id="time501">X</span> ms</small>
 221 </div>
 222 <div style="width: 33%; display: inline-block;">
 223         <div data-netdata="system.ipv4"
 224                 data-chart-library="dygraph"
 225                 data-dygraph-theme="sparkline"
 226                 data-width="100%"
 227                 data-height="30"
 228                 data-after="-300"
 229                 data-dt-element-name="time502"
 230                 ></div>
 231         <br/>
 232         <small>rendered in <span id="time502">X</span> ms</small>
 233 </div>
 234 <div style="width: 33%; display: inline-block;">
 235         <div data-netdata="system.cpu"
 236                 data-chart-library="dygraph"
 237                 data-dygraph-theme="sparkline"
 238                 data-width="100%"
 239                 data-height="30"
 240                 data-after="-300"
 241                 data-dt-element-name="time503"
 242                 ></div>
 243         <br/>
 244         <small>rendered in <span id="time503">X</span> ms</small>
 245 </div>
 246
 247
 248
 249 <br/>
 250 <div style="width: 33%; display: inline-block;">
 251         <div data-netdata="system.processes"
 252                 data-chart-library="dygraph"
 253                 data-width="100%"
 254                 data-height="200"
 255                 data-after="-300"
 256                 data-dt-element-name="time201"
 257                 ></div>
 258         <br/>
 259         <small>rendered in <span id="time201">X</span> ms</small>
 260 </div>
 261 <div style="width: 33%; display: inline-block;">
 262         <div data-netdata="system.ipv4"
 263                 data-chart-library="dygraph"
 264                 data-width="100%"
 265                 data-height="200"
 266                 data-after="-300"
 267                 data-dt-element-name="time202"
 268                 ></div>
 269         <br/>
 270         <small>rendered in <span id="time202">X</span> ms</small>
 271 </div>
 272 <div style="width: 33%; display: inline-block;">
 273         <div data-netdata="system.cpu"
 274                 data-chart-library="dygraph"
 275                 data-width="100%"
 276                 data-height="200"
 277                 data-after="-300"
 278                 data-dt-element-name="time203"
 279                 ></div>
 280         <br/>
 281         <small>rendered in <span id="time203">X</span> ms</small>
 282 </div>
 283 <div style="width: 33%; display: inline-block;">
 284         <div data-netdata="system.io"
 285                 data-chart-library="dygraph"
 286                 data-width="100%"
 287                 data-height="200"
 288                 data-after="-300"
 289                 data-dt-element-name="time204"
 290                 ></div>
 291         <br/>
 292         <small>rendered in <span id="time204">X</span> ms</small>
 293 </div>
 294 <div style="width: 33%; display: inline-block;">
 295         <div data-netdata="apps.cpu"
 296                 data-chart-library="dygraph"
 297                 data-width="100%"
 298                 data-height="200"
 299                 data-after="-300"
 300                 data-dt-element-name="time205"
 301                 ></div>
 302         <br/>
 303         <small>rendered in <span id="time205">X</span> ms</small>
 304 </div>
 305 <div style="width: 33%; display: inline-block;">
 306         <div data-netdata="netdata.net"
 307                 data-chart-library="dygraph"
 308                 data-width="100%"
 309                 data-height="200"
 310                 data-after="-300"
 311                 data-dt-element-name="time206"
 312                 ></div>
 313         <br/>
 314         <small>rendered in <span id="time206">X</span> ms</small>
 315 </div>
 316 <div style="width: 33%; display: inline-block;">
 317         <div data-netdata="netdata.server_cpu"
 318                 data-chart-library="dygraph"
 319                 data-width="100%"
 320                 data-height="200"
 321                 data-after="-300"
 322                 data-dt-element-name="time207"
 323                 ></div>
 324         <br/>
 325         <small>rendered in <span id="time207">X</span> ms</small>
 326 </div>
 327 <div style="width: 33%; display: inline-block;">
 328         <div data-netdata="netdata.requests"
 329                 data-chart-library="dygraph"
 330                 data-width="100%"
 331                 data-height="200"
 332                 data-after="-300"
 333                 data-dt-element-name="time208"
 334                 ></div>
 335         <br/>
 336         <small>rendered in <span id="time208">X</span> ms</small>
 337 </div>
 338 <div style="width: 33%; display: inline-block;">
 339         <div data-netdata="net.gstag0"
 340                 data-chart-library="dygraph"
 341                 data-width="100%"
 342                 data-height="200"
 343                 data-after="-300"
 344                 data-dt-element-name="time209"
 345                 ></div>
 346         <br/>
 347         <small>rendered in <span id="time209">X</span> ms</small>
 348 </div>
 349
 350
 351
 352 <hr>
 353 <h1>EasyPieChart</h1>
 354 <br/>
 355 <div style="width: 33%; display: inline-block;">
 356         <div style="display: inline-block; position: relative;">
 357                 <div data-netdata="system.processes"
 358                         data-chart-library="easypiechart"
 359                         data-width="200"
 360                         data-height="200"
 361                         data-after="-300"
 362                         data-points="300"
 363                         data-dt-element-name="time601"
 364                         ></div>
 365                 <br/>
 366                 <small>rendered in <span id="time601">X</span> ms</small>
 367         </div>
 368         <div style="display: inline-block; position: relative;">
 369                 <div data-netdata="system.processes"
 370                         data-chart-library="easypiechart"
 371                         data-width="150"
 372                         data-height="150"
 373                         data-after="-300"
 374                         data-points="150"
 375                         data-dt-element-name="time601a"
 376                         ></div>
 377                 <br/>
 378                 <small>rendered in <span id="time601a">X</span> ms</small>
 379         </div>
 380 </div>
 381 <div style="width: 33%; display: inline-block;">
 382         <div style="display: inline-block; position: relative;">
 383                 <div data-netdata="system.ipv4"
 384                         data-chart-library="easypiechart"
 385                         data-width="200"
 386                         data-height="200"
 387                         data-after="-300"
 388                         data-points="300"
 389                         data-dt-element-name="time602"
 390                         ></div>
 391                 <br/>
 392                 <small>rendered in <span id="time602">X</span> ms</small>
 393         </div>
 394         <div style="display: inline-block; position: relative;">
 395                 <div data-netdata="system.ipv4"
 396                         data-chart-library="easypiechart"
 397                         data-width="100"
 398                         data-height="100"
 399                         data-after="-300"
 400                         data-points="150"
 401                         data-dt-element-name="time602a"
 402                         ></div>
 403                 <br/>
 404                 <small>rendered in <span id="time602a">X</span> ms</small>
 405         </div>
 406 </div>
 407 <div style="width: 33%; display: inline-block;">
 408         <div style="display: inline-block; position: relative;">
 409                 <div data-netdata="system.cpu"
 410                         data-chart-library="easypiechart"
 411                         data-width="200"
 412                         data-height="200"
 413                         data-after="-300"
 414                         data-points="300"
 415                         data-dt-element-name="time603"
 416                         ></div>
 417                 <br/>
 418                 <small>rendered in <span id="time603">X</span> ms</small>
 419         </div>
 420         <div style="display: inline-block; position: relative;">
 421                 <div data-netdata="system.cpu"
 422                         data-chart-library="easypiechart"
 423                         data-width="75"
 424                         data-height="75"
 425                         data-after="-300"
 426                         data-points="150"
 427                         data-dt-element-name="time603a"
 428                         ></div>
 429                 <br/>
 430                 <small>rendered in <span id="time603a">X</span> ms</small>
 431         </div>
 432 </div>
 433
 434
 435 <hr>
 436 <h1>Gauge.js</h1>
 437 <br/>
 438 <div style="width: 33%; display: inline-block;">
 439         <div style="display: inline-block; position: relative;">
 440                 <div data-netdata="system.processes"
 441                         data-chart-library="gauge"
 442                         data-width="250"
 443                         data-height="200"
 444                         data-after="-300"
 445                         data-points="300"
 446                         data-dt-element-name="time701"
 447                         ></div>
 448                 <br/>
 449                 <small>rendered in <span id="time701">X</span> ms</small>
 450         </div>
 451         <div style="display: inline-block; position: relative;">
 452                 <div data-netdata="system.processes"
 453                         data-chart-library="gauge"
 454                         data-width="125"
 455                         data-height="100"
 456                         data-after="-300"
 457                         data-points="150"
 458                         data-dt-element-name="time701a"
 459                         ></div>
 460                 <br/>
 461                 <small>rendered in <span id="time701a">X</span> ms</small>
 462         </div>
 463 </div>
 464 <div style="width: 33%; display: inline-block;">
 465         <div style="display: inline-block; position: relative;">
 466                 <div data-netdata="system.ipv4"
 467                         data-chart-library="gauge"
 468                         data-width="250"
 469                         data-height="200"
 470                         data-after="-300"
 471                         data-points="300"
 472                         data-dt-element-name="time702"
 473                         ></div>
 474                 <br/>
 475                 <small>rendered in <span id="time702">X</span> ms</small>
 476         </div>
 477         <div style="display: inline-block; position: relative;">
 478                 <div data-netdata="system.ipv4"
 479                         data-chart-library="gauge"
 480                         data-width="125"
 481                         data-height="100"
 482                         data-after="-300"
 483                         data-points="150"
 484                         data-dt-element-name="time702a"
 485                         ></div>
 486                 <br/>
 487                 <small>rendered in <span id="time702a">X</span> ms</small>
 488         </div>
 489 </div>
 490 <div style="width: 33%; display: inline-block;">
 491         <div style="display: inline-block; position: relative;">
 492                 <div data-netdata="system.cpu"
 493                         data-chart-library="gauge"
 494                         data-width="250"
 495                         data-height="200"
 496                         data-after="-300"
 497                         data-points="300"
 498                         data-dt-element-name="time703"
 499                         ></div>
 500                 <br/>
 501                 <small>rendered in <span id="time703">X</span> ms</small>
 502         </div>
 503         <div style="display: inline-block; position: relative;">
 504                 <div data-netdata="system.cpu"
 505                         data-chart-library="gauge"
 506                         data-width="125"
 507                         data-height="100"
 508                         data-after="-300"
 509                         data-points="150"
 510                         data-dt-element-name="time703a"
 511                         ></div>
 512                 <br/>
 513                 <small>rendered in <span id="time703a">X</span> ms</small>
 514         </div>
 515 </div>
 516
 517
 518 <hr>
 519 <h1>Google Charts</h1>
 520 NetData was originaly developed with Google Charts.
 521 NetData is a complete Google Visualization API provider.
 522 <br/>
 523 <div style="width: 33%; display: inline-block;">
 524         <div data-netdata="system.processes"
 525                 data-chart-library="google"
 526                 data-width="100%"
 527                 data-height="200"
 528                 data-after="-300"
 529                 data-dt-element-name="time301"
 530                 ></div>
 531         <br/>
 532         <small>rendered in <span id="time301">X</span> ms</small>
 533 </div>
 534 <div style="width: 33%; display: inline-block;">
 535         <div data-netdata="system.ipv4"
 536                 data-chart-library="google"
 537                 data-width="100%"
 538                 data-height="200"
 539                 data-after="-300"
 540                 data-dt-element-name="time302"
 541                 ></div>
 542         <br/>
 543         <small>rendered in <span id="time302">X</span> ms</small>
 544 </div>
 545 <div style="width: 33%; display: inline-block;">
 546         <div data-netdata="system.cpu"
 547                 data-chart-library="google"
 548                 data-width="100%"
 549                 data-height="200"
 550                 data-after="-300"
 551                 data-dt-element-name="time303"
 552                 ></div>
 553         <br/>
 554         <small>rendered in <span id="time303">X</span> ms</small>
 555 </div>
 556
 557
 558
 559
 560
 561
 562 <hr>
 563 <h1>Morris Charts</h1>
 564 Unfortunatelly, Morris Charts are very slow. Here we force them to lower their detail to get acceptable results.
 565 <br/>
 566 <div style="width: 33%; display: inline-block;">
 567         <div data-netdata="system.processes"
 568                 data-chart-library="morris"
 569                 data-width="100%"
 570                 data-height="200"
 571                 data-after="-300"
 572                 data-dt-element-name="time401"
 573                 ></div>
 574         <br/>
 575         <small>rendered in <span id="time401">X</span> ms</small>
 576 </div>
 577 <div style="width: 33%; display: inline-block;">
 578         <div data-netdata="system.ipv4"
 579                 data-chart-library="morris"
 580                 data-width="100%"
 581                 data-height="200"
 582                 data-after="-300"
 583                 data-dt-element-name="time402"
 584                 ></div>
 585         <br/>
 586         <small>rendered in <span id="time402">X</span> ms</small>
 587 </div>
 588 <div style="width: 33%; display: inline-block;">
 589         <div data-netdata="system.cpu"
 590                 data-chart-library="morris"
 591                 data-width="100%"
 592                 data-height="200"
 593                 data-after="-300"
 594                 data-dt-element-name="time403"
 595                 ></div>
 596         <br/>
 597         <small>rendered in <span id="time403">X</span> ms</small>
 598 </div>
 599
 600
 601 <hr>
 602 <h1>C3 Charts</h1>
 603 C3 charts are not usable in large scale. They suffer from the following issues:
 604 <ul>
 605  <li>extreme use of transitions (implemented with D3 instead of CSS, meaning they are javascript rendered) that cannot be disabled - even opacity is hardcoded in the javascript library</li>
 606  <li>rendering is done with <code>SVG</code> instead of <code>canvas</code>, so they use DOM elements for every point, becomimg useless if more than 500 points are drawn</li>
 607  <li>lack of a <code>raw</code> data format, so every time a chart is updated, data convertion in javascript is required</li>
 608  <li>lack of <code>stacked</code> charts support</li>
 609 </ul>
 610 So, to avoid flashing the charts, we destroy and re-create the charts on each update. Also, since they manipulate the data with javascript we were forced to lower the detail they render to get acceptable speeds.
 611 <br/>
 612 <div style="width: 33%; display: inline-block;">
 613         <div data-netdata="system.processes"
 614                 data-chart-library="c3"
 615                 data-width="100%"
 616                 data-height="200"
 617                 data-after="-300"
 618                 data-dt-element-name="time801"
 619                 ></div>
 620         <br/>
 621         <small>rendered in <span id="time801">X</span> ms</small>
 622 </div>
 623 <div style="width: 33%; display: inline-block;">
 624         <div data-netdata="system.ipv4"
 625                 data-chart-library="c3"
 626                 data-width="100%"
 627                 data-height="200"
 628                 data-after="-300"
 629                 data-dt-element-name="time802"
 630                 ></div>
 631         <br/>
 632         <small>rendered in <span id="time802">X</span> ms</small>
 633 </div>
 634 <div style="width: 33%; display: inline-block;">
 635         <div data-netdata="system.cpu"
 636                 data-chart-library="c3"
 637                 data-width="100%"
 638                 data-height="200"
 639                 data-after="-300"
 640                 data-dt-element-name="time803"
 641                 ></div>
 642         <br/>
 643         <small>rendered in <span id="time803">X</span> ms</small>
 644 </div>
 645
 646
 647
 648
 649
 650 </div> <!-- 1st container -->
 651 </body>
 652 </html>
 653         <!-- you can set your netdata server globally, by ucommenting this -->
 654         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 655         <!-- <script> netdataServer = "http://box:19999"; </script> -->
 656
 657         <!-- load the dashboard manager - it will do the rest -->
 658         <script type="text/javascript" src="dashboard.js?v39"></script>