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