Simple jQuery Plugin For Creating SVG Based Gauges - Download Simple jQuery Plugin For Creating SVG Based Gauges

Download Simple jQuery Plugin For Creating SVG Based Gauges

By Posted on

This time I will share jQuery Plugin and tutorial about Simple jQuery Plugin For Creating SVG Based Gauges, hope it will help you in programming stack.

File Size: 8.35 KB
Views Total: 21381
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A lightweight (~5kb minified) jQuery plugin which allows you to draw a simple customizable gauge using SVG element.

How to use it:

1. Load the jquery-gauge.css in the header for basic gauge styles.

view source
1 <link href="jquery-gauge.css" rel="stylesheet">

2. Load the jquery-gauge.min.js after jQuery JavaScript library.

view source
1 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
2 <script src="jquery-gauge.min.js"></script>

3. Create an element that will serve as the container for the gauge.

view source
1 <div class="gauge"></div>

4. Render a customizable gauage inside the container element you just created.

view source
01 $('.gauge').gauge({
02   values: {
03     0 : '0',
04     20: '2',
05     40: '4',
06     60: '6',
07     80: '8',
08     100: '10'
09   },
10   colors: {
11     0 : '#666',
12     60: '#ffa500',
13     80: '#f00'
14   },
15   angles: [
16     180,
17     360
18   ],
19   lineWidth: 10,
20   arrowWidth: 20,
21   arrowColor: '#ccc',
22   inset:true,
23  
24   value: 30
25 });

Change log:

2016-10-05

  • cross-browser fix for SVG transform-origin arrow position

2015-08-26

  • percents sorting fixes

 

This awesome jQuery plugin is developed by henus. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: