##Pizza Pie Charts
Pizza is a responsive pie, donut, bar, and line graph charting library based on the Snap SVG framework from Adobe. It focuses on easy integration via HTML markup and CSS instead of JavaScript objects, although you can pass JavaScript objects to Pizza as well.
The first step is to create a key with a ul
and list elements that represent each piece of the pie with a data-pie-id
attribute pointing to the ID of your chart container.
<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>
After you have created your legend, you can include your chart container anywhere on the page.
<div id="svg"></div>
You can then style your chart with CSS or SCSS.
To initialize your charts, you can call Pizza.init();
at the end of the body of your page.
You can pass options to the chart by using the data-options
attribute on your legend:
<ul data-pie-id="svg" data-options='{"donut":"true"}'>
Or on initialization:
Pizza.init('#myChart', {
data: [23, 44, 1, 29, 90]
});
Setting data-text
on your li
allows you to override the default percent for pie piece labels. You have access to value
and percent
as variables. All variables are wrapped in handlebar.js style double brackets.
<li data-value="32" data-text="Goats {{percent}} ({{value}} total)">Goat (32)</li>
Will render out Goats 19% (32 total)
for example.
To contribute you must have Node and Grunt installed on your system.
Compiling:
npm install
bower install
grunt
pizza's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.