Added Dygraph and EasyPieChart info to README.md (#4630)
Took the little info we had in the wiki and put it here. This page needs a lot of work
Chris Akritidis committed
Nov 12, 2018 at 23:40 UTC
7ebb74209ca9efe132fc9b5b439c410384ff9579
1 file changed
+78
web/gui/README.md
+78
@@ -26,3 +26,81 @@ For information on creating custom dashboards, see **[Custom Dashboards](custom/
26
- Gauge.js
27
- D3
28
- C3
29
+
30
+### Dygraph
31
+
32
+#### Settings
33
+
34
+[Example settings here](https://github.com/netdata/netdata/blob/e91f00d99f4965e985981b93fa46ef33f94dd726/web/dashboard.js#L3793)
35
+
36
+#### Value Range
37
+
38
+You can set the min and max values of the y-axis using `data-dygraph-valuerange="[MIN, MAX]"`
39
+
40
+### EasyPieChart
41
+
42
+#### Settings
43
+
44
+TBD
45
+
46
+#### Value Range
47
+
48
+You can set the max value of the chart using the following snippet:
49
+```html
50
+<div data-netdata="unique.id"
51
+ data-chart-library="easypiechart"
52
+ data-easypiechart-max-value="40"
53
+ ></div>
54
+```
55
+Be aware that values that exceed the max value will get expanded (e.g. "41" is still 100%). Similar for the minimum:
56
+```html
57
+<div data-netdata="unique.id"
58
+ data-chart-library="easypiechart"
59
+ data-easypiechart-min-value="20"
60
+ ></div>
61
+```
62
+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:
63
+```html
64
+<div data-netdata="unique.id"
65
+ data-chart-library="easypiechart"
66
+ data-easypiechart-min-value="20"
67
+ data-easypiechart-max-value="40"
68
+ ></div>
69
+```
70
+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 now `20` (40 - 20 = 20). The value `30` will fill the chart to **`50%`**, since it's in the middle between 20 and 40.
71
+
72
+This szenario 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.
73
+
74
+#### Negative Values
75
+
76
+EasyPieCharts can render negative values with the following flag:
77
+```html
78
+<div data-netdata="unique.id"
79
+ data-chart-library="easypiechart"
80
+ data-override-options="signed"
81
+ ></div>
82
+```
83
+Negative values are rendered counter-clockwise.
84
+
85
+#### Full example
86
+
87
+This is a chart that displays the hotwater temperature in the given range of 40 to 50.
88
+```html
89
+<div data-netdata="stiebeleltron_system.hotwater.hotwatertemp"
90
+ data-title="Hot Water Temperature"
91
+ data-decimal-digits="1"
92
+ data-chart-library="easypiechart"
93
+ data-colors="#FE3912"
94
+ data-width="55%"
95
+ data-height="50%"
96
+ data-points="1200"
97
+ data-after="-1200"
98
+ data-dimensions="actual"
99
+ data-units="°C"
100
+ data-easypiechart-max-value="50"
101
+ data-easypiechart-min-value="40"
102
+ data-common-max="netdata-hotwater-max"
103
+ data-common-min="netdata-hotwater-min"
104
+></div>
105
+```
106
+