Web dashboards overview¶
Because Netdata is a health monitoring and performance troubleshooting system, we put a lot of emphasis on real-time, meaningful, and context-aware charts.
We bundle Netdata with a dashboard and hundreds of charts, designed by both our team and the community, but you can also customize them yourself.
There are two primary ways to view Netdata’s dashboards:
The standard web dashboard that comes pre-configured with every Netdata installation. You can see it at
You can also view all the data Netdata collects through the REST API v1.
Netdata’s charts are far from static. They are interactive, real-time, and work with your mouse, touchpad, or touchscreen!
Hover over any chart to temporarily pause it and see the exact values presented as different dimensions. Click or tap stop the chart from automatically updating with new metrics, thereby locking it to a single timeframe.
You can change how charts show their metrics by zooming in or out, moving forward or backward in time, or selecting a specific timeframe for more in-depth analysis.
Whenever you use a chart in this way, Netdata synchronizes all the other charts to match it. Chart synchronization even works between separate Netdata agents if you connect them using the My nodes menu!
You can change how charts show their metrics in a few different ways, each of which have a few methods:
|Manipulation||Method #1||Method #2||Method #3|
|Reset charts to default auto-refreshing state||
|Select a certain timeframe||
|Pan forward or back in time||
|Zoom to a specific timeframe||
Here’s how chart synchronization looks while zooming and panning:
You can also perform all these actions using the small rewind/play/fast-forward/zoom-in/zoom-out buttons that appear in the bottom-right corner of each chart.
Charts, contexts, families¶
Before customizing the standard web dashboard, creating a custom dashboard, configuring an alarm, or writing a collector, it’s crucial to understand how Netdata organizes metrics into charts, dimensions, families, and contexts.
A chart is an individual, interactive, always-updating graphic displaying one or more collected/calculated metrics. Charts are generated by collectors.
Here’s the system CPU chart, the first chart displayed on the standard dashboard:
Netdata displays a chart’s name in parentheses above the chart. For example, if
you navigate to the system CPU chart, you’ll see the label: Total CPU
utilization (system.cpu). In this case, the chart’s name is
Netdata derives the name from the chart’s context.
A dimension is a value that gets shown on a chart. The value can be raw data or calculated values, such as percentages, aggregates, and more.
Charts are capable of showing more than one dimension. Netdata shows these
dimensions on the right side of the chart, beneath the date and time. Again, the
system.cpu chart will serve as a good example.
system.cpu chart is showing many dimensions, such as
irq, and more.
Note that other applications sometimes use the word series instead of dimension.
A family is one instance of a monitored hardware or software resource that needs to be monitored and displayed separately from similar instances.
For example, if your system has multiple disk drives at
will put each interface into their own family. Same goes for software resources,
like multiple MySQL instances. We call these instances “families” because the
charts associated with a single disk instance, for example, are often related to
each other. Relatives, family… get it?
When relevant, Netdata prefers to organize charts by family. When you visit the
Disks section, you will see your disk drives organized into families, and
each family will have one or more charts:
In the screenshot below, the disk family
sdb shows a few gauges, followed by a
few of the associated charts:
Netdata also creates separate submenu entries for each family in the right navigation page so you can easily navigate to the instance you’re interested in. Here, Netdata has made several submenus under the Disk menu.
A context is a way of grouping charts by the types of metrics collected and dimensions displayed. Different charts with the same context will show the same dimensions, but for different instances (families) of hardware/software resources.
For example, the Disks section will often use many contexts (
disk.util, and so on). Netdata then creates an
individual chart for each context, and groups them by family.
Netdata names charts according to their context according to the following
[context].[family]. A chart with the
disk.util context, in the
sdb family, gets the name
disk_util.sdb. Netdata shows that name in the
top-left corner of a chart.
Given the four example contexts, and two families of
will create the following charts and their names:
And here’s what two of those charts in the
disk.io context look like under
As you can see in the screenshot, you can view the context of a chart if you hover over the date above the list of dimensions. A tooltip will appear that shows you two pieces of information: the collector that produces the chart, and the chart’s context.
Netdata also uses contexts for alarm
templates. You can create an
alarm for the
net.packets context to receive alerts for any chart with that
context, no matter which family it’s attached to.
Positive and negative values on charts¶
To improve clarity on charts, Netdata dashboards present positive values for
received and negative
values for metrics representing
Netdata charts showing the bandwidth and packets of a network interface.
received is positive and
sent is negative.
Netdata charts automatically zoom vertically, to visualize the variation of each metric within the visible timeframe.
stacked chart, automatically switches to an auto-scaled
chart when a single dimension is selected.
Netdata uses the
dashboards.js file to define, configure, create, and update
all the charts and other visualizations that appear on any Netdata dashboard.
You need to put
dashboard.js on any HTML page that’s going to render Netdata
The custom dashboards documentation contains examples of such custom HTML pages.
We build the
dashboards.js file by concatenating all the source files located
web/gui/src/dashboard.js/ directory. That’s done using the provided
cd web/gui make
If you make any changes to the
src directory when developing Netdata, you
should regenerate the
dashboard.js file before you commit to the Netdata