easy_pie_chart

Easy as pie

A little Rails wrapper for easy-pie-chart which adds the assets to the asset pipeline and adds some useful Rails helpers.

Usage

In Gemfile:

gem 'easy_pie_chart'

Configuration

In application.css manifest file:

/*
 * require jquery.easy-pie-chart
*/

Using Compass, f.ex in application.css.scss.erb

@import 'jquery.easy-pie-chart';

In application.js manifest file:

//= require jquery.easy-pie-chart

Optionally include excanvas as well, which can be used if/when canvas is not available!

Easy pie chart

Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These chars are highly customizable and very easy to implement.

Get started

Follow Configuration instructions above and also include jQuery 1.7+.

Add the pie-chart element to your site to represent chart and add the data-percent attribute with the percent number the pie chart should have:

<div class="chart" data-percent="73">73%</div>

The engine adds a view helper easy_pie_chart(percent, label = nil) to all Rails views ;) Use as follows

Simple HAML example:

= easy_pie_chart 73

ERB examples:

Or with a custom label:

<%= easy_pie_chart (6/24.0 * 100), '6 done' %>

Customize div options, fx css class:

<%= easy_pie_chart (6/24.0 * 100), '6 done', :class => 'pie-chart' %>

Finally you have to initialize the plugin with your desired configuration:

$(document).ready(function() {
    $('.chart').easyPieChart({
        //your configuration goes here
    });
});

Configuration parameter

You can pass a set of these options to the initialize function to set a custom behaviour and look for the plugin.

Property (Type)	Default	Description
barColor	#ef1e25	The color of the circular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color.
trackColor	#f2f2f2	The color of the track for the bar, false to disable rendering.
scaleColor	#dfe0e0	The color of the scale lines, false to disable rendering.
lineCap	round	Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
lineWidth	3	Width of the bar line in px.
size	110	Size of the pie chart in px. It will always be a square.
animate	false	Time in milliseconds for a eased animation of the bar growing, or false to deactivate.
onStart	$.noop	Callback function that is called at the start of any animation (only if animate is not false).
onStop	$.noop	Callback function that is called at the end of any animation (only if animate is not false).

Public plugin methods

If you want to update the current percentage of the a pie chart, you can call the `update method. The instance of the plugin is saved in the jQuery-data.

$(function() {
    //create instance
    $('.chart').easyPieChart({
        animate: 2000
    });
    //update instance after 5 sec
    setTimeout(function() {
        $('.chart').data('easyPieChart').update(40);
    }, 5000);
});
``

## Contributing to easy_pie_chart
 
* Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
* Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
* Fork the project.
* Start a feature/bugfix branch.
* Commit and push until you are happy with your contribution.
* Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
* Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.