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 -

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 -

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 -

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 -

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 -

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 -