Skip to content

Instantly share code, notes, and snippets.

@emorydunn

emorydunn/tinydash.html

Last active September 19, 2024 08:46
Show Gist options
  • Save emorydunn/bec23fe0d7f9432298a7b3bbda6761e1 to your computer and use it in GitHub Desktop.
Save emorydunn/bec23fe0d7f9432298a7b3bbda6761e1 to your computer and use it in GitHub Desktop.
Download ZIP
A small single screen dashboard for NetData.
Raw
tinydash.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tiny Dash</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="[email protected]">
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://cloud.githubusercontent.com/assets/2662304/22945737/e98cd0c6-f2fd-11e6-96f1-5501934b0955.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>
<script>
var netdataTheme = 'slate';
</script>
<script type="text/javascript" src="dashboard.js?v20170724-1"></script>
<body>
<div style="width: 100%; text-align: center;">
<div>
<h1>System Overview</h1>
</div>
<div data-netdata="system.cpu"
data-chart-library="gauge"
data-title="CPU"
data-units="%"
data-gauge-max-value="100"
data-width="80%"
data-after="-420"
data-points="420"
data-colors="#22AA99"
role="application"></div>
<br/>
<div data-netdata="netdata.server_cpu"
data-dimensions="user"
data-chart-library="dygraph"
data-dygraph-theme="sparkline"
data-width="100%"
data-height="30px"
data-after="-60"
data-points="60"
data-colors="#22AA99"
></div>
<br>
<div data-netdata="net.enp8s0"
data-dimensions="received"
data-chart-library="easypiechart"
data-width="45%"
data-after="-60"
data-points="60"
data-title="enp8s0 Received"
data-colors="#55FF55"
></div>
<div data-netdata="net.enp8s0"
data-dimensions="sent"
data-chart-library="easypiechart"
data-width="45%"
data-after="-60"
data-points="60"
data-title="enp8s0 Sent"
data-colors="#FF5555"
></div>
<br>
<div data-netdata="system.ram"
data-dimensions="used|buffers|active|wired"
data-append-options="percentage"
data-chart-library="easypiechart"
data-title="Used RAM"
data-units="%"
data-easypiechart-max-value="100"
data-width="45%"
data-after="-420"
data-points="420"
data-colors="#EE9911"></div>
<div data-netdata="disk_space._"
data-dimensions="used|reserved_for_root"
data-append-options="percentage"
data-chart-library="easypiechart"
data-title="Used Disk"
data-units="%"
data-easypiechart-max-value="100"
data-width="45%"
data-after="-420"
data-points="420"
data-colors="#3C67C2"></div>
</div>
</body>
</html>
@dtlytics
Copy link

Thanks for publishing this, looks great on my RPI tft 4".
If anyone else is using this, simply put in /usr/share/netdata/web and give netdata file ownership, e.g.
chown netdata:netdata tinydash.html

@guim31
Copy link

guim31 commented Oct 29, 2020

As I use Netdata on my UNRAID server, please someone could tell me where I should put this file ?
Thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment