3 <title>NetData Dashboard</title>
4 <style type="text/css">
5 html{font-family:sans-serif;}
10 <h1>NetData Custom Dashboard</h1>
12 This is a template for building custom dashboards. To build a dashboard you just do this:
17 <div data-netdata="system.processes"
18 data-chart-library="dygraph"
24 <script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script>
29 <li>You can host your dashboard anywhere.</li>
30 <li>You can add as many charts as you like.</li>
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>
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>
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>
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>
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>
38 <table border="0" cellpadding="5" cellspacing="5">
41 System Processes - Line Chart
44 System ipv4 - Area Chart
47 System CPU - Stacked Area Chart
50 <tr><td colspan="3" align="center"> </td></tr>
51 <tr><th colspan="3" align="center"><hr>Peity Charts</th></tr>
52 <tr><td colspan="3" align="center">
53 Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing.
54 Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show
55 the total of all dimensions.
58 <td width="600" align="center">
59 <div data-netdata="system.processes"
60 data-chart-library="peity"
64 data-dt-element-name="time11"
67 <td width="600" align="center">
68 <div data-netdata="system.ipv4"
69 data-chart-library="peity"
73 data-dt-element-name="time12"
76 <td width="600" align="center">
77 <div data-netdata="system.cpu"
78 data-chart-library="peity"
82 data-dt-element-name="time13"
87 <td>rendered in <span id="time11">X</span> ms</td>
88 <td>rendered in <span id="time12">X</span> ms</td>
89 <td>rendered in <span id="time13">X</span> ms</td>
91 <tr><td colspan="3" align="center"> </td></tr>
92 <tr><th colspan="3" align="center"><hr>Sparkline Charts</th></tr>
93 <tr><td colspan="3" align="center">
94 Sparkline charts support 'NULL' values, so the charts can indicate that values are missing.
95 Sparkline charts stretch the values to show the variations between values in more detail.
96 They also have mouse-hover support.
98 Sparklines are fantastic. You can inline charts in text. For example this
99 <div style="display: inline; position: relative;"
100 data-netdata="system.cpu"
101 data-chart-library="sparkline"
105 </div> is my current cpu usage,
108 <div style="display: inline; position: relative;"
109 data-netdata="netdata.net"
110 data-dimensions="out"
111 data-chart-library="sparkline"
115 </div> is the bandwidth my netdata server is currently transmitting and this
117 <div style="display: inline; position: relative;"
118 data-netdata="netdata.requests"
119 data-chart-library="sparkline"
123 </div> is the requests/sec it serves.
126 <td width="600" align="center">
127 <div data-netdata="system.processes"
128 data-chart-library="sparkline"
132 data-dt-element-name="time21"
135 <td width="600" align="center">
136 <div data-netdata="system.ipv4"
137 data-chart-library="sparkline"
141 data-dt-element-name="time22"
144 <td width="600" align="center">
145 <div data-netdata="system.cpu"
146 data-chart-library="sparkline"
150 data-dt-element-name="time23"
155 <td>rendered in <span id="time21">X</span> ms</td>
156 <td>rendered in <span id="time22">X</span> ms</td>
157 <td>rendered in <span id="time23">X</span> ms</td>
159 <tr><td colspan="3" align="center"> </td></tr>
160 <tr><th colspan="3" align="center"><hr>Dygraph Charts</th></tr>
161 <tr><td colspan="3" align="center">
162 The fastest charting engine that can chart complete charts (not just sparklines).
163 The charts are zoomable (drag their contents to zoom-in, double click to zoom-out).
164 For the moment zooming is just on the presentation layer (the data do not become more detailed when you zoom).
167 <td width="600" align="center">
168 <div data-netdata="system.processes"
169 data-chart-library="dygraph"
173 data-dt-element-name="time31"
176 <td width="600" align="center">
177 <div data-netdata="system.ipv4"
178 data-chart-library="dygraph"
182 data-dt-element-name="time32"
185 <td width="600" align="center">
186 <div data-netdata="system.cpu"
187 data-chart-library="dygraph"
191 data-dt-element-name="time33"
196 <td>rendered in <span id="time31">X</span> ms</td>
197 <td>rendered in <span id="time32">X</span> ms</td>
198 <td>rendered in <span id="time33">X</span> ms</td>
200 <tr><td colspan="3" align="center"> </td></tr>
201 <tr><th colspan="3" align="center"><hr>Google Charts</th></tr>
202 <tr><td colspan="3" align="center">
203 NetData was originaly developed with Google Charts.
204 NetData is a complete Google Visualization API provider.
207 <td width="600" align="center">
208 <div data-netdata="system.processes"
209 data-chart-library="google"
213 data-dt-element-name="time51"
216 <td width="600" align="center">
217 <div data-netdata="system.ipv4"
218 data-chart-library="google"
222 data-dt-element-name="time52"
225 <td width="600" align="center">
226 <div data-netdata="system.cpu"
227 data-chart-library="google"
231 data-dt-element-name="time53"
236 <td>rendered in <span id="time51">X</span> ms</td>
237 <td>rendered in <span id="time52">X</span> ms</td>
238 <td>rendered in <span id="time53">X</span> ms</td>
240 <tr><td colspan="3" align="center"> </td></tr>
241 <tr><th colspan="3" align="center"><hr>Morris Charts</th></tr>
242 <tr><td colspan="3" align="center">
243 Unfortunatelly, Morris Charts are veeeeeeeeeeeeeeeery slow! We force them to lower their detail to get acceptable results.
244 And they have issues with negative numbers in area charts...
247 <td width="600" align="center">
248 <div data-netdata="system.processes"
249 data-chart-library="morris"
253 data-dt-element-name="time41"
256 <td width="600" align="center">
257 <div data-netdata="system.ipv4"
258 data-chart-library="morris"
262 data-dt-element-name="time42"
265 <td width="600" align="center">
266 <div data-netdata="system.cpu"
267 data-chart-library="morris"
271 data-dt-element-name="time43"
276 <td>rendered in <span id="time41">X</span> ms</td>
277 <td>rendered in <span id="time42">X</span> ms</td>
278 <td>rendered in <span id="time43">X</span> ms</td>
284 <!-- You can disable Google Visualization by commenting the following two lines -->
285 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
286 <script type='text/javascript'>google.load('visualization', '1.1', {'packages':['corechart', 'controls']});</script>
288 <!-- you can set your netdata server globally, by ucommenting this -->
289 <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" -->
290 <!-- <script> netdataServer = "http://box:19999"; </script> -->
292 <!-- load the dashboard manager - it will do the rest -->
293 <script type="text/javascript" src="dashboard.js"></script>