Analog Gauge Javascript

Analog gauge is an instrument with a needle that you move over a scale of numbers.Such an instrument is simulated in javascript and you can easily use it in your web pages.Υou can configure it as you want and put the number scale to measure units.Customize the appearance of a gauge to simulate a speedometer, meter gauge, etc.

Usage

First add one div in your .html file.

<div id='gaugeDiv' style="width: 750px; height: 700px;background-color: rgb(145, 145, 145); "></div>

Next load the Javascript file.

<script src='gauge.js' ></script>

Next create instance of Gauge ang give the id of div.

var gKm = new Gauge('gaugeDiv'); // gKm instance

Now customization the gauge as you wish.

Example:

gKm.Scale(1.8,1.5); // size scale of gauge gKm.Position(-10,0); // position in div element gKm.MinValue=0; // min number to measure gKm.MaxValue=220; // max number to measure gKm.StartPos=-140; // start position min number gKm.EndPos=140; // start position max number gKm.Numbers=12; // counter number to displayed gKm.Text='Km/h'; // text to display gKm.FontSize=10; // size of numbers and text gKm.NumberColor='#ffffff'; gKm.BackColor='#111111'; gKm.OutlineColor='#dd4433'; gKm.NeedleColor='#ffffff'; gKm.SetValue=120; // the needle moves to 120 gKm.MoveTime=.3; // move time from one position to another in seconds.(Default is .7 sec)

ONLY canvas. NOT dependencies from other Plugins. Compatible Browsers: Edge,Chrome,Firefox,Opera