79 -
80 -
81 -
 82 -  83 - <!-- Unstyled gauge (All defaults) --> 84 - <div id="gauge0" class="gauge-container"></div> 85 -  86 -  87 - var gauge0 = Gauge(document.getElementById("gauge0")); 88 -  89 - 
90 -
91 -
92 -
93 -
94 -
95 - 96 - 97 -
98 -
99 -
 100 -  <div id="gauge1" class="gauge-container"></div> 101 -  102 - var gauge1 = Gauge( 103 - document.getElementById("gauge1"), 104 - { 105 - max: 100, 106 - dialStartAngle: -90, 107 - dialEndAngle: -90.001, 108 - value: 100, 109 - label: function(value) { 110 - return Math.round(value) + "/" + this.max; 111 - } 112 - } 113 - ); 114 -  115 - 
116 -
117 -
118 -
119 -
120 -
121 - 122 - 123 - 124 -
125 -
126 -
 127 -  128 - <div id="gauge2" class="gauge-container two"></div> 129 -  130 -  131 - var gauge2 = Gauge( 132 - document.getElementById("gauge2"), 133 - { 134 - min: -100, 135 - max: 100, 136 - dialStartAngle: 180, 137 - dialEndAngle: 0, 138 - value: 50, 139 - viewBox: "0 0 100 57", 140 - color: function(value) { 141 - if(value < 20) { 142 - return "#5ee432"; 143 - }else if(value < 40) { 144 - return "#fffa50"; 145 - }else if(value < 60) { 146 - return "#f7aa38"; 147 - }else { 148 - return "#ef4655"; 149 - } 150 - } 151 - } 152 - ); 153 -  154 - 
155 -
156 -
157 -
158 -
159 -
160 - 161 - 162 - 163 - 164 -
165 -
166 -
 167 -  168 - <div id="gauge3" class="gauge-container three"></div> 169 -  170 -  171 - var gauge3 = Gauge( 172 - document.getElementById("gauge3"), 173 - { 174 - max: 100, 175 - value: 50 176 - } 177 - ); 178 -  179 - 
180 -
189 -
190 -
 191 -  192 - <div id="gauge4" class="gauge-container four"></div> 193 -  194 -  195 - var gauge4 = Gauge( 196 - document.getElementById("gauge4"), 197 - { 198 - max: 100, 199 - dialStartAngle: 180, 200 - dialEndAngle: -90, 201 - viewBox: "0 0 57 57", 202 - value: 50 203 - } 204 - ); 205 -  206 - 
207 -
208 -
209 -
210 -
211 -
212 - 213 - 214 - 215 - 216 -
217 -
218 -
 219 -  220 - <div id="gauge5" class="gauge-container five"></div> 221 -  222 -  223 - var gauge5 = Gauge( 224 - document.getElementById("gauge5"), 225 - { 226 - max: 200, 227 - dialStartAngle: 0, 228 - dialEndAngle: -180, 229 - viewBox: "0 35 100 100", 230 - value: 50 231 - } 232 - ); 233 -  234 - 
235 -
236 -
237 -
238 -
239 -
240 - 241 - 242 - 243 - 244 -
245 -
246 -
 247 -  248 - <div id="gauge6" class="gauge-container six"></div> 249 -  250 -  251 - var gauge6 = Gauge( 252 - document.getElementById("gauge6"), 253 - { 254 - max: 100, 255 - dialStartAngle: 90.01, 256 - dialEndAngle: 89.99, 257 - dialRadius: 150, 258 - showValue: false, 259 - value: 50, 260 - } 261 - ); 262 -  263 - 
264 -
265 -
266 -
267 -
268 -