- -

NetData Custom Dashboard

- -This is a template for building custom dashboards. To build a dashboard you just do this: - -

-<!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">
-</head>
-<body>
-    <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>
-

- -

You can host your dashboard anywhere.
You can add as many charts as you like.
You can have charts from many different netdata servers (add
```
data-host="http://another.netdata.server:19999/"
```
to each chart).
You can use different chart libraries on the same page: peity, sparkline, dygraph, google
You can customize each chart to your preferences. For each chart library most of their attributes can be given in data- attributes.
Each chart can have each own duration - it is controlled with the data-after attribute to give that many seconds of data.
Depending on the width of the chart and data-after 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.

- - -

Sparkline Charts

-Sparkline charts support 'NULL' values, so the charts can indicate that values are missing. -Sparkline charts stretch the values to show the variations between values in more detail. -They also have mouse-hover support. -
-Sparklines are fantastic. You can inline charts in text. For example this -

is my current cpu usage (last 30 seconds), - while this -

is the bandwidth my netdata server is currently transmitting (last minute) - and this -

is the requests/sec it serves (last 3 minutes). - -
-

-
- rendered in X ms -

- - - -

Peity Charts

-Peity charts do not support 'NULL' values, so the charts cannot indicate that values are missing. -Peity charts cannot have multiple dimensions on the charts - so netdata will use 'min2max' to show -the total of all dimensions. -
-

-
- rendered in X ms -

- - - - -

Dygraph Charts

-The fastest charting engine that can chart complete charts (not just sparklines). -The charts are zoomable (drag their contents to pan, shift with mouse wheel to zoom-in or zoom-out, double click to reset it). -Netdata magic! Realtime charts on your web page! -
-Sparklines using dygraphs -

- are also possible! This -

- is an area chart, while this -

is a stacked area chart! - - -
-

-
- rendered in X ms -

- - - -
-

-
- rendered in X ms -

- - - -

EasyPieChart

-
-

-
- rendered in X ms -

- - -

Gauge.js

-
-

-
- rendered in X ms -

- - -

Google Charts

-NetData was originaly developed with Google Charts. -NetData is a complete Google Visualization API provider. -
-

-
- rendered in X ms -

- - - -

d3pie Charts

-
- rendered in X ms -

- -

-
- rendered in X ms -

- -

-
- rendered in X ms -