All the guages are styled via CSS. See gauge-test.css for styling for each of these gauges below.
<!-- Unstyled gauge (All defaults) -->
<div id="gauge0" class="gauge-container"></div>
var gauge0 = Gauge(document.getElementById("gauge0"));
<div id="gauge1" class="gauge-container"></div>
var gauge1 = Gauge(
document.getElementById("gauge1"),
{
max: 100,
dialStartAngle: -90,
dialEndAngle: -90.001,
value: 100,
label: function(value) {
return Math.round(value) + "/" + this.max;
}
}
);
<div id="gauge2" class="gauge-container two"></div>
var gauge2 = Gauge(
document.getElementById("gauge2"),
{
min: -100,
max: 100,
dialStartAngle: 180,
dialEndAngle: 0,
value: 50,
viewBox: "0 0 100 57",
color: function(value) {
if(value < 20) {
return "#5ee432";
}else if(value < 40) {
return "#fffa50";
}else if(value < 60) {
return "#f7aa38";
}else {
return "#ef4655";
}
}
}
);
<div id="gauge3" class="gauge-container three"></div>
var gauge3 = Gauge(
document.getElementById("gauge3"),
{
max: 100,
value: 50
}
);
<div id="gauge4" class="gauge-container four"></div>
var gauge4 = Gauge(
document.getElementById("gauge4"),
{
max: 100,
dialStartAngle: 180,
dialEndAngle: -90,
viewBox: "0 0 57 57",
value: 50
}
);
<div id="gauge5" class="gauge-container five"></div>
var gauge5 = Gauge(
document.getElementById("gauge5"),
{
max: 200,
dialStartAngle: 0,
dialEndAngle: -180,
viewBox: "0 35 100 100",
value: 50
}
);
<div id="gauge6" class="gauge-container six"></div>
var gauge6 = Gauge(
document.getElementById("gauge6"),
{
max: 100,
dialStartAngle: 90.01,
dialEndAngle: 89.99,
dialRadius: 150,
showValue: false,
value: 50,
}
);