4 <title>NetData Demo Sites Dashboard</title>
6 <meta http-equiv="Content-Type" content="text/html; 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">
14 // this section has to appear before loading dashboard.js
17 // uncomment on of the two themes:
19 // var netdataTheme = 'default'; // this is white
20 var netdataTheme = 'slate'; // this is dark
23 // Set the default netdata server.
24 // on charts without a 'data-host', this one will be used.
25 // the default is the server that dashboard.js is downloaded from.
27 // var netdataServer = 'http://my.server:19999/';
33 to host this HTML file on your web server,
34 you have to load dashboard.js from the netdata server.
36 So, pick one the two below
37 If you pick the first, set the server name/IP.
39 The second assumes you host this file on /usr/share/netdata/web
40 and that you have chown it to be owned by netdata:netdata
42 <!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
43 <script type="text/javascript" src="dashboard.js"></script>
46 // Set options for TV operation
47 // This has to be done, after dashboard.js is loaded
49 // destroy charts not shown (lowers memory on the browser)
50 NETDATA.options.current.destroy_on_hide = true;
52 // set this to false, to always show all dimensions
53 NETDATA.options.current.eliminate_zero_dimensions = true;
55 // lower the pressure on this browser
56 NETDATA.options.current.concurrent_refreshes = false;
58 // if the tv browser is too slow (a pi?)
60 NETDATA.options.current.parallel_refresher = true;
62 // always update the charts, even if focus is lost
63 // NETDATA.options.current.stop_updates_when_focus_is_lost = false;
65 // Since you may render charts from many servers and any of them may
66 // become offline for some time, the charts will break.
67 // This will reload the page every RELOAD_EVERY minutes
70 setTimeout(function(){
72 }, RELOAD_EVERY * 60 * 1000);
79 <div style="width: 100%; text-align: center; display: inline-block;">
81 <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
82 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
83 <b>CPU On both servers</b>
85 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
87 <div data-netdata="system.cpu"
88 data-host="//netdata.firehol.org"
89 data-title="CPU usage of EU Server"
90 data-chart-library="dygraph"
95 <div data-netdata="system.cpu"
96 data-host="//netdata2.firehol.org"
97 data-title="CPU usage of US Server"
98 data-chart-library="dygraph"
107 <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
108 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
109 <b>Disk I/O on both servers</b>
111 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
112 <div data-netdata="tc.world_in"
113 data-host="//netdata.firehol.org"
114 data-title="Inbound QoS on EU Server"
115 data-chart-library="dygraph"
120 <div data-netdata="tc.world_in"
121 data-host="//netdata2.firehol.org"
122 data-title="Inbound QoS on US Server"
123 data-chart-library="dygraph"
131 <div style="width: 100%; height: 16vh; text-align: center; display: inline-block;">
132 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
133 <div data-netdata="tc.world_out"
134 data-host="//netdata.firehol.org"
135 data-title="Outbound QoS on Server"
136 data-chart-library="dygraph"
141 <div data-netdata="tc.world_out"
142 data-host="//netdata2.firehol.org"
143 data-title="Outbound QoS on US Server"
144 data-chart-library="dygraph"
152 <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
153 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
154 <b>NGINX performance on both servers</b>
156 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
157 <div data-netdata="nginx.connections"
158 data-host="//netdata.firehol.org"
159 data-title="NGINX Connections on EU Server"
160 data-chart-library="dygraph"
165 <div data-netdata="nginx.connections"
166 data-host="//netdata2.firehol.org"
167 data-title="NGINX Connections on US Server"
168 data-chart-library="dygraph"
176 <div style="width: 100%; height: 12vh; text-align: center; display: inline-block;">
177 <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
178 <div data-netdata="nginx.requests"
179 data-host="//netdata.firehol.org"
180 data-title="NGINX Requests on EU Server"
181 data-chart-library="dygraph"
185 data-colors="#5555FF"
187 <div data-netdata="nginx.requests"
188 data-host="//netdata2.firehol.org"
189 data-title="NGINX Requests on US Server"
190 data-chart-library="dygraph"
194 data-colors="#5555FF"
199 <div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
200 <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
201 <b>Netdata statistics on both servers</b>
203 <div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
204 <div style="width: 49%; height:100%; align: center; display: inline-block;">
207 <div data-netdata="netdata.net"
208 data-dimensions="out"
209 data-host="//netdata.firehol.org"
210 data-title="Chart Data Traffic"
211 data-chart-library="easypiechart"
217 <div data-netdata="netdata.net"
219 data-host="//netdata.firehol.org"
220 data-title="Requests Traffic"
221 data-chart-library="easypiechart"
227 <div data-netdata="netdata.clients"
228 data-host="//netdata.firehol.org"
230 data-chart-library="gauge"
235 data-colors="#AA5500"
237 <div data-netdata="netdata.requests"
238 data-host="//netdata.firehol.org"
239 data-title="Chart Refreshes/s"
240 data-chart-library="gauge"
247 <div style="width: 49%; height:100%; align: center; display: inline-block;">
250 <div data-netdata="netdata.requests"
251 data-host="//netdata2.firehol.org"
252 data-title="Chart Refreshes/s"
253 data-chart-library="gauge"
259 <div data-netdata="netdata.clients"
260 data-host="//netdata2.firehol.org"
262 data-chart-library="gauge"
267 data-colors="#AA5500"
269 <div data-netdata="netdata.net"
271 data-host="//netdata2.firehol.org"
272 data-title="Requests Traffic"
273 data-chart-library="easypiechart"
279 <div data-netdata="netdata.net"
280 data-dimensions="out"
281 data-host="//netdata2.firehol.org"
282 data-title="Chart Data Traffic"
283 data-chart-library="easypiechart"