Solid Gauges
solidgauge.htm
(hint: right click, save as)
1<!--
2 Test/Development/Documentation page; install as plugin to test
3-->
4
5<style>
6.solidgauge .highcharts-yaxis-grid .highcharts-grid-line,
7.solidgauge .highcharts-yaxis-grid .highcharts-minor-grid-line {
8 display: none;
9}
10.solidgauge .highcharts-pane {
11 fill: #eee;
12 fill-opacity: 1;
13 stroke: #aaa;
14 stroke-width: 2px;
15}
16.night .solidgauge .highcharts-pane {
17 fill: #b1b1b1;
18 stroke: #b1b1b1;
19}
20.solidgauge .highcharts-point {
21 transition: fill 500ms, stroke 500ms; /* see stops styles note */
22}
23#throttle-gauge .highcharts-color-0 {
24 fill: #eee; /* initial colors = pane for smooth fade in */
25 stroke: #aaa;
26 fill-opacity: 0.8;
27 stroke-width: 3px;
28 stroke-opacity: 0.5;
29}
30#rpm-gauge .highcharts-color-0 {
31 fill: #55e;
32 stroke: none;
33}
34</style>
35
36<div class="panel panel-primary">
37 <div class="panel-heading">Solid Gauge</div>
38 <div class="panel-body">
39
40 <div class="receiver">
41
42 <div class="row">
43 <div class="col-sm-6">
44 <div class="metric chart" data-metric="v.e.throttle" style="height:220px">
45 <div class="chart-box solidgauge" id="throttle-gauge"/>
46 </div>
47 <p>
48 Note: stops don't work by default in styled mode. This example includes a simple redraw
49 event callback that applies styles from the stops. To get a smooth color transition,
50 the CSS transition time needs to be equal to the chart animation time.
51 </p>
52 </div>
53 <div class="col-sm-6">
54 <div class="metric chart" data-metric="v.m.rpm" style="height:220px">
55 <div class="chart-box solidgauge gaugechart" id="rpm-gauge"/>
56 </div>
57 <p>
58 Note: the <code>gaugechart</code> CSS class pulls in the default styling for the bands,
59 labels and ticks here. You can also copy those CSS rules from <code>ovms.css</code>
60 and do your own styling.
61 </p>
62 </div>
63 </div>
64
65 <p><button type="button" class="btn btn-default action-gendata">Generate random data</button></p>
66
67 </div>
68
69 </div>
70</div>
71
72<script>
73(function(){
74
75 /* Show page source: */
76 var pagesrc = $('#main').html();
77 $('.panel-heading').prepend('<button type="button" class="btn btn-sm btn-info action-showsrc"' +
78 ' style="float:right; position:relative; top:-5px;">Show page source</button>');
79 $('.action-showsrc').on('click', function() {
80 $('<div/>').dialog({
81 title: 'Source Code',
82 body: '<pre style="font-size:85%; height:calc(100vh - 230px);">'
83 + encode_html(pagesrc) + '</pre>',
84 size: 'lg',
85 });
86 });
87
88 /* Init throttle gauge: */
89 $("#throttle-gauge").chart({
90 chart: {
91 type: 'solidgauge',
92 spacing: [0, 0, 0, 0],
93 margin: [0, 0, 0, 0],
94 animation: { duration: 500, easing: 'easeOutExpo' },
95 events: {
96 // Apply stops styles on redraw:
97 redraw: function(ev) {
98 var y = this.series[0].yData[0], $pt = $(this.renderTo).find('.highcharts-point');
99 $.map(this.yAxis[0].stops, function(stop) { if (y >= stop[0]) $pt.css(stop[1]); });
100 },
101 },
102 },
103 title: { text: "Throttle", verticalAlign: "middle", y: 75 },
104 credits: { enabled: false },
105 tooltip: { enabled: false },
106 plotOptions: {
107 solidgauge: { dataLabels: { enabled: false }, overshoot: 1 }
108 },
109 pane: [{
110 startAngle: -90, endAngle: 90, size: '140%', center: ['50%', '85%'],
111 background: { innerRadius: '60%', outerRadius: '100%', shape: 'arc' },
112 }],
113 yAxis: [{
114 title: { text: '%' },
115 className: 'throttle',
116 reversed: false,
117 min: 0, max: 100,
118 stops: [
119 [0, { fill: '#afa', stroke: '#4f4' }],
120 [50, { fill: '#ffa', stroke: '#ff4' }],
121 [80, { fill: '#faa', stroke: '#f44' }],
122 ],
123 tickPixelInterval: 40, tickPosition: 'inside', tickLength: 13,
124 labels: { step: 2, distance: 10, x: 0, y: 0, zIndex: 2 },
125 }],
126 series: [{
127 name: 'Throttle', data: [40],
128 className: 'throttle',
129 animation: { duration: 0 },
130 }],
131 /* Update method: */
132 onUpdate: function(update) {
133 // Create gauge data set from metric:
134 var data = [ metrics["v.e.throttle"] ];
135 // Update chart:
136 this.series[0].setData(data);
137 },
138 });
139
140 /* Init rpm gauge: */
141 $("#rpm-gauge").chart({
142 chart: {
143 type: 'solidgauge',
144 spacing: [0, 0, 0, 0],
145 margin: [0, 0, 0, 0],
146 animation: { duration: 500, easing: 'easeOutExpo' },
147 },
148 title: { text: "RPM", verticalAlign: "middle", y: 75 },
149 credits: { enabled: false },
150 tooltip: { enabled: false },
151 plotOptions: {
152 solidgauge: { dataLabels: { enabled: false }, overshoot: 1 }
153 },
154 pane: [{
155 startAngle: -90, endAngle: 90, size: '140%', center: ['50%', '85%'],
156 background: { innerRadius: '70%', outerRadius: '100%', shape: 'arc' },
157 }],
158 yAxis: [{
159 title: { text: 'rpm' },
160 className: 'rpm',
161 reversed: false,
162 min: 0, max: 11000,
163 plotBands: [
164 { from: 0, to: 7000, className: 'green-band' },
165 { from: 7000, to: 9000, className: 'yellow-band' },
166 { from: 9000, to: 11000, className: 'red-band' },
167 ],
168 minorTickInterval: 'auto', minorTickLength: 5, minorTickPosition: 'inside',
169 tickPixelInterval: 40, tickPosition: 'inside', tickLength: 10,
170 labels: { step: 2, distance: 10, x: 0, y: 0, zIndex: 2 },
171 }],
172 series: [{
173 name: 'RPM', data: [4500],
174 className: 'rpm',
175 animation: { duration: 0 },
176 innerRadius: '72%',
177 radius: '92%'
178 }],
179 /* Update method: */
180 onUpdate: function(update) {
181 // Create gauge data set from metric:
182 var data = [ metrics["v.m.rpm"] ];
183 // Update chart:
184 this.series[0].setData(data);
185 },
186 });
187
188 /* Test metrics generator: */
189 $('.action-gendata').on('click', function() {
190 var td = {};
191 td["v.e.throttle"] = Math.random() * 100;
192 td["v.m.rpm"] = Math.random() * 11000;
193 $('.receiver').trigger('msg:metrics', $.extend(metrics, td));
194 });
195
196})();
197</script>