Two-dimensional Gauge Component With JS And SVG – DoubleGauge

Category: Chart & Graph , Javascript | November 23, 2017
Author: boonzaai
Views Total: 1,216
Official Page: Go to website
Last Update: November 23, 2017
License: MIT

Preview:

Two-dimensional Gauge Component With JS And SVG – DoubleGauge

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);

You Might Be Interested In:


Leave a Reply