This time I will share jQuery Plugin and tutorial about Elegant SVG Pie & Donut Chart Plugin – listtopie.js, hope it will help you in programming stack.
File Size: | 31.8 KB |
---|---|
Views Total: | 3881 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
listtopie.js is a jQuery pie chart plugin that makes uses of snap.svg to render an elegant, customizable, animated, nice-looking pie & donut charts for your statistic data.
More features:
- Supports both static and dynamic data (JSON).
- Optional draw & Round animations.
- Allows to rotate slice on click.
- Shows more information on hover.
- Useful API methods and event listeners.
See Also:
Table Of Contents:
How to use it:
1. To get started, make sure both jQuery, snap.svg, and the listtopie.js plugin are loaded in the document.
1 |
< link rel = "stylesheet" href = "/path/to/css/jquery.listtopie.css" /> |
2 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/cdn/snap.svg-min.js" ></ script > |
4 |
< script src = "/path/to/js/jquery.listtopie.min.js" ></ script > |
2. Insert percentage values into the pie slides as follows. You can specify the background color of each slice using the data-lcolor
attribute:
1 |
< div id = "static" > |
2 |
< div data-lcolor = "#ffb6b9" >50.2< span >jQuery</ span ></ div > |
3 |
< div data-lcolor = "#fae3d9" >25.6< span >JavaScript</ span ></ div > |
4 |
< div data-lcolor = "#bbded6" >28.2< span >HTML</ span ></ div > |
5 |
< div data-lcolor = "#61c0bf" >25< span >CSS</ span ></ div > |
6 |
</ div > |
3. Call the plugin on the top container to draw a basic pie chart on the webpage.
1 |
$( '#static' ).listtopie({ |
2 |
// options |
3 |
}); |
4. Load data from JSON.
01 |
var data = [ |
02 |
{ |
03 |
"name" : "Slice 1" , |
04 |
"value" : "20" , |
05 |
"color" : "blue" |
06 |
}, |
07 |
{ |
08 |
"name" : "Slice 2" , |
09 |
"value" : "50" , |
10 |
"color" : "blue" |
11 |
}{ |
12 |
"name" : "Slice 3" , |
13 |
"value" : "50" , |
14 |
"color" : "yellow" |
15 |
} |
16 |
] |
1 |
$( '#element' ).listtopie({ |
2 |
dataJson: data |
3 |
}); |
5. All plugin options to customize the pie & donut graph.
001 |
$( '#static' ).listtopie({ |
002 |
003 |
// chart size |
004 |
size: 'auto' , |
005 |
006 |
// start angle |
007 |
startAngle: 0, |
008 |
009 |
// 'simple', 'fade', or 'round' |
010 |
drawType: 'round' , |
011 |
012 |
// true = all slices have the same size |
013 |
use<a href= "https://www.jqueryscript.net/menu/" >Menu</a>: false , |
014 |
015 |
// stroke color |
016 |
strokeColor: '#cccccc' , |
017 |
018 |
// background color |
019 |
backColor: '#ffffff' , |
020 |
021 |
// font family |
022 |
fontFamily: 'Arial' , |
023 |
024 |
// font weight |
025 |
fontWeight: '400' , |
026 |
027 |
// opaticy level of background color |
028 |
backColorOpacity: '0.5' , |
029 |
030 |
// highlights slice on hover |
031 |
hoverEvent: true , |
032 |
033 |
// border color |
034 |
hoverBorderColor: 'gray' , |
035 |
036 |
// border width |
037 |
hoverWidth: 1, |
038 |
039 |
// slice color |
040 |
hoverSectorColor: false , |
041 |
042 |
// enables animation on hover |
043 |
hoverAnimate: true , |
044 |
045 |
// animation speed (draw) |
046 |
speedDraw: 500, |
047 |
048 |
// animation speed (rotate) |
049 |
speedRotate: 200, |
050 |
051 |
// displays percent sign at the end |
052 |
usePercent: false , |
053 |
054 |
// easing function |
055 |
easingType: mina.linear, |
056 |
057 |
// stroke width |
058 |
strokeWidth: 2, |
059 |
060 |
// indent from center |
061 |
marginCenter: 0, |
062 |
063 |
// displays values in the slices |
064 |
setValues: true , |
065 |
066 |
// text color |
067 |
textColor: '#000000' , |
068 |
069 |
// text size |
070 |
textSize: '12' , |
071 |
072 |
// list data |
073 |
listVal: false , |
074 |
listValClick: false , |