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.

Simple jQuery Plugin For Creating SVG Based Gauges - Download Simple jQuery Plugin For Creating SVG Based Gauges
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: