<!DOCTYPE html>
<html>
<head>
<title>je5 "stats" Scalable Vector Graphics stats Pie Graph</title><meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
<style>
svg {
cursor: pointer;
}
</style>
</head>
<body>
<svg id="pie" style="display:none" width="100%" height="900" viewBox="193 8 710 1806"></svg>
<script type="text/javascript">
$('#pie').je5({
sort:'stats',
draw:{
type:'pie',
att:{
size:2,//scale pie
dates:{
squares:{//colored squares, and titles
att:{
x:900,
y:200,
width:30,
height:30
},
separation:50
},
perc:[//sharing percentages
10,
20,
30,
10,
10,
20
],
'text-perc':{//style text percentages
att:{
fill:'#fff',
'font-size':'180%',
'font-family':'Arial',
'text-anchor':'middle'
},
position:1.1
},
'text-titles':{//style text titles
att:{
x:944,
y:226,
fill:'red',
'font-size':'180%',
'font-family':'Arial',
'text-anchor':'start'
},
separation:50
},
balloon:{//balloons over portions
att:{
width:540,
height:100,
fill:'#fff',
opacity:0.7,
stroke:'#41f',
'stroke-width':5,
rx:3,
ry:3
},
separation:50,
text:{//style text balloons
fill:'red',
'font-size':'135%',
'font-family':'Arial',
'text-anchor':'start'
},
text_separation:{
x:40,
y:30
},
comments:{
fill:'#000',
'font-size':'140%',
'font-family':'Arial',
'text-anchor':'start'
},
comments_separation:{
x:10,
y:60
}
},
attrs:{/* it is not mandatory, only if you want some specific colors
fill:[
'purple',
'blue',
'orange',
'#000',
'#ccc',
'#ddd'
],*/
'stroke':[
'#fff',
'#fff',
'#fff',
'#fff',
'#fff',
'#fff'
],
'stroke-width':[
2,
2,
2,
2,
2,
2
],
titles:[
'Cats:',
'Ducks:',
'Dolphins:',
'Horses:',
'Dogs:',
'Eagles:'
],
comments:[
' ■ Domestic carnivorous mammal round head',
' ■ Aquatic birds Anseriformes flattened peak',
' ■ Whales and 2-3 m long, with large head',
' ■ Mammal perissodactyle about 1,5 m. in height',
' ■ Domestic carnivorous mammal of the family Canidae',
' ■ raptors hawks, approximately 2 m wingspan'
]
}
}
}
}
}).show('slow');
</script>
</body>
</html>