Analog Gauge Javascript

Analog gauge is an instrument with a needle that you just transfer over a scale of numbers.Such an instrument is simulated in javascript and you’ll simply use it in your net pages.Υou can configure it as you need and put the quantity scale to measure models.Customise the looks of a gauge to simulate a speedometer, meter gauge, and many others.

Utilization

First add one div in your .html file.

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

Subsequent load the Javascript file.

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

Subsequent create occasion of Gauge ang give the id of div.

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

Now customization the gauge as you would like.

Instance:


gKm.Scale(1.8,1.5); // dimension scale of gauge
gKm.Place(-10,0); // place in div ingredient
gKm.MinValue=0; // min quantity to measure
gKm.MaxValue=220; // max quantity to measure
gKm.StartPos=-140; // begin place min quantity
gKm.EndPos=140; // begin place max quantity
gKm.Numbers=12; // counter quantity to displayed
gKm.Textual content='Km/h'; // textual content to show
gKm.FontSize=10; // dimension of numbers and textual content
gKm.NumberColor='#ffffff';
gKm.BackColor='#111111';
gKm.OutlineColor='#dd4433';
gKm.NeedleColor='#ffffff';
gKm.SetValue=120; // the needle strikes to 120
gKm.MoveTime=.3; // transfer time from one place to a different in seconds.(Default is .7 sec)

ONLY canvas.
NOT dependencies from different Plugins.
Suitable Browsers: Edge,Chrome,Firefox,Opera

Leave a Reply

Your email address will not be published.