web/dashboard.html

   1 <html>\r
   2 <head>  \r
   3         <title>NetData Dashboard</title>\r
   4         <style type="text/css">\r
   5                 html{font-family:sans-serif;}\r
   6         </style>\r
   7 </head>\r
   8 <body>\r
   9 \r
  10 <h1>NetData Custom Dashboard</h1>\r
  11 \r
  12 This is a template for building custom dashboards. To build a dashboard you just do this:\r
  13 \r
  14 <pre>\r
  15 &lt;html>\r
  16 &lt;body>\r
  17         &lt;div data-netdata="system.processes"\r
  18                 data-chart-library="dygraph"\r
  19                 data-width="600"\r
  20                 data-height="200"\r
  21                 data-after="-600"\r
  22                 &lt;/div>\r
  23 &lt;/body>\r
  24 &lt;script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script>\r
  25 &lt;/html>\r
  26 </pre>\r
  27 \r
  28 <ul>\r
  29         <li>You can host your dashboard anywhere.</li>\r
  30         <li>You can add as many charts as you like.</li>\r
  31         <li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li>\r
  32         <li>You can use different chart libraries on the same page: <b>peity</b>, <b>sparkline</b>, <b>dygraph</b>, <b>google</b> (requires some more lines in your html page - view source this one), <b>morris</b></li>\r
  33         <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>\r
  34         <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>\r
  35         <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>\r
  36 </ul>\r
  37 \r
  38         <table border="0" cellpadding="5" cellspacing="5">\r
  39         <tr>\r
  40                 <th width="600">\r
  41                 System Processes - Line Chart\r
  42                 </th>\r
  43                 <th width="600">\r
  44                 System ipv4 - Area Chart\r
  45                 </th>\r
  46                 <th width="600">\r
  47                 System CPU - Stacked Area Chart\r
  48                 </th>\r
  49         </tr>\r
  50         <tr><td colspan="3" align="center">&nbsp;</td></tr>\r
  51         <tr><th colspan="3" align="center"><hr>Peity Charts</th></tr>\r
  52         <tr><td colspan="3" align="center">\r
  53                 Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing.\r
  54                 Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show\r
  55                 the total of all dimensions.\r
  56                 </td></tr>\r
  57         <tr>\r
  58                 <td width="600" align="center">\r
  59                         <div data-netdata="system.processes"\r
  60                                 data-chart-library="peity"\r
  61                                 data-width="600"\r
  62                                 data-height="30"\r
  63                                 data-after="-600"\r
  64                                 data-dt-element-name="time11"\r
  65                                 </div>\r
  66                 </td>\r
  67                 <td width="600" align="center">\r
  68                         <div data-netdata="system.ipv4"\r
  69                                 data-chart-library="peity"\r
  70                                 data-width="600"\r
  71                                 data-height="30"\r
  72                                 data-after="-600"\r
  73                                 data-dt-element-name="time12"\r
  74                                 </div>\r
  75                 </td>\r
  76                 <td width="600" align="center">\r
  77                         <div data-netdata="system.cpu"\r
  78                                 data-chart-library="peity"\r
  79                                 data-width="600"\r
  80                                 data-height="30"\r
  81                                 data-after="-600"\r
  82                                 data-dt-element-name="time13"\r
  83                                 </div>\r
  84                 </td>\r
  85         </tr>\r
  86         <tr>\r
  87                 <td>rendered in <span id="time11">X</span> ms</td>\r
  88                 <td>rendered in <span id="time12">X</span> ms</td>\r
  89                 <td>rendered in <span id="time13">X</span> ms</td>\r
  90         </tr>\r
  91         <tr><td colspan="3" align="center">&nbsp;</td></tr>\r
  92         <tr><th colspan="3" align="center"><hr>Sparkline Charts</th></tr>\r
  93         <tr><td colspan="3" align="center">\r
  94                 Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.\r
  95                 Sparkline charts stretch the values to show the variations between values in more detail.\r
  96                 They also have mouse-hover support.\r
  97                 <br/>\r
  98                 Sparklines are fantastic. You can inline charts in text. For example this \r
  99                         <div    style="display: inline; position: relative;"\r
 100                                         data-netdata="system.cpu"\r
 101                                         data-chart-library="sparkline"\r
 102                                         data-width="60"\r
 103                                         data-height="15"\r
 104                                         data-after="-30"\r
 105                                         </div> is my current cpu usage,\r
 106                         <br/>\r
 107                         while this\r
 108                         <div    style="display: inline; position: relative;"\r
 109                                         data-netdata="netdata.net"\r
 110                                         data-dimensions="out"\r
 111                                         data-chart-library="sparkline"\r
 112                                         data-width="60"\r
 113                                         data-height="15"\r
 114                                         data-after="-30"\r
 115                                         </div> is the bandwidth my netdata server is currently transmitting and this \r
 116 \r
 117                         <div    style="display: inline; position: relative;"\r
 118                                         data-netdata="netdata.requests"\r
 119                                         data-chart-library="sparkline"\r
 120                                         data-width="60"\r
 121                                         data-height="15"\r
 122                                         data-after="-30"\r
 123                                         </div> is the requests/sec it serves.\r
 124                 </td></tr>\r
 125         <tr>\r
 126                 <td width="600" align="center">\r
 127                         <div data-netdata="system.processes"\r
 128                                 data-chart-library="sparkline"\r
 129                                 data-width="600"\r
 130                                 data-height="30"\r
 131                                 data-after="-600"\r
 132                                 data-dt-element-name="time21"\r
 133                                 </div>\r
 134                 </td>\r
 135                 <td width="600" align="center">\r
 136                         <div data-netdata="system.ipv4"\r
 137                                 data-chart-library="sparkline"\r
 138                                 data-width="600"\r
 139                                 data-height="30"\r
 140                                 data-after="-600"\r
 141                                 data-dt-element-name="time22"\r
 142                                 </div>\r
 143                 </td>\r
 144                 <td width="600" align="center">\r
 145                         <div data-netdata="system.cpu"\r
 146                                 data-chart-library="sparkline"\r
 147                                 data-width="600"\r
 148                                 data-height="30"\r
 149                                 data-after="-600"\r
 150                                 data-dt-element-name="time23"\r
 151                                 </div>\r
 152                 </td>\r
 153         </tr>\r
 154         <tr>\r
 155                 <td>rendered in <span id="time21">X</span> ms</td>\r
 156                 <td>rendered in <span id="time22">X</span> ms</td>\r
 157                 <td>rendered in <span id="time23">X</span> ms</td>\r
 158         </tr>\r
 159         <tr><td colspan="3" align="center">&nbsp;</td></tr>\r
 160         <tr><th colspan="3" align="center"><hr>Dygraph Charts</th></tr>\r
 161         <tr><td colspan="3" align="center">\r
 162                 The fastest charting engine that can chart complete charts (not just sparklines).\r
 163                 The charts are zoomable (drag their contents to zoom-in, double click to zoom-out).\r
 164                 For the moment zooming is just on the presentation layer (the data do not become more detailed when you zoom).\r
 165                 </td></tr>\r
 166         <tr>\r
 167                 <td width="600" align="center">\r
 168                         <div data-netdata="system.processes"\r
 169                                 data-chart-library="dygraph"\r
 170                                 data-width="600"\r
 171                                 data-height="200"\r
 172                                 data-after="-600"\r
 173                                 data-dt-element-name="time31"\r
 174                                 </div>\r
 175                 </td>\r
 176                 <td width="600" align="center">\r
 177                         <div data-netdata="system.ipv4"\r
 178                                 data-chart-library="dygraph"\r
 179                                 data-width="600"\r
 180                                 data-height="200"\r
 181                                 data-after="-600"\r
 182                                 data-dt-element-name="time32"\r
 183                                 </div>\r
 184                 </td>\r
 185                 <td width="600" align="center">\r
 186                         <div data-netdata="system.cpu"\r
 187                                 data-chart-library="dygraph"\r
 188                                 data-width="600"\r
 189                                 data-height="200"\r
 190                                 data-after="-600"\r
 191                                 data-dt-element-name="time33"\r
 192                                 </div>\r
 193                 </td>\r
 194         </tr>\r
 195         <tr>\r
 196                 <td>rendered in <span id="time31">X</span> ms</td>\r
 197                 <td>rendered in <span id="time32">X</span> ms</td>\r
 198                 <td>rendered in <span id="time33">X</span> ms</td>\r
 199         </tr>\r
 200         <tr><td colspan="3" align="center">&nbsp;</td></tr>\r
 201         <tr><th colspan="3" align="center"><hr>Google Charts</th></tr>\r
 202         <tr><td colspan="3" align="center">\r
 203                 NetData was originaly developed with Google Charts.\r
 204                 NetData is a complete Google Visualization API provider.\r
 205                 </td></tr>\r
 206         <tr>\r
 207                 <td width="600" align="center">\r
 208                         <div data-netdata="system.processes"\r
 209                                 data-chart-library="google"\r
 210                                 data-width="600"\r
 211                                 data-height="200"\r
 212                                 data-after="-600"\r
 213                                 data-dt-element-name="time51"\r
 214                                 </div>\r
 215                 </td>\r
 216                 <td width="600" align="center">\r
 217                         <div data-netdata="system.ipv4"\r
 218                                 data-chart-library="google"\r
 219                                 data-width="600"\r
 220                                 data-height="200"\r
 221                                 data-after="-600"\r
 222                                 data-dt-element-name="time52"\r
 223                                 </div>\r
 224                 </td>\r
 225                 <td width="600" align="center">\r
 226                         <div data-netdata="system.cpu"\r
 227                                 data-chart-library="google"\r
 228                                 data-width="600"\r
 229                                 data-height="200"\r
 230                                 data-after="-600"\r
 231                                 data-dt-element-name="time53"\r
 232                                 </div>\r
 233                 </td>\r
 234         </tr>\r
 235         <tr>\r
 236                 <td>rendered in <span id="time51">X</span> ms</td>\r
 237                 <td>rendered in <span id="time52">X</span> ms</td>\r
 238                 <td>rendered in <span id="time53">X</span> ms</td>\r
 239         </tr>\r
 240         <tr><td colspan="3" align="center">&nbsp;</td></tr>\r
 241         <tr><th colspan="3" align="center"><hr>Morris Charts</th></tr>\r
 242         <tr><td colspan="3" align="center">\r
 243                 Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to lower their detail to get acceptable results.\r
 244                 And they have issues with negative numbers in area charts...\r
 245                 </td></tr>\r
 246         <tr>\r
 247                 <td width="600" align="center">\r
 248                         <div data-netdata="system.processes"\r
 249                                 data-chart-library="morris"\r
 250                                 data-width="600"\r
 251                                 data-height="200"\r
 252                                 data-after="-600"\r
 253                                 data-dt-element-name="time41"\r
 254                                 </div>\r
 255                 </td>\r
 256                 <td width="600" align="center">\r
 257                         <div data-netdata="system.ipv4"\r
 258                                 data-chart-library="morris"\r
 259                                 data-width="600"\r
 260                                 data-height="200"\r
 261                                 data-after="-600"\r
 262                                 data-dt-element-name="time42"\r
 263                                 </div>\r
 264                 </td>\r
 265                 <td width="600" align="center">\r
 266                         <div data-netdata="system.cpu"\r
 267                                 data-chart-library="morris"\r
 268                                 data-width="600"\r
 269                                 data-height="200"\r
 270                                 data-after="-600"\r
 271                                 data-dt-element-name="time43"\r
 272                                 </div>\r
 273                 </td>\r
 274         </tr>\r
 275         <tr>\r
 276                 <td>rendered in <span id="time41">X</span> ms</td>\r
 277                 <td>rendered in <span id="time42">X</span> ms</td>\r
 278                 <td>rendered in <span id="time43">X</span> ms</td>\r
 279         </tr>\r
 280         </table>\r
 281 \r
 282 </body>\r
 283 </html>\r
 284         <!-- You can disable Google Visualization by commenting the following two lines -->\r
 285         <script type="text/javascript" src="https://www.google.com/jsapi"></script>\r
 286         <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>\r
 287 \r
 288         <!-- you can set your netdata server globally, by ucommenting this -->\r
 289         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->\r
 290         <!-- <script> netdataServer = "http://box:19999"; </script> -->\r
 291 \r
 292         <!-- load the dashboard manager - it will do the rest -->\r
 293         <script type="text/javascript" src="dashboard.js"></script>\r
 294 \r