Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zurb/pizza
Better pie, donut, line, and bar graphs.
https://github.com/zurb/pizza
Last synced: 5 days ago
JSON representation
Better pie, donut, line, and bar graphs.
- Host: GitHub
- URL: https://github.com/zurb/pizza
- Owner: zurb
- License: mit
- Created: 2013-10-04T00:32:52.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2017-04-16T19:40:05.000Z (over 7 years ago)
- Last Synced: 2024-10-28T05:12:50.934Z (15 days ago)
- Language: JavaScript
- Homepage: http://zurb.com/playground/pizza-amore-charts-and-graphs
- Size: 1.18 MB
- Stars: 413
- Watchers: 56
- Forks: 64
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: MIT-LICENSE.txt
Awesome Lists containing this project
README
##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.
### Implementation
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.
```
- Water Buffalo (60)
- Bison (20)
- Sheep (12)
- Goat (32)
- Shetland Pony (50)
```
After you have created your legend, you can include your chart container anywhere on the page.
```
```
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.
### Data Options
You can pass options to the chart by using the `data-options` attribute on your legend:
```
- Goat (32)
```
Or on initialization:
```
Pizza.init('#myChart', {
data: [23, 44, 1, 29, 90]
});
```
### Custom Text
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.
```
```
Will render out `Goats 19% (32 total)` for example.
### Contributing
To contribute you must have Node and Grunt installed on your system.
Compiling:
```
npm install
bower install
grunt
```