svg pie donut chart - Free Download Elegant SVG Pie & Donut Chart Plugin - listtopie.js

Free Download Elegant SVG Pie & Donut Chart Plugin – listtopie.js

Posted on

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.

svg pie donut chart - Free Download Elegant SVG Pie & Donut Chart Plugin - listtopie.js
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,
source : jquery.net