“D3pie is a simple, highly configurable script built on d3.js for creating simple, attractive pie charts. It’s free, open source.”
Let’s see what d3Pie can do for your:
Configuration options include:
- Pie / donut charts
- Title, subtitle, footer text and control over placement
- Inner and outer labels; choice of what data appears in each
- Automatic percentage calculations
- Unlimited data set size
- Full control over font, font sizes, colors
- Segment colors
- Small segment grouping
- Background color / transparency
- Load, mouseover and click effects
- Callbacks for click, mouseover, mouseout events
- API for refreshing and recreating pie dynamically
- Control over pie chart padding, pie chart x/y offsets
Now lets start with the implementation
Resources you need : only 2 libraries.
Create a simple index.html file and write this code in that and open with browser.
index.html
This will generate the out put like:
Lets make it complex now:
notice the line in above code: “Here further operations/animations can be added like click event, cut out the clicked pie section.”
Let’s create a file complex.html and add this content.
complex.html
This will generate the output like this:
Hope it helped you in your search for quick charting implementation.
Reference: d3Pie
Like and share it.