summaryrefslogtreecommitdiffstats
path: root/web/dashboard.html
diff options
context:
space:
mode:
authorLennart Weller <lhw@ring0.de>2016-09-05 08:27:21 +0000
committerLennart Weller <lhw@ring0.de>2016-09-05 08:27:21 +0000
commit1746898cefcb17f58b5cf27b4dad3d28236f1152 (patch)
tree9207f191cf39bbd077a1e1c73d6e82123e2fc710 /web/dashboard.html
parentImported Upstream version 1.2.0+dfsg (diff)
downloadnetdata-1746898cefcb17f58b5cf27b4dad3d28236f1152.tar.xz
netdata-1746898cefcb17f58b5cf27b4dad3d28236f1152.zip
Imported Upstream version 1.3.0+dfsgupstream/1.3.0+dfsg
Diffstat (limited to 'web/dashboard.html')
-rw-r--r--web/dashboard.html997
1 files changed, 503 insertions, 494 deletions
diff --git a/web/dashboard.html b/web/dashboard.html
index 2b6c80684..e5d01353f 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
&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
- &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- &lt;meta charset="utf-8">
- &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- &lt;meta name="viewport" content="width=device-width, initial-scale=1">
- &lt;meta name="apple-mobile-web-app-capable" content="yes">
- &lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+ &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ &lt;meta charset="utf-8">
+ &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ &lt;meta name="viewport" content="width=device-width, initial-scale=1">
+ &lt;meta name="apple-mobile-web-app-capable" content="yes">
+ &lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
&lt;/head>
&lt;body>
- &lt;div data-netdata="system.processes"
- data-chart-library="dygraph"
- data-width="600"
- data-height="200"
- data-after="-600"
- >&lt;/div>
+ &lt;div data-netdata="system.processes"
+ data-chart-library="dygraph"
+ data-width="600"
+ data-height="200"
+ data-after="-600"
+ >&lt;/div>
&lt;/body>
&lt;script type="text/javascript" src="http://netdata.server:19999/dashboard.js">&lt;/script>
&lt;/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>