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"></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
 344 <hr>
 345 <h1>Google Charts</h1>
 346 NetData was originaly developed with Google Charts.
 347 NetData is a complete Google Visualization API provider.
 348 <br/>
 349 <div style="width: 33%; display: inline-block;">
 350         <div data-netdata="system.processes"
 351                 data-chart-library="google"
 352                 data-width="100%"
 353                 data-height="200"
 354                 data-after="-300"
 355                 data-dt-element-name="time301"
 356                 ></div>
 357         <br/>
 358         <small>rendered in <span id="time301">X</span> ms</small>
 359 </div>
 360 <div style="width: 33%; display: inline-block;">
 361         <div data-netdata="system.ipv4"
 362                 data-chart-library="google"
 363                 data-width="100%"
 364                 data-height="200"
 365                 data-after="-300"
 366                 data-dt-element-name="time302"
 367                 ></div>
 368         <br/>
 369         <small>rendered in <span id="time302">X</span> ms</small>
 370 </div>
 371 <div style="width: 33%; display: inline-block;">
 372         <div data-netdata="system.cpu"
 373                 data-chart-library="google"
 374                 data-width="100%"
 375                 data-height="200"
 376                 data-after="-300"
 377                 data-dt-element-name="time303"
 378                 ></div>
 379         <br/>
 380         <small>rendered in <span id="time303">X</span> ms</small>
 381 </div>
 382
 383
 384
 385
 386
 387
 388 <hr>
 389 <h1>Morris Charts</h1>
 390 Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to lower their detail to get acceptable results.
 391 <br/>
 392 <div style="width: 33%; display: inline-block;">
 393         <div data-netdata="system.processes"
 394                 data-chart-library="morris"
 395                 data-width="100%"
 396                 data-height="200"
 397                 data-after="-300"
 398                 data-dt-element-name="time401"
 399                 ></div>
 400         <br/>
 401         <small>rendered in <span id="time401">X</span> ms</small>
 402 </div>
 403 <div style="width: 33%; display: inline-block;">
 404         <div data-netdata="system.ipv4"
 405                 data-chart-library="morris"
 406                 data-width="100%"
 407                 data-height="200"
 408                 data-after="-300"
 409                 data-dt-element-name="time402"
 410                 ></div>
 411         <br/>
 412         <small>rendered in <span id="time402">X</span> ms</small>
 413 </div>
 414 <div style="width: 33%; display: inline-block;">
 415         <div data-netdata="system.cpu"
 416                 data-chart-library="morris"
 417                 data-width="100%"
 418                 data-height="200"
 419                 data-after="-300"
 420                 data-dt-element-name="time403"
 421                 ></div>
 422         <br/>
 423         <small>rendered in <span id="time403">X</span> ms</small>
 424 </div>
 425
 426
 427
 428
 429 </div> <!-- 1st container -->
 430 </body>
 431 </html>
 432         <!-- you can set your netdata server globally, by ucommenting this -->
 433         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
 434         <!-- <script> netdataServer = "http://box:19999"; </script> -->
 435
 436         <!-- load the dashboard manager - it will do the rest -->
 437         <script type="text/javascript" src="dashboard.js"></script>
 438