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.