Analog Gauge Javascript icon

Analog Gauge Javascript

Go to Website
Hot or Not
Analog Gauge Javascript

Description

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

Categories

Miscellaneous

Tags

analoggaugejavascript

External listing. code.market does not sell this product and does not process payment for it. Pricing, payment, delivery, licensing, refunds, and support are handled by the third-party merchant on its own website. We may earn an affiliate commission from a referral. Details.

Products of the Week.

Submit