- utilize any or all of the available chart libraries, on the same dashboard
- use data from one or more Netdata servers, on the same dashboard
- host your dashboard HTML page on any web server, anywhere
You can also add Netdata charts to existing web pages.
If you plan to put the dashboard on TV, check out tv.html. Here's is a screenshot of it, monitoring two servers on the same page:
All of the mentioned examples are available on your local Netdata installation
http://myhost:19999/dashboard.html). The default web root directory with
the HTML and JS code is
/usr/share/netdata/web. The main dashboard is also in
that directory and called
Note: index.html has a different syntax. Don't use it as a template for simple
Example empty dashboard
If you need to create a new dashboard on an empty page, we suggest the following header:
Dash (Multi-Host Dashboard)
dash-example.html is an all-in-one page that automatically fetches graphs from all your hosts. Just add your graphs and charts (or use the defaults) one time using the
dash-* syntax, and your selections will be automatically replicated for all of your hosts; showing alarms and graphs for all your hosts on one page!
Dash will only work if you have implemented netdata streaming using
dash-example.html was created as an experiment to demonstrate the capabilities of netdata in a multi-host environment. If you desire more features, submit a pull request or check out Netdata Cloud!
First, rename the file so it doesn't get overwritten. For instance, with a webroot at
Find and change the following line in
dash.html to reflect your Netdata URLs. The second URL is only used if you access your Netdata dashboard through a reverse proxy. The reverse proxy URL is optional; if it is not set then both will use the Netdata host URL.
If you want to change the graphs or styling to fit your needs, just add an element to the page as shown. Child divs will be generated to create your graph/chart:
To change the sizes of graphs and charts, find the
Dash.options object in
dash.html and set your preferences:
To change the display order of your hosts, which is saved in localStorage, click the settings gear in the lower right corner
We hope you like it!
To add Netdata charts to any web page (dedicated to Netdata or not), you need to
/dashboard.js file of a Netdata server.
For example, if your Netdata server listens at
http://box:19999/, you will
need to add the following to the
head section of your web page:
What does dashboard.js do?
dashboard.js will automatically load the following:
dashboard.css, required for the Netdata charts
jquery.min.js, (only if jQuery is not already loaded for this web page)
bootstrap.min.js(only if Bootstrap is not already loaded) and
You can disable this by adding the following before loading
jquery.nanoscroller.min.js, required for the scrollbar of the chart legends.
bootstrap-toggle.min.css, required for the settings toggle buttons.
font-awesome.min.css, for icons.
dashboard.js loads will scan the page for elements that define charts
is loaded on first use).
Prevent dashboard.js from starting chart refreshes
dashboard.js not to start processing charts immediately after loaded,
by adding this fragment before loading it:
The default Netdata server
dashboard.js will attempt to auto-detect the URL of the Netdata server it is
loaded from, and set this server as the default Netdata server for all charts.
If you need to set any other URL as the default Netdata server for all charts
that do not specify a Netdata server, add this before loading
To add charts, you need to add a
div for each of them. Each of these
elements accept a few
The chart unique ID
The unique ID of a chart is shown at the title of the chart of the default
Netdata dashboard. You can also find all the charts available at your Netdata
server with this URL:
To specify the unique id, use this:
The above is enough for adding a chart. It most probably have the wrong visual settings though. Keep reading...
The duration of the chart
You can specify the duration of the chart (how much time of data it will show) using:
BEFORE_SECONDS are numbers representing a time-frame in
The can be either:
new Date().getTime() / 1000. Using absolute timestamps you can have a chart showing always the same time-frame.
relative number of seconds to now. To show the last 10 minutes of data,
-600(relative to now) and
0(meaning: now). If you want the chart to auto-refresh the current values, you need to specify relative values.
You can set the size of the chart using this:
HEIGHT can be anything CSS accepts for width and height (e.g.
percentages, pixels, etc). Keep in mind that for certain chart libraries,
dashboard.js may apply an aspect ratio to these.
If you want
dashboard.js to permanently remember (browser local storage) the
dimensions of the chart (the user may resize it), you can add:
SETTINGS_ID is anything that will be common for this
chart across user sessions.
Each chart can get data from a different Netdata server. You can specify the Netdata server to use for each chart using:
If you have ephemeral monitoring setup (More info here) and have no direct access to the nodes dashboards, you can use the following:
Netdata supports a number of chart libraries. The default chart library is
dygraph, but you can set a different chart library per chart using
Each chart library has a number of specific settings. To learn more about them,
you should investigate the documentation of the given chart library, or visit
are concatenated into the monolithin
dashboard.js for deployment.
For the time-frame requested,
dashboard.js will use the chart dimensions and
the settings of the chart library to find out how many data points it can show.
For example, most line chart libraries are using 3 pixels per data point. If the
chart shows 10 minutes of data (600 seconds), its update frequency is 1 second,
and the chart width is 1800 pixels, then
dashboard.js will request from the
Netdata server: 10 minutes of data, represented in 600 points, and the chart
will be refreshed per second. If the user resizes the window so that the chart
becomes 600 pixels wide, then
dashboard.js will request the same 10 minutes of
data, represented in 200 points and the chart will be refreshed once every 3
If you need the chart to show a fixed number of points, you can set the
data-points option. Replace
DATA_POINTS with the number of points you need:
You can also overwrite the pixels-per-point per chart using this:
PIXELS_PER_POINT is the number of pixels each data point should occupy.
Data grouping method
Netdata supports average (the default), sum and max grouping methods. The grouping method is used when the Netdata server is requested to return fewer points for a time-frame, compared to the number of points available.
You can give it per chart, using:
Netdata can change the rate of charts on the fly. So a charts that shows values per second can be turned to per minute (or any other, e.g. per 10 seconds), with this:
The above will provide the average rate per minute (60 seconds). Use 60 for
/minute, 3600 for
/hour, 86400 for
/day (provided you have that many
data-gtimesetting does not change the units of the chart. You have to change them yourself with
- This works only for
- Netdata may aggregate multiple points to satisfy the
data-pointssetting. For example, you request
per minutebut the requested number of points to be returned are not enough to report every single minute. In this case Netdata will sum the
per secondraw data of the database to find the
per minutefor every single minute and then average them to find the average per minute rate of every X minutes. So, it works as if the data collection frequency was per minute.
dashboard.js will show all the dimensions of the chart. You can
select specific dimensions using this:
Netdata supports coma (
,) or pipe (
|) separated simple
patterns for dimensions. By default it
searches for both dimension IDs and dimension NAMEs. You can control the target
of the match with:
data-append-options="match-names". Spaces in
data-dimensions="" are matched
in the dimension names and IDs.
You can overwrite the title of the chart using this:
You can overwrite the units of measurement of the dimensions of the chart, using this:
dashboard.js has an internal palette of colors for the dimensions of the
charts. You can prepend colors to it (so that your will be used first) using
Extracting dimension values
dashboard.js can update the selected values of the chart at elements you
specify. For example, let's assume we have a chart that measures the bandwidth
of eth0, with 2 dimensions
out. You can use this:
Hiding the legend of a chart
On charts that by default have a legend managed by
dashboard.js you can remove
it, using this:
You can append Netdata REST API v1 data options, using this:
A few useful options are:
absoluteto show all values are absolute (i.e. turn negative dimensions to positive)
percentageto express the values as a percentage of the chart total (so, the values of the dimensions are added, and the sum of them if expressed as a percentage of the sum of all dimensions)
unalignedto prevent Netdata from aligning the charts (e.g. when requesting 60 seconds aggregation per point, Netdata returns chart data aligned to XX:XX:00 to XX:XX:59 - similarly for hours, days, etc - the
unalignedoption disables this feature)
match-namesis used to control what
Chart library performance
dashboard.js measures the performance of the chart library when it renders the
charts. You can specify an element ID you want this information to be
visualized, using this:
Syncing charts y-range
If you give the same
data-common-max="NAME" to 2+ charts, then all of them
will share the same max value of their y-range. If one spikes, all of them will
be aligned to have the same scale. This is done for the cpu interrupts and and
cpu softnet charts at the dashboard and also for the
of the Netdata home page.
The same functionality exists for
Syncing chart units
Netdata dashboards support auto-scaling of units. So,
MB can become
GB, etc dynamically, based on the value to be shown.
Giving the same
data-common-units= "NAME", 2+ charts can be forced
to always have the same units.
Setting desired units
Charts can be scaled to specific units with
data-desired-units=" UNITS". If
the dashboard can convert the units to the desired one, it will do.
Chart library settings
You can set the min and max values of the y-axis using
data-dygraph-valuerange=" [MIN, MAX] ".
You can set the max value of the chart using the following snippet:
Be aware that values that exceed the max value will get expanded (e.g. "41" is still 100%). Similar for the minimum:
If you specify both minimum and maximum, the rendering behavior changes. Instead
of displaying the
value based from zero, it is now based on the range that is
provided by the snippet:
In the first example, a value of
30, without specifying the minimum, fills the chart bar to '75 %
(100% / 40 * 30). However, in this example the range is now20
(40 - 20 = 20). The value30
will fill the chart to ** '50 %**, since it's in the middle between 20 and 40.
This scenario is useful if you have metrics that change only within a specific range, e.g. temperatures that are very unlikely to fall out of range. In these cases it is more useful to have the chart render the values between the given min and max, to better highlight the changes within them.
EasyPieCharts can render negative values with the following flag:
Negative values are rendered counter-clockwise.
Full example with EasyPieChart
This is a chart that displays the hotwater temperature in the given range of 40 to 50.