When it comes to creating a basic pie chart, I like to use piety. It's simple to work with and functions well with JavaScript.
Here is an example in HTML:
<span class='pie' data-peity='{ "fill": ["#1ab394", "#d7d7d7", "#ffffff"]}'>0.52/1.561</span>
To make it work with JavaScript, you just need to add:
$(".pie").peity("pie");
Everything works great until you try using it within an AngularJS ng-repeat loop:
<div ng-repeat='item in data'>
<span class='pie' data-peity='{ "fill": ["#1ab394", "#d7d7d7", "#ffffff"]}'>{{item.start}}/{{item.end}}</span>
</div>
Unfortunately, that doesn't seem to be working as expected.
I thought maybe I needed a directive, so I created one:
app.directive('pieChart', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element) {
$timeout(function () {
element.peity("pie")
}, 100);
}
};
});
In the HTML, I then used:
<td><span data-peity='{ "fill": ["#1ab394", "#d7d7d7", "#ffffff"]}' pieChart>0.52/1.561</span></td>
without ng-repeat
However, even with the directive, it still doesn't seem to be working for me. I'm not sure why. Can anybody offer some assistance?