added both gauge.js and easypiechart
Costa Tsaousis (ktsaou) committed
Jan 16, 2016 at 21:08 UTC
d7f9fbc761cc2385e0f6e865e510e87da0c8f197
1 file changed
+121
-62
web/demo2.html
+121
-62
@@ -14,9 +14,11 @@
14
<style>
15
.easyPieChartLabel {
16
color: #222 !important;
17
- font-weight: normal;
17
text-shadow: #333 0px 0px 1px !important;
19
- -webkit-font-smoothing: none;
18
+ }
19
+ .gaugeChartLabel {
20
+ color: #222 !important;
21
+ text-shadow: #CCC 0px 0px 1px !important;
22
}
23
</style>
24
@@ -24,73 +26,130 @@
26
</head>
27
<body style="background-color: #444;">
28
27
-<div style="width: 100%; padding-top: 10px; text-align: center; color: #AAA">
28
- <div style="font-size: 8vw;">why netdata?</div>
29
+<div class="container" style="width: 90%; padding-top: 10px; text-align: center; color: #AAA">
30
+ <div style="font-size: 7vw;">why netdata?</div>
31
<br/>
30
- <div style="font-size: 2vw;">These charts update the same data...</div>
31
- <div data-netdata="example.random"
32
- data-dimensions="random1"
33
- data-chart-library="easypiechart"
34
- data-easypiechart-max-value="100"
35
- data-width="25%"
36
- data-after="-600"
37
- data-points="600"
38
- data-title="1/second (netdata default)"
39
- data-units="something"
40
- data-colors="#CCC"
41
- data-easypiechart-trackcolor="#555"
42
- data-easypiechart-scalecolor="#555"
43
- ></div>
44
- <div data-netdata="example.random"
45
- data-dimensions="random1"
46
- data-chart-library="easypiechart"
47
- data-easypiechart-max-value="100"
48
- data-width="20%"
49
- data-after="-600"
50
- data-points="300"
51
- data-title="Updates Every 2 Seconds"
52
- data-units="something"
53
- data-colors="#AAA"
54
- data-easypiechart-trackcolor="#555"
55
- data-easypiechart-scalecolor="#555"
56
- ></div>
57
- <div data-netdata="example.random"
58
- data-dimensions="random1"
59
- data-chart-library="easypiechart"
60
- data-easypiechart-max-value="100"
61
- data-width="17.5%"
62
- data-after="-600"
63
- data-points="120"
64
- data-title="Updates Every 5 Seconds"
65
- data-units="something"
66
- data-colors="#999"
67
- data-easypiechart-trackcolor="#555"
68
- data-easypiechart-scalecolor="#555"
69
- ></div>
70
- <div data-netdata="example.random"
71
- data-dimensions="random1"
72
- data-chart-library="easypiechart"
73
- data-easypiechart-max-value="100"
74
- data-width="15%"
75
- data-after="-600"
76
- data-points="10"
77
- data-title="Updates Every 1 Minute"
78
- data-units="something"
79
- data-colors="#888"
80
- data-easypiechart-trackcolor="#555"
81
- data-easypiechart-scalecolor="#555"
82
- ></div>
83
- <div style="font-size: 2vw;">Hover on the peaks and the lows of the chart below, to see the diff on the charts above!</div>
84
- <div data-netdata="example.random"
85
- data-dimensions="random1"
32
+ <div style="font-size: 2vw; color: white;">These charts visualize the same data...</div>
33
+
34
+
35
+ <!-- Nav tabs -->
36
+ <ul class="nav nav-tabs" role="tablist">
37
+ <li role="presentation" class="active"><a href="#gauge" aria-controls="gauge" role="tab" data-toggle="tab">Gauge.js</a></li>
38
+ <li role="presentation"><a href="#easypiechart" aria-controls="easypiechart" role="tab" data-toggle="tab">Easy Pie Chart</a></li>
39
+ </ul>
40
+
41
+ <!-- Tab panes -->
42
+ <div class="tab-content">
43
+ <div role="tabpanel" class="tab-pane active" id="gauge">
44
+
45
+ <div style="display: inline-block; width: 35.8%">
46
+ <div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
47
+ <br/>
48
+ <div data-netdata="example.random2"
49
+ data-dimensions="random"
50
+ data-chart-library="gauge"
51
+ data-gauge-max-value="32767"
52
+ data-width="100%"
53
+ data-after="-600"
54
+ data-points="600"
55
+ data-title="1/second (netdata default)"
56
+ data-units="important metric"
57
+ data-colors="#5A5"
58
+ data-gauge-stroke-color="#555"
59
+ data-gauge-pointer-color="#333"
60
+ ></div>
61
+ </div>
62
+ <div style="display: inline-block; width: 50%">
63
+ <div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/> <br/></div>
64
+ <div data-netdata="example.random2"
65
+ data-dimensions="random"
66
+ data-chart-library="gauge"
67
+ data-gauge-max-value="32767"
68
+ data-width="45%"
69
+ data-after="-600"
70
+ data-points="40"
71
+ data-title="Updates Every 15 Sec (<a href='https://github.com/OpenTSDB/opentsdb.net/blob/gh-pages/docs/source/user_guide/utilities/tcollector.rst#collecting-lots-of-metrics-with-tcollector' target='_blank'>OpenTSDB</a>)"
72
+ data-units="important metric"
73
+ data-colors="#C55"
74
+ data-gauge-stroke-color="#555"
75
+ data-gauge-pointer-color="#333"
76
+ ></div>
77
+ <div data-netdata="example.random2"
78
+ data-dimensions="random"
79
+ data-chart-library="gauge"
80
+ data-gauge-max-value="32767"
81
+ data-width="45%"
82
+ data-after="-600"
83
+ data-points="2"
84
+ data-title="Updates Every 5 Mins (your NMS)"
85
+ data-units="important metric"
86
+ data-colors="#C55"
87
+ data-gauge-stroke-color="#555"
88
+ data-gauge-pointer-color="#333"
89
+ ></div>
90
+ </div>
91
+ </div>
92
+ <div role="tabpanel" class="tab-pane" id="easypiechart">
93
+
94
+ <div style="display: inline-block; width: 25%">
95
+ <div style="font-size: 1.2vw; color: #666; padding-top: 10px;"><i class="fa fa-comment"></i> I can trace an issue like this</div>
96
+ <br/>
97
+ <div data-netdata="example.random2"
98
+ data-dimensions="random"
99
+ data-chart-library="easypiechart"
100
+ data-easypiechart-max-value="32767"
101
+ data-width="100%"
102
+ data-after="-600"
103
+ data-points="600"
104
+ data-title="1/second (netdata default)"
105
+ data-units="important metric"
106
+ data-colors="#5A5"
107
+ data-easypiechart-trackcolor="#555"
108
+ data-easypiechart-scalecolor="#555"
109
+ ></div>
110
+ </div>
111
+ <div style="display: inline-block; width: 40%">
112
+ <div style="font-size: 1.2vw; color: #666;"><i class="fa fa-comment"></i> Can you trace an issue like these?<br/> <br/></div>
113
+ <div data-netdata="example.random2"
114
+ data-dimensions="random"
115
+ data-chart-library="easypiechart"
116
+ data-easypiechart-max-value="32767"
117
+ data-width="45%"
118
+ data-after="-600"
119
+ data-points="40"
120
+ data-title="Updates Every 15 Sec (<a href='https://github.com/OpenTSDB/opentsdb.net/blob/gh-pages/docs/source/user_guide/utilities/tcollector.rst#collecting-lots-of-metrics-with-tcollector' target='_blank'>OpenTSDB</a>)"
121
+ data-units="important metric"
122
+ data-colors="#C55"
123
+ data-easypiechart-trackcolor="#555"
124
+ data-easypiechart-scalecolor="#555"
125
+ ></div>
126
+ <div data-netdata="example.random2"
127
+ data-dimensions="random"
128
+ data-chart-library="easypiechart"
129
+ data-easypiechart-max-value="32767"
130
+ data-width="45%"
131
+ data-after="-600"
132
+ data-points="2"
133
+ data-title="Updates Every 5 Mins (your NMS)"
134
+ data-units="important metric"
135
+ data-colors="#C55"
136
+ data-easypiechart-trackcolor="#555"
137
+ data-easypiechart-scalecolor="#555"
138
+ ></div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ <div style="font-size: 1.5vw;">Hover on the chart below, to see the selected value on the charts above!</div>
143
+ <div data-netdata="example.random2"
144
+ data-dimensions="random"
145
data-dygraph-theme="sparkline"
87
- data-width="90%"
146
+ data-width="100%"
147
data-height="20vh"
148
data-after="-600"
149
data-points="600"
150
data-title="1/second (netdata default)"
151
data-units="something"
93
- data-colors="#CCC"
152
+ data-colors="#888"
153
></div>
154
</div>
155
</body>