HOW TO CUSTOM DASHBOARDS
- Go to your unraid Docker config tab
- Edit NetData Docker
- Click on "Add another Path, Port, Variable, Label or Device"
- Config Type: path
- name custom-web
- Container Path:
- Host Path:
- Access Mode: Read/Write
- Description: Path for custom dashboards
- Restart your netdata docker
- Go to http://unraid:19999/dashboards.html
- Copy the example in a new file dash.html in /mnt/user/appdata/netdata-web-custom
- Go to http://unraid:19999/custom/dash.html
- Check https://docs.netdata.cloud/web/gui/custom/#custom-dashboards for more information
Other tips
Increase refresh rate of graphs
To increase the refresh rate of the charts, you will need to add data-points="600" to each graph you want to increase its refresh rate, play with the number (600 in this example) to increase / decrease the refresh rate
Make the dashboard to update when lost its focus
Add the following script AFTER <script type="text/javascript" src="http://unraid:19999/dashboard.js"></script>
<script type="text/javascript">
NETDATA.options.current.destroy_on_hide = true;
NETDATA.options.current.concurrent_refreshes = true;
NETDATA.options.current.parallel_refresher = true;
NETDATA.options.current.stop_updates_when_focus_is_lost = false;
NETDATA.options.current.sync_selection = false;
</script>
Paint it Black (dark theme)
Add the following script BEFORE <script type="text/javascript" src="http://unraid:19999/dashboard.js"></script>
<script type="text/javascript">
var netdataTheme = "slate";
</script>
EXAMPLE of Dashboard for a 8 Core system:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom unRaid 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"
/>
<style type="text/css">
.row {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.col {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
.cell-1-3 {
width: 33%;
}
.cell-1-4 {
width: 25%;
}
.cell-1-5 {
width: 20%;
}
.cell-1-6 {
width: 16.66%;
}
.cell-1-8 {
width: 12.5%;
}
html body {
overflow-x: hidden;
}
html body .my-container {
padding: 12px;
/* background-color: #f0f000;
background-color: #ff9000; */
}
</style>
</head>
<body>
<div class="my-container">
<div class="row">
<div class="cell-1-6">
<div
data-netdata="sensors.k10temp_pci_00c3_temperature"
data-title="CPU Temperature"
data-points="600"
data-chart-library="gauge"
data-width="100%"
data-gauge-max-value="85"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-6">
<div
data-netdata="system.cpu"
data-title="CPU Load"
data-points="600"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-5">
<div
data-netdata="sensors.it8720_isa_0228_fan"
data-title="Pump"
data-points="600"
data-dimensions="fan4"
data-chart-library="gauge"
data-gauge-max-value="2000"
data-width="100%"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
</div>
<div class="row">
<div class="cell-1-8">
<div
data-netdata="cpu.cpufreq"
data-points="600"
data-dimensions="cpu0"
data-title="CPU 0 Frequency"
data-chart-library="gauge"
data-gauge-min-value="0"
data-gauge-max-value="4100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
<div
data-netdata="cpu.cpu0"
data-points="600"
data-title="CPU 0 Load"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-8 col">
<div
data-netdata="cpu.cpufreq"
data-points="600"
data-dimensions="cpu1"
data-title="CPU 1 Frequency"
data-chart-library="gauge"
data-gauge-max-value="4100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
<div
data-netdata="cpu.cpu1"
data-points="600"
data-title="CPU 1 Load"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-8">
<div
data-netdata="cpu.cpufreq"
data-points="600"
data-dimensions="cpu2"
data-title="CPU 2 Frequency"
data-chart-library="gauge"
data-gauge-max-value="4100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
<div
data-netdata="cpu.cpu2"
data-points="600"
data-title="CPU 2 Load"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-8">
<div
data-netdata="cpu.cpufreq"
data-points="600"
data-dimensions="cpu3"
data-title="CPU 3 Frequency"
data-chart-library="gauge"
data-gauge-max-value="4100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
<div
data-netdata="cpu.cpu3"
data-points="600"
data-title="CPU 3 Load"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-8">
<div
data-netdata="cpu.cpufreq"
data-points="600"
data-dimensions="cpu4"
data-title="CPU 4 Frequency"
data-chart-library="gauge"
data-gauge-max-value="4100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
<div
data-netdata="cpu.cpu4"
data-points="600"
data-title="CPU 4 Load"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-8">
<div
data-netdata="cpu.cpufreq"
data-points="600"
data-dimensions="cpu5"
data-title="CPU 5 Frequency"
data-chart-library="gauge"
data-gauge-max-value="4100"
data-width="100%"
data-gauge-start-color="#35a035"
data-gauge-stop-color="#a03535"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
<div
data-netdata="cpu.cpu5"
data-points="600"
data-title="CPU 5 Load"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-8">
<div
data-netdata="cpu.cpufreq"
data-points="600"
data-dimensions="cpu6"
data-title="CPU 6 Frequency"
data-chart-library="gauge"
data-gauge-max-value="4100"
data-width="100%"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
<div
data-netdata="cpu.cpu6"
data-points="600"
data-title="CPU 6 Load"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
<div class="cell-1-8">
<div
data-netdata="cpu.cpufreq"
data-points="600"
data-dimensions="cpu7"
data-title="CPU 7 Frequency"
data-chart-library="gauge"
data-gauge-max-value="4100"
data-width="100%"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
<div
data-netdata="cpu.cpu7"
data-points="600"
data-title="CPU 7 Load"
data-chart-library="gauge"
data-gauge-max-value="100"
data-width="100%"
data-gauge-generate-gradient="[0, 75, 80, 93, 100]"
data-gauge-gradient-percent-color-0="#35a035"
data-gauge-gradient-percent-color-75="#35a035"
data-gauge-gradient-percent-color-80="#f0f000"
data-gauge-gradient-percent-color-93="#ff9000"
data-gauge-gradient-percent-color-100="#ff2020"
></div>
</div>
</div>
<div class="row">
<div
data-netdata="sensors.k10temp_pci_00c3_temperature"
data-title="CPU Temperature"
data-chart-library="dygraph"
data-dygraph-valuerange="[25,85]"
data-width="100%"
data-height="165"
data-after="-3600"
></div>
</div>
<div class="row">
<div
data-netdata="sensors.it8720_isa_0228_temperature"
data-title="System Temperatures"
data-chart-library="dygraph"
data-dygraph-valuerange="[25,85]"
data-width="100%"
data-height="165"
data-after="-3600"
></div>
</div>
</div>
<script type="text/javascript">
var netdataTheme = "slate";
</script>
<script
type="text/javascript"
src="http://unraid:19999/dashboard.js"
></script>
<script type="text/javascript">
NETDATA.options.current.destroy_on_hide = true;
NETDATA.options.current.concurrent_refreshes = true;
NETDATA.options.current.parallel_refresher = true;
NETDATA.options.current.stop_updates_when_focus_is_lost = false;
NETDATA.options.current.sync_selection = false;
</script>
</body>
</html>
Hope this helps!