web/dashboard.html

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