[Download] 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

Kindly Note: We update new contents like WordPress Themes, Plugins, PHP Scripts everyday. But remember that you should never use this items in a commercial website. All the contents posted here for development & testing purpose only. We’re not responsible for any damage, use at your own RISK! We highly recommend to buy Analog Gauge Javascript from the The Developer ( Antonis_Ntit ) website. Thank you.
Download = Analog Gauge Javascript-[Updated].zip