All the guages are styled via CSS. See gauge-test.css for styling for each of these gauges below.
<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"),
{
max: 100,
dialStartAngle: 180,
dialEndAngle: 0,
value: 50
}
);
<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,
value: 50
}
);
<div id="gauge5" class="gauge-container five"></div>
var gauge5 = Gauge(
document.getElementById("gauge5"),
{
max: 200,
dialStartAngle: 0,
dialEndAngle: -180,
value: 50
}
);
<div id="gauge6" class="gauge-container six"></div>
var gauge6 = Gauge(
document.getElementById("gauge6"),
{
max: 100,
dialStartAngle: 90.01,
dialEndAngle: 89.99,
radius: 150,
displayValue: false,
value: 50,
}
);