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                 </td></tr>\r
  98         <tr>\r
  99                 <td width="600" align="center">\r
 100                         <div data-netdata="system.processes"\r
 101                                 data-chart-library="sparkline"\r
 102                                 data-width="600"\r
 103                                 data-height="30"\r
 104                                 data-after="-600"\r
 105                                 data-dt-element-name="time21"\r
 106                                 </div>\r
 107                 </td>\r
 108                 <td width="600" align="center">\r
 109                         <div data-netdata="system.ipv4"\r
 110                                 data-chart-library="sparkline"\r
 111                                 data-width="600"\r
 112                                 data-height="30"\r
 113                                 data-after="-600"\r
 114                                 data-dt-element-name="time22"\r
 115                                 </div>\r
 116                 </td>\r
 117                 <td width="600" align="center">\r
 118                         <div data-netdata="system.cpu"\r
 119                                 data-chart-library="sparkline"\r
 120                                 data-width="600"\r
 121                                 data-height="30"\r
 122                                 data-after="-600"\r
 123                                 data-dt-element-name="time23"\r
 124                                 </div>\r
 125                 </td>\r
 126         </tr>\r
 127         <tr>\r
 128                 <td>rendered in <span id="time21">X</span> ms</td>\r
 129                 <td>rendered in <span id="time22">X</span> ms</td>\r
 130                 <td>rendered in <span id="time23">X</span> ms</td>\r
 131         </tr>\r
 132         <tr><td colspan="3" align="center">&nbsp;</td></tr>\r
 133         <tr><th colspan="3" align="center"><hr>Dygraph Charts</th></tr>\r
 134         <tr><td colspan="3" align="center">\r
 135                 The fastest charting engine that can chart complete charts (not just sparklines).\r
 136                 The charts are zoomable (drag their contents to zoom-in, double click to zoom-out).\r
 137                 For the moment zooming is just on the presentation layer (the data do not become more detailed when you zoom).\r
 138                 </td></tr>\r
 139         <tr>\r
 140                 <td width="600" align="center">\r
 141                         <div data-netdata="system.processes"\r
 142                                 data-chart-library="dygraph"\r
 143                                 data-width="600"\r
 144                                 data-height="200"\r
 145                                 data-after="-600"\r
 146                                 data-dt-element-name="time31"\r
 147                                 </div>\r
 148                 </td>\r
 149                 <td width="600" align="center">\r
 150                         <div data-netdata="system.ipv4"\r
 151                                 data-chart-library="dygraph"\r
 152                                 data-width="600"\r
 153                                 data-height="200"\r
 154                                 data-after="-600"\r
 155                                 data-dt-element-name="time32"\r
 156                                 </div>\r
 157                 </td>\r
 158                 <td width="600" align="center">\r
 159                         <div data-netdata="system.cpu"\r
 160                                 data-chart-library="dygraph"\r
 161                                 data-width="600"\r
 162                                 data-height="200"\r
 163                                 data-after="-600"\r
 164                                 data-dt-element-name="time33"\r
 165                                 </div>\r
 166                 </td>\r
 167         </tr>\r
 168         <tr>\r
 169                 <td>rendered in <span id="time31">X</span> ms</td>\r
 170                 <td>rendered in <span id="time32">X</span> ms</td>\r
 171                 <td>rendered in <span id="time33">X</span> ms</td>\r
 172         </tr>\r
 173         <tr><td colspan="3" align="center">&nbsp;</td></tr>\r
 174         <tr><th colspan="3" align="center"><hr>Google Charts</th></tr>\r
 175         <tr><td colspan="3" align="center">\r
 176                 NetData was originaly developed with Google Charts.\r
 177                 NetData is a complete Google Visualization API provider.\r
 178                 </td></tr>\r
 179         <tr>\r
 180                 <td width="600" align="center">\r
 181                         <div data-netdata="system.processes"\r
 182                                 data-chart-library="google"\r
 183                                 data-width="600"\r
 184                                 data-height="200"\r
 185                                 data-after="-600"\r
 186                                 data-dt-element-name="time51"\r
 187                                 </div>\r
 188                 </td>\r
 189                 <td width="600" align="center">\r
 190                         <div data-netdata="system.ipv4"\r
 191                                 data-chart-library="google"\r
 192                                 data-width="600"\r
 193                                 data-height="200"\r
 194                                 data-after="-600"\r
 195                                 data-dt-element-name="time52"\r
 196                                 </div>\r
 197                 </td>\r
 198                 <td width="600" align="center">\r
 199                         <div data-netdata="system.cpu"\r
 200                                 data-chart-library="google"\r
 201                                 data-width="600"\r
 202                                 data-height="200"\r
 203                                 data-after="-600"\r
 204                                 data-dt-element-name="time53"\r
 205                                 </div>\r
 206                 </td>\r
 207         </tr>\r
 208         <tr>\r
 209                 <td>rendered in <span id="time51">X</span> ms</td>\r
 210                 <td>rendered in <span id="time52">X</span> ms</td>\r
 211                 <td>rendered in <span id="time53">X</span> ms</td>\r
 212         </tr>\r
 213         <tr><td colspan="3" align="center">&nbsp;</td></tr>\r
 214         <tr><th colspan="3" align="center"><hr>Morris Charts</th></tr>\r
 215         <tr><td colspan="3" align="center">\r
 216                 Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to lower their detail to get acceptable results.\r
 217                 And they have issues with negative numbers in area charts...\r
 218                 </td></tr>\r
 219         <tr>\r
 220                 <td width="600" align="center">\r
 221                         <div data-netdata="system.processes"\r
 222                                 data-chart-library="morris"\r
 223                                 data-width="600"\r
 224                                 data-height="200"\r
 225                                 data-after="-600"\r
 226                                 data-dt-element-name="time41"\r
 227                                 </div>\r
 228                 </td>\r
 229                 <td width="600" align="center">\r
 230                         <div data-netdata="system.ipv4"\r
 231                                 data-chart-library="morris"\r
 232                                 data-width="600"\r
 233                                 data-height="200"\r
 234                                 data-after="-600"\r
 235                                 data-dt-element-name="time42"\r
 236                                 </div>\r
 237                 </td>\r
 238                 <td width="600" align="center">\r
 239                         <div data-netdata="system.cpu"\r
 240                                 data-chart-library="morris"\r
 241                                 data-width="600"\r
 242                                 data-height="200"\r
 243                                 data-after="-600"\r
 244                                 data-dt-element-name="time43"\r
 245                                 </div>\r
 246                 </td>\r
 247         </tr>\r
 248         <tr>\r
 249                 <td>rendered in <span id="time41">X</span> ms</td>\r
 250                 <td>rendered in <span id="time42">X</span> ms</td>\r
 251                 <td>rendered in <span id="time43">X</span> ms</td>\r
 252         </tr>\r
 253         </table>\r
 254 \r
 255 </body>\r
 256 </html>\r
 257         <!-- You can disable Google Visualization by commenting the following two lines -->\r
 258         <script type="text/javascript" src="https://www.google.com/jsapi"></script>\r
 259         <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>\r
 260 \r
 261         <!-- you can set your netdata server globally, by ucommenting this -->\r
 262         <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->\r
 263         <!-- <script> netdataServer = "http://box:19999"; </script> -->\r
 264 \r
 265         <!-- load the dashboard manager - it will do the rest -->\r
 266         <script type="text/javascript" src="dashboard.js"></script>\r
 267 \r