diff options
Diffstat (limited to 'web/gui/custom/README.md')
| -rw-r--r-- | web/gui/custom/README.md | 61 |
1 files changed, 0 insertions, 61 deletions
diff --git a/web/gui/custom/README.md b/web/gui/custom/README.md index 733ef5211..323f1b56b 100644 --- a/web/gui/custom/README.md +++ b/web/gui/custom/README.md @@ -69,69 +69,8 @@ header: </html> ``` -## 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 `stream.conf`**__ - -`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! - -### Configure Dash - -First, rename the file so it doesn't get overwritten. For instance, with a webroot at `/usr/share/netdata/web`: -``` -cp /usr/share/netdata/web/dash-example.html /usr/share/netdata/web/dash.html -``` - -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. - -```js -/* -* TUTORIAL: Change this to the URL of your netdata host -* If you use netdata behind a reverse proxy, add a second parameter for the reverse proxy url like so: -* new Dash('http://localhost:19999', 'https://my-domain.com/stats'); -*/ -var dash = new Dash('http://localhost:19999'); -``` - -### The `dash-*` Syntax - -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: -``` -<div class="dash-graph" <---- Use class dash-graph for line graphs, etc - data-dash-netdata="system.cpu" <---- REQUIRED: Use data-dash-netdata to set the data source - data-dygraph-valuerange="[0, 100]"> <---- OPTIONAL: This overrides the default config. Any other data-* attributes will -</div> be added to the generated div, so you can set any desired options here - -<div class="dash-chart" <---- Use class dash-chart for pie charts, etc. CHARTS ARE SQUARE - data-dash-netdata="system.io" <---- REQUIRED: Use data-dash-netdata to set the data source - data-dimensions="in" <---- Use this to override or append default options - data-title="Disk Read" <---- Use this to override or append default options - data-common-units="dash.io"> <---- Use this to override or append default options -</div> -``` - -To change the sizes of graphs and charts, find the `Dash.options` object in `dash.html` and set your preferences: -```js -/* -* TUTORIAL: Change your graph/chart dimensions here. Host columns will automatically adjust. -* Charts are square! Their width is the same as their height. -*/ -this.options = { - graph_width: '40em', - graph_height: '20em', - chart_width: '10em' // Charts are square -}; -``` - -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! - --- - ## dashboard.js To add Netdata charts to any web page (dedicated to Netdata or not), you need to |