Skip to content

Samarthjainabout/speedometer-jquery-plugin

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 

Repository files navigation

Speedometer JQuery Plugin

This component meant to create the speedometer with various divisions and start / end / danger ant etc point value.

##How to add this component in your app?

1] Add 'speedometer.js' & 'speedometer.css' into your project js and css folder.

2] Add the '' on to your html file with required ID attributs

3] Call the spedometer method 'myfunc' as like '$("#myValues").myfunc({divFact:10,eventListenerType:'keyup'});'

###Demo URL http://rmanivannan.github.io/demos/speedometer-reusable/

Example Usage

<html>
  <head>
  <link href="css/speedometer.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
  	<input id="myValues" /><br>
  	<input id="myValues2" />
  </body>
  <script src="js/jquery.js"></script>
  <script src="js/speedometer.js"></script>
  <script type="text/javascript">
  	$("#myValues").myfunc({divFact:10,eventListenerType:'keyup'});
  	$("#myValues2").myfunc({divFact:30});
  </script>
</html>

=========================================

###Configuration Options:

* maxVal              /**Max value of the meter*/
* divFact             /**Division value of the meter*/
* dangerLevel         /**more than this leval, color will be red*/
* initDeg             /**reading begins angle*/
* maxDeg              /**total angle of the meter reading*/
* edgeRadius          /**radius of the meter circle*/
* speedNobeH          /**speed nobe height*/
* speedoNobeW         /**speed nobe width*/
* speedoNobeL         /**speed nobe left position*/
* indicatorRadius     /**radius of indicators position*/
* indicatorNumbRadius /**radius of numbers position*/
* speedPositionTxtWH  /**speedo-meter current value cont*/
* nobW                /**indicator nob width*/
* nobH                /**indicator nob height*/
* numbW               /**indicator number width*/
* numbH               /**indicator number height*/
* midNobW             /**indicator mid nob width*/
* midNobH             /**indicator mid nob height*/
* noOfSmallDiv        /**no of small div between main div*/
* eventListenerType   /**no of small div between main div*/

About

Speedometer Reusable JQuery plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 78.6%
  • CSS 17.2%
  • HTML 4.2%