"Pizza pie charts by Zurb"
Bootstrap 3.0.0 Snippet by johndrova

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
<div class="row">
<div class="col-md-3">
<ul data-pie-id="svg">
<li data-value="60">Water Buffalo (60)</li>
<li data-value="20">Bison (20)</li>
<li data-value="12">Sheep (12)</li>
<li data-value="32">Goat (32)</li>
<li data-value="50">Shetland Pony (50)</li>
</ul>
</div>
<div class="col-md-3">
<div id="svg"></div>
</div>
<div class="col-md-3">
<ul data-pie-id="my-cool-chart" data-options='{"donut": "true"}'>
<li data-value="36">Pepperoni</li>
<li data-value="14">Sausage</li>
<li data-value="8">Cheese</li>
<li data-value="11">Mushrooms</li>
<li data-value="7">Chicken</li>
<li data-value="24">Other</li>
</ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* line 20, ../sass/pizza.scss */
[data-pie-id] li:nth-child(0) {
color: blue;
}
/* line 20, ../sass/pizza.scss */
[data-pie-id] li:nth-child(1) {
color: #4d00ff;
}
/* line 20, ../sass/pizza.scss */
[data-pie-id] li:nth-child(2) {
color: #9900ff;
}
/* line 20, ../sass/pizza.scss */
[data-pie-id] li:nth-child(3) {
color: #e500ff;
}
/* line 20, ../sass/pizza.scss */
[data-pie-id] li:nth-child(4) {
color: #ff00cc;
}
/* line 20, ../sass/pizza.scss */
[data-pie-id] li:nth-child(5) {
color: #ff0080;
}
/* line 20, ../sass/pizza.scss */
[data-pie-id] li:nth-child(6) {
color: #ff0033;
}
/* line 26, ../sass/pizza.scss */
ul[data-pie-id] {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
;(function ($, window, document, undefined) {
'use strict';
var Pizza = {
version : '0.0.1',
settings : {
donut: false,
donut_inner_ratio: 0.4, // between 0 and 1
percent_offset: 35, // relative to radius
stroke_color: '#333',
stroke_width: 0,
show_percent: true, // show or hide the percentage on the chart.
animation_speed: 500,
animation_type: 'elastic' // options: backin, backout, bounce, easein,
// easeinout, easeout, linear
},
init : function (scope, options) {
var self = this;
this.scope = scope || document.body;
var pies = $('[data-pie-id]', this.scope);
$.extend(true, this.settings, options)
if (pies.length > 0) {
pies.each(function () {
return self.build($(this), options);
});
} else {
this.build($(this.scope), options);
}
this.events();
},
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React

Questions / Comments: