diff options
Diffstat (limited to 'web/dashboard.html')
| -rw-r--r-- | web/dashboard.html | 997 |
1 files changed, 503 insertions, 494 deletions
diff --git a/web/dashboard.html b/web/dashboard.html index 2b6c8068..e5d01353 100644 --- a/web/dashboard.html +++ b/web/dashboard.html @@ -1,15 +1,24 @@ <!DOCTYPE html> <html lang="en"> <head> - <title>NetData Dashboard</title> - - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta name="apple-mobile-web-app-capable" content="yes"> - <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> - <meta name="author" content="costa@tsaousis.gr"> + <title>NetData Dashboard</title> + <meta name="application-name" content="netdata"> + + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> + <meta name="author" content="costa@tsaousis.gr"> + + <meta property="og:locale" content="en_US" /> + <meta property="og:image" content="https://my-netdata.io/images/seo-performance-512.png"/> + <meta property="og:url" content="http://my-netdata.io/"/> + <meta property="og:type" content="website"/> + <meta property="og:site_name" content="netdata"/> + <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/> + <meta property="og:description" content="Stunning real-time dashboards, blazingly fast and extremely interactive. Zero configuration, zero dependencies, zero maintenance." /> </head> <body> @@ -23,33 +32,33 @@ This is a template for building custom dashboards. To build a dashboard you just <!DOCTYPE html> <html lang="en"> <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta name="apple-mobile-web-app-capable" content="yes"> - <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> </head> <body> - <div data-netdata="system.processes" - data-chart-library="dygraph" - data-width="600" - data-height="200" - data-after="-600" - ></div> + <div data-netdata="system.processes" + data-chart-library="dygraph" + data-width="600" + data-height="200" + data-after="-600" + ></div> </body> <script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script> </html> </pre> <ul> - <li>You can host your dashboard anywhere.</li> - <li>You can add as many charts as you like.</li> - <li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li> - <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> - <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> - <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> - <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> + <li>You can host your dashboard anywhere.</li> + <li>You can add as many charts as you like.</li> + <li>You can have charts from many different netdata servers (add <pre>data-host="http://another.netdata.server:19999/"</pre> to each chart).</li> + <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> + <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> + <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> + <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> </ul> @@ -60,61 +69,61 @@ Sparkline charts stretch the values to show the variations between values in mor They also have mouse-hover support. <br/> <b>Sparklines are fantastic</b>. You can inline charts in text. For example this - <div data-netdata="system.cpu" - data-chart-library="sparkline" - data-width="5%" - data-height="20" - data-after="-30" - ></div> is my current cpu usage (last 30 seconds), - while this - <div data-netdata="netdata.net" - data-dimensions="out" - data-chart-library="sparkline" - data-width="10%" - data-height="20" - data-after="-60" - ></div> is the bandwidth my netdata server is currently transmitting (last minute) - and this - <div data-netdata="netdata.requests" - data-chart-library="sparkline" - data-width="20%" - data-height="20" - data-after="-180" - ></div> is the requests/sec it serves (last 3 minutes). + <div data-netdata="system.cpu" + data-chart-library="sparkline" + data-width="5%" + data-height="20" + data-after="-30" + ></div> is my current cpu usage (last 30 seconds), + while this + <div data-netdata="netdata.net" + data-dimensions="out" + data-chart-library="sparkline" + data-width="10%" + data-height="20" + data-after="-60" + ></div> is the bandwidth my netdata server is currently transmitting (last minute) + and this + <div data-netdata="netdata.requests" + data-chart-library="sparkline" + data-width="20%" + data-height="20" + data-after="-180" + ></div> is the requests/sec it serves (last 3 minutes). <br/> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.processes" - data-chart-library="sparkline" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time101" - ></div> - <br/> - <small>rendered in <span id="time101">X</span> ms</small> + <div data-netdata="system.processes" + data-chart-library="sparkline" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time101" + ></div> + <br/> + <small>rendered in <span id="time101">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.ipv4" - data-chart-library="sparkline" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time102" - ></div> - <br/> - <small>rendered in <span id="time102">X</span> ms</small> + <div data-netdata="system.ipv4" + data-chart-library="sparkline" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time102" + ></div> + <br/> + <small>rendered in <span id="time102">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.cpu" - data-chart-library="sparkline" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time103" - ></div> - <br/> - <small>rendered in <span id="time103">X</span> ms</small> + <div data-netdata="system.cpu" + data-chart-library="sparkline" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time103" + ></div> + <br/> + <small>rendered in <span id="time103">X</span> ms</small> </div> @@ -126,37 +135,37 @@ Peity charts cannot have multiple dimensions on the charts - so netdata will use the total of all dimensions. <br/> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.processes" - data-chart-library="peity" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time001" - ></div> - <br/> - <small>rendered in <span id="time001">X</span> ms</small> + <div data-netdata="system.processes" + data-chart-library="peity" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time001" + ></div> + <br/> + <small>rendered in <span id="time001">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.ipv4" - data-chart-library="peity" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time002" - ></div> - <br/> - <small>rendered in <span id="time002">X</span> ms</small> + <div data-netdata="system.ipv4" + data-chart-library="peity" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time002" + ></div> + <br/> + <small>rendered in <span id="time002">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.cpu" - data-chart-library="peity" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time003" - ></div> - <br/> - <small>rendered in <span id="time003">X</span> ms</small> + <div data-netdata="system.cpu" + data-chart-library="peity" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time003" + ></div> + <br/> + <small>rendered in <span id="time003">X</span> ms</small> </div> @@ -169,173 +178,173 @@ The charts are zoomable (drag their contents to pan, shift with mouse wheel to z <b>Netdata magic!</b> Realtime charts on your web page! <br/> Sparklines using dygraphs - <div data-netdata="system.processes" - data-chart-library="dygraph" - data-dygraph-theme="sparkline" - data-legend="no" - data-width="15%" - data-height="20" - data-after="-300" - ></div> - are also possible! This - <div data-netdata="system.ipv4" - data-chart-library="dygraph" - data-dygraph-theme="sparkline" - data-legend="no" - data-width="15%" - data-height="20" - data-after="-300" - ></div> - is an area chart, while this - <div data-netdata="system.cpu" - data-chart-library="dygraph" - data-dygraph-theme="sparkline" - data-legend="no" - data-width="15%" - data-height="20" - data-after="-300" - ></div> is a stacked area chart! + <div data-netdata="system.processes" + data-chart-library="dygraph" + data-dygraph-theme="sparkline" + data-legend="no" + data-width="15%" + data-height="20" + data-after="-300" + ></div> + are also possible! This + <div data-netdata="system.ipv4" + data-chart-library="dygraph" + data-dygraph-theme="sparkline" + data-legend="no" + data-width="15%" + data-height="20" + data-after="-300" + ></div> + is an area chart, while this + <div data-netdata="system.cpu" + data-chart-library="dygraph" + data-dygraph-theme="sparkline" + data-legend="no" + data-width="15%" + data-height="20" + data-after="-300" + ></div> is a stacked area chart! <br/> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.processes" - data-chart-library="dygraph" - data-dygraph-theme="sparkline" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time501" - ></div> - <br/> - <small>rendered in <span id="time501">X</span> ms</small> + <div data-netdata="system.processes" + data-chart-library="dygraph" + data-dygraph-theme="sparkline" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time501" + ></div> + <br/> + <small>rendered in <span id="time501">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.ipv4" - data-chart-library="dygraph" - data-dygraph-theme="sparkline" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time502" - ></div> - <br/> - <small>rendered in <span id="time502">X</span> ms</small> + <div data-netdata="system.ipv4" + data-chart-library="dygraph" + data-dygraph-theme="sparkline" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time502" + ></div> + <br/> + <small>rendered in <span id="time502">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.cpu" - data-chart-library="dygraph" - data-dygraph-theme="sparkline" - data-width="100%" - data-height="30" - data-after="-300" - data-dt-element-name="time503" - ></div> - <br/> - <small>rendered in <span id="time503">X</span> ms</small> + <div data-netdata="system.cpu" + data-chart-library="dygraph" + data-dygraph-theme="sparkline" + data-width="100%" + data-height="30" + data-after="-300" + data-dt-element-name="time503" + ></div> + <br/> + <small>rendered in <span id="time503">X</span> ms</small> </div> <br/> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.processes" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time201" - ></div> - <br/> - <small>rendered in <span id="time201">X</span> ms</small> -</div> -<div style="width: 33%; display: inline-block;"> - <div data-netdata="system.ipv4" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time202" - ></div> - <br/> - <small>rendered in <span id="time202">X</span> ms</small> -</div> -<div style="width: 33%; display: inline-block;"> - <div data-netdata="system.cpu" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time203" - ></div> - <br/> - <small>rendered in <span id="time203">X</span> ms</small> -</div> -<div style="width: 33%; display: inline-block;"> - <div data-netdata="system.io" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time204" - ></div> - <br/> - <small>rendered in <span id="time204">X</span> ms</small> -</div> -<div style="width: 33%; display: inline-block;"> - <div data-netdata="apps.cpu" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time205" - ></div> - <br/> - <small>rendered in <span id="time205">X</span> ms</small> -</div> -<div style="width: 33%; display: inline-block;"> - <div data-netdata="netdata.net" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time206" - ></div> - <br/> - <small>rendered in <span id="time206">X</span> ms</small> -</div> -<div style="width: 33%; display: inline-block;"> - <div data-netdata="netdata.server_cpu" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time207" - ></div> - <br/> - <small>rendered in <span id="time207">X</span> ms</small> -</div> -<div style="width: 33%; display: inline-block;"> - <div data-netdata="netdata.requests" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time208" - ></div> - <br/> - <small>rendered in <span id="time208">X</span> ms</small> -</div> -<div style="width: 33%; display: inline-block;"> - <div data-netdata="net.gstag0" - data-chart-library="dygraph" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time209" - ></div> - <br/> - <small>rendered in <span id="time209">X</span> ms</small> + <div data-netdata="system.processes" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time201" + ></div> + <br/> + <small>rendered in <span id="time201">X</span> ms</small> +</div> +<div style="width: 33%; display: inline-block;"> + <div data-netdata="system.ipv4" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time202" + ></div> + <br/> + <small>rendered in <span id="time202">X</span> ms</small> +</div> +<div style="width: 33%; display: inline-block;"> + <div data-netdata="system.cpu" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time203" + ></div> + <br/> + <small>rendered in <span id="time203">X</span> ms</small> +</div> +<div style="width: 33%; display: inline-block;"> + <div data-netdata="system.io" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time204" + ></div> + <br/> + <small>rendered in <span id="time204">X</span> ms</small> +</div> +<div style="width: 33%; display: inline-block;"> + <div data-netdata="apps.cpu" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time205" + ></div> + <br/> + <small>rendered in <span id="time205">X</span> ms</small> +</div> +<div style="width: 33%; display: inline-block;"> + <div data-netdata="netdata.net" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time206" + ></div> + <br/> + <small>rendered in <span id="time206">X</span> ms</small> +</div> +<div style="width: 33%; display: inline-block;"> + <div data-netdata="netdata.server_cpu" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time207" + ></div> + <br/> + <small>rendered in <span id="time207">X</span> ms</small> +</div> +<div style="width: 33%; display: inline-block;"> + <div data-netdata="netdata.requests" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time208" + ></div> + <br/> + <small>rendered in <span id="time208">X</span> ms</small> +</div> +<div style="width: 33%; display: inline-block;"> + <div data-netdata="net.gstag0" + data-chart-library="dygraph" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time209" + ></div> + <br/> + <small>rendered in <span id="time209">X</span> ms</small> </div> @@ -344,82 +353,82 @@ Sparklines using dygraphs <h1>EasyPieChart</h1> <br/> <div style="width: 33%; display: inline-block;"> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.processes" - data-chart-library="easypiechart" - data-width="200" - data-height="200" - data-after="-300" - data-points="300" - data-dt-element-name="time601" - ></div> - <br/> - <small>rendered in <span id="time601">X</span> ms</small> - </div> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.processes" - data-chart-library="easypiechart" - data-width="150" - data-height="150" - data-after="-300" - data-points="150" - data-dt-element-name="time601a" - ></div> - <br/> - <small>rendered in <span id="time601a">X</span> ms</small> - </div> -</div> -<div style="width: 33%; display: inline-block;"> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.ipv4" - data-chart-library="easypiechart" - data-width="200" - data-height="200" - data-after="-300" - data-points="300" - data-dt-element-name="time602" - ></div> - <br/> - <small>rendered in <span id="time602">X</span> ms</small> - </div> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.ipv4" - data-chart-library="easypiechart" - data-width="100" - data-height="100" - data-after="-300" - data-points="150" - data-dt-element-name="time602a" - ></div> - <br/> - <small>rendered in <span id="time602a">X</span> ms</small> - </div> -</div> -<div style="width: 33%; display: inline-block;"> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.cpu" - data-chart-library="easypiechart" - data-width="200" - data-height="200" - data-after="-300" - data-points="300" - data-dt-element-name="time603" - ></div> - <br/> - <small>rendered in <span id="time603">X</span> ms</small> - </div> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.cpu" - data-chart-library="easypiechart" - data-width="75" - data-height="75" - data-after="-300" - data-points="150" - data-dt-element-name="time603a" - ></div> - <br/> - <small>rendered in <span id="time603a">X</span> ms</small> - </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.processes" + data-chart-library="easypiechart" + data-width="200" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time601" + ></div> + <br/> + <small>rendered in <span id="time601">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.processes" + data-chart-library="easypiechart" + data-width="150" + data-height="150" + data-after="-300" + data-points="150" + data-dt-element-name="time601a" + ></div> + <br/> + <small>rendered in <span id="time601a">X</span> ms</small> + </div> +</div> +<div style="width: 33%; display: inline-block;"> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.ipv4" + data-chart-library="easypiechart" + data-width="200" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time602" + ></div> + <br/> + <small>rendered in <span id="time602">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.ipv4" + data-chart-library="easypiechart" + data-width="100" + data-height="100" + data-after="-300" + data-points="150" + data-dt-element-name="time602a" + ></div> + <br/> + <small>rendered in <span id="time602a">X</span> ms</small> + </div> +</div> +<div style="width: 33%; display: inline-block;"> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.cpu" + data-chart-library="easypiechart" + data-width="200" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time603" + ></div> + <br/> + <small>rendered in <span id="time603">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.cpu" + data-chart-library="easypiechart" + data-width="75" + data-height="75" + data-after="-300" + data-points="150" + data-dt-element-name="time603a" + ></div> + <br/> + <small>rendered in <span id="time603a">X</span> ms</small> + </div> </div> @@ -427,82 +436,82 @@ Sparklines using dygraphs <h1>Gauge.js</h1> <br/> <div style="width: 33%; display: inline-block;"> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.processes" - data-chart-library="gauge" - data-width="250" - data-height="200" - data-after="-300" - data-points="300" - data-dt-element-name="time701" - ></div> - <br/> - <small>rendered in <span id="time701">X</span> ms</small> - </div> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.processes" - data-chart-library="gauge" - data-width="125" - data-height="100" - data-after="-300" - data-points="150" - data-dt-element-name="time701a" - ></div> - <br/> - <small>rendered in <span id="time701a">X</span> ms</small> - </div> -</div> -<div style="width: 33%; display: inline-block;"> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.ipv4" - data-chart-library="gauge" - data-width="250" - data-height="200" - data-after="-300" - data-points="300" - data-dt-element-name="time702" - ></div> - <br/> - <small>rendered in <span id="time702">X</span> ms</small> - </div> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.ipv4" - data-chart-library="gauge" - data-width="125" - data-height="100" - data-after="-300" - data-points="150" - data-dt-element-name="time702a" - ></div> - <br/> - <small>rendered in <span id="time702a">X</span> ms</small> - </div> -</div> -<div style="width: 33%; display: inline-block;"> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.cpu" - data-chart-library="gauge" - data-width="250" - data-height="200" - data-after="-300" - data-points="300" - data-dt-element-name="time703" - ></div> - <br/> - <small>rendered in <span id="time703">X</span> ms</small> - </div> - <div style="display: inline-block; position: relative;"> - <div data-netdata="system.cpu" - data-chart-library="gauge" - data-width="125" - data-height="100" - data-after="-300" - data-points="150" - data-dt-element-name="time703a" - ></div> - <br/> - <small>rendered in <span id="time703a">X</span> ms</small> - </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.processes" + data-chart-library="gauge" + data-width="250" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time701" + ></div> + <br/> + <small>rendered in <span id="time701">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.processes" + data-chart-library="gauge" + data-width="125" + data-height="100" + data-after="-300" + data-points="150" + data-dt-element-name="time701a" + ></div> + <br/> + <small>rendered in <span id="time701a">X</span> ms</small> + </div> +</div> +<div style="width: 33%; display: inline-block;"> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.ipv4" + data-chart-library="gauge" + data-width="250" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time702" + ></div> + <br/> + <small>rendered in <span id="time702">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.ipv4" + data-chart-library="gauge" + data-width="125" + data-height="100" + data-after="-300" + data-points="150" + data-dt-element-name="time702a" + ></div> + <br/> + <small>rendered in <span id="time702a">X</span> ms</small> + </div> +</div> +<div style="width: 33%; display: inline-block;"> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.cpu" + data-chart-library="gauge" + data-width="250" + data-height="200" + data-after="-300" + data-points="300" + data-dt-element-name="time703" + ></div> + <br/> + <small>rendered in <span id="time703">X</span> ms</small> + </div> + <div style="display: inline-block; position: relative;"> + <div data-netdata="system.cpu" + data-chart-library="gauge" + data-width="125" + data-height="100" + data-after="-300" + data-points="150" + data-dt-element-name="time703a" + ></div> + <br/> + <small>rendered in <span id="time703a">X</span> ms</small> + </div> </div> @@ -512,37 +521,37 @@ NetData was originaly developed with Google Charts. NetData is a complete Google Visualization API provider. <br/> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.processes" - data-chart-library="google" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time301" - ></div> - <br/> - <small>rendered in <span id="time301">X</span> ms</small> + <div data-netdata="system.processes" + data-chart-library="google" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time301" + ></div> + <br/> + <small>rendered in <span id="time301">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.ipv4" - data-chart-library="google" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time302" - ></div> - <br/> - <small>rendered in <span id="time302">X</span> ms</small> + <div data-netdata="system.ipv4" + data-chart-library="google" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time302" + ></div> + <br/> + <small>rendered in <span id="time302">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.cpu" - data-chart-library="google" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time303" - ></div> - <br/> - <small>rendered in <span id="time303">X</span> ms</small> + <div data-netdata="system.cpu" + data-chart-library="google" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time303" + ></div> + <br/> + <small>rendered in <span id="time303">X</span> ms</small> </div> @@ -555,37 +564,37 @@ NetData is a complete Google Visualization API provider. Unfortunatelly, Morris Charts are very slow. Here we force them to lower their detail to get acceptable results. <br/> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.processes" - data-chart-library="morris" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time401" - ></div> - <br/> - <small>rendered in <span id="time401">X</span> ms</small> + <div data-netdata="system.processes" + data-chart-library="morris" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time401" + ></div> + <br/> + <small>rendered in <span id="time401">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.ipv4" - data-chart-library="morris" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time402" - ></div> - <br/> - <small>rendered in <span id="time402">X</span> ms</small> + <div data-netdata="system.ipv4" + data-chart-library="morris" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time402" + ></div> + <br/> + <small>rendered in <span id="time402">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.cpu" - data-chart-library="morris" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time403" - ></div> - <br/> - <small>rendered in <span id="time403">X</span> ms</small> + <div data-netdata="system.cpu" + data-chart-library="morris" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time403" + ></div> + <br/> + <small>rendered in <span id="time403">X</span> ms</small> </div> @@ -601,37 +610,37 @@ C3 charts are not usable in large scale. They suffer from the following issues: So, to avoid flashing the charts, we destroy and re-create the charts on each update. Also, since they manipulate the data with javascript we were forced to lower the detail they render to get acceptable speeds. <br/> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.processes" - data-chart-library="c3" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time801" - ></div> - <br/> - <small>rendered in <span id="time801">X</span> ms</small> + <div data-netdata="system.processes" + data-chart-library="c3" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time801" + ></div> + <br/> + <small>rendered in <span id="time801">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.ipv4" - data-chart-library="c3" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time802" - ></div> - <br/> - <small>rendered in <span id="time802">X</span> ms</small> + <div data-netdata="system.ipv4" + data-chart-library="c3" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time802" + ></div> + <br/> + <small>rendered in <span id="time802">X</span> ms</small> </div> <div style="width: 33%; display: inline-block;"> - <div data-netdata="system.cpu" - data-chart-library="c3" - data-width="100%" - data-height="200" - data-after="-300" - data-dt-element-name="time803" - ></div> - <br/> - <small>rendered in <span id="time803">X</span> ms</small> + <div data-netdata="system.cpu" + data-chart-library="c3" + data-width="100%" + data-height="200" + data-after="-300" + data-dt-element-name="time803" + ></div> + <br/> + <small>rendered in <span id="time803">X</span> ms</small> </div> @@ -641,9 +650,9 @@ So, to avoid flashing the charts, we destroy and re-create the charts on each up </div> <!-- 1st container --> </body> </html> - <!-- you can set your netdata server globally, by ucommenting this --> - <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" --> - <!-- <script> netdataServer = "http://box:19999"; </script> --> + <!-- you can set your netdata server globally, by ucommenting this --> + <!-- you can also give a different server per chart, with the attribute: data-host="http://netdata.server:19999" --> + <!-- <script> netdataServer = "http://box:19999"; </script> --> - <!-- load the dashboard manager - it will do the rest --> - <script type="text/javascript" src="dashboard.js?v37"></script> + <!-- load the dashboard manager - it will do the rest --> + <script type="text/javascript" src="dashboard.js?v42"></script> |