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://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.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 </div> <!-- 1st container -->
 647 </body>
 648 </html>
 649
 650 <!-- you can set your netdata server globally, by ucommenting this -->
 651 <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 652 <!-- <script> netdataServer = "http://box:19999"; </script> -->
 653
 654 <!-- load the dashboard manager - it will do the rest -->
 655 <script type="text/javascript" src="dashboard.js?v20170105-7"></script>