jquery.listtopie.js

jquery.listtopie.js is a jQuery plugin that enables you to create your own unique, fully customizable SVG pie chart from your HTML code. Also, you can use Listtopie to implement menus and timelines.

Example 1 Basic Usage

Largest producers by natural gas production (million m3)
766,200United States
635,500Russia
184,800Iran
165,000Qatar
149,90Canada
  
$('.rowtest1').listtopie({
		  size:'auto',  
		  marginCenter:2,
		  infoText:true,
		  setValues:true,
		  infoTextBlockOpacity:'0.8'
	});

Example 2 Use list with value

38.4Coal
23.2Natural Gas
16.3Hydro
10.4Nuclear fission
3.7Oil
8Non hydro renew
2016 World [civil] power generation by source [IEA, 2018]

Example 3 Loading JSON

Car exports by country (2017)
Click on the list item

Example 4 Several drawing options

Simple
50.2
25.6
28.2
25.2
Fade animation
18.2
25.6
34.2
15.2
Round animation
10.2
35.6
28.2
18.2

Example 5 Use as menu and rotate animation

Click on the sector
4 Oct 1957The world's first artificial satellite
28 May 1959First creatures to return alive from space
12 Apr 1961The first man in space
16 June 1963The first woman in space
18 March 1965First-ever spacewalk
20 July 1969First man on the Moon
19 Apr 1971The first space station is launched
7 Feb 1984'Free-flying' in space
20 Nov 1998Assembly of ISS begins
28 Apr 2001First space tourist
10 key moments in space exploration

Example 6 Several options for setting the origin

0 degrees
50.2
25.6
54.2
56.2
56.2
90 degrees
18.2
25.6
24.2
14.2
180 degrees
10.2
35.6
28.2
18.2
20.2
270 degrees
10.2
35.6
28.2
18.2

Example 7 Use methods and events

25
32
80
50
20

$('#button').on('click',function(){
	$('.element').listtopie('hoverGoTo',2);
});



$('#button').on('click',function(){
	$('.element').listtopie('changeGoTo',1);
});



$('#button').on('click',function(){
	$('.element').listtopie('listtopieSetOption', 'drawType', 'fade', true);
});



$('#button').on('click',function(){
	$('.element').listtopie('destroy');
});



$('#button').on('click',function(){
	$('.element').listtopie('refresh');
});



$('#button').on('click',function(){
	var v = $('.element').listtopie('getSectorAttr',1,'note');
});

Some more examples

Use easing
50.2
25.6
28.2
25
Set indent from center
25.2
25.6
34.2
30.2
22.2
80.6
30.2
45.2
Use Google Fonts
List
To
Pie

License

The plugin is under MIT License