🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Dynameter is a tiny jQuery plugin used to generate & animate semicircular gauges/meters with support for real-time value updates.

gauge meter

Documentation

jQuery-DynaMeter

http://github.com/tlei123/jquery-dynameter

by Tze Lei ([email protected])

See Demos at http://tze1.com/dynameter/

Setup and Usage:

Link jquery.dynameter.css stylesheet into your head section [adjust path as needed]:

<link rel="stylesheet" type="text/css" href="css/jquery.dynameter.css"> 

Link jquery core library and jquery.dynameter.js into your body section, at the bottom [adjust path as needed]:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.dynameter.js"></script> 

Add a div with a unique id to your body section:

<div id="#meterDiv"></div> 

Initialize and assign it to a variable [put this script tag below the DynaMeter script tag]:

<script type="text/javascript">   var $myMeter = null;   $( function () {     $myMeter = $('#meterDiv').dynameter({       // REQUIRED.       label: 'meter',       value: 50,       min: 0,       max: 100,       unit: 'units'     });   }); </script> 

Update your meter-instance's value-indicator with DynaMeter's changeValue method on you variable:

$myMeter.changeValue(88); 

See http://tze1.com/dynameter/ for more details.


You May Also Like