README.md in easy_as_pie-0.1.0 vs README.md in easy_as_pie-0.1.2

- old
+ new

@@ -46,28 +46,37 @@ Get started ----------- Follow Configuration instructions above and also include jQuery 1.7+. -The second step is to add a element to your site to represent chart and add the `data-percent` attribute with the percent number the pie chart should have: +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_as_pie(percent, label = nil)` to all Rails views ;) +Use as follows +Simple HAML example: + ```haml = easy_as_pie 73 ``` +ERB examples: + Or with a custom label: ```erb <%= easy_as_pie (6/24.0 * 100), '6 done' %> ``` -6 out of 24 done is 25% :) +Customize `div` options, fx css `class`: +```erb +<%= easy_as_pie (6/24.0 * 100), '6 done', :class => 'pie-chart' %> +``` + Finally you have to initialize the plugin with your desired configuration: ```javascript $(document).ready(function() { $('.chart').easyPieChart({ @@ -88,11 +97,11 @@ <th>Description</th> </tr> <tr> <td><strong>barColor</strong></td> <td>#ef1e25</td> - <td>The color of the curcular 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.</td> + <td>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.</td> </tr> <tr> <td><strong>trackColor</strong></td> <td>#f2f2f2</td> <td>The color of the track for the bar, false to disable rendering.</td> @@ -137,21 +146,21 @@ 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. -<script type="text/javascript"> +```javascript $(function() { //create instance $('.chart').easyPieChart({ animate: 2000 }); //update instance after 5 sec setTimeout(function() { $('.chart').data('easyPieChart').update(40); }, 5000); }); -</script> +`` ## Contributing to easy_as_pie * 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.