Two-dimensional Gauge Component With JS And SVG – DoubleGauge

Preview:

Description:

DoubleGauge is an animated, SVG based, Vanilla JS gauge component which can be used to visualize Overall Equipment Efficiency values in percentage.

How to use it:

Create a container element for the gauge.

<div id="gauge">
</div>

Download and import the DoubleGauge.js into the html file.

<script src="DoubleGauge.js"></script>

Render a basic two-dimensional gauge inside the container.

• element: container element
• size: gauge size
• config: option obejct

// Icris.DoubleGauge(element, size, config)
var myGauge = new Icris.DoubleGauge('gauge',300);

Set the initial values.

myGauge.setValues(20, 30);

Animate the gauge at a given speed.

myGauge.animateRandom(250);