Yummy pies and donuts for AngularJS
Yummy pies and donuts for AngularJS applications. Built on top of the wonderful D3.js library.
Here is a demo page.
pie-chart.min.jswherever you want
A pie chart is called using this syntax :
The pie chart directives needs two attributes :
dataand
options. If one is missing, nothing happens.
Your data must be an array. Depending whether you wan a pie/donut or a gauge, the array can contain at least two rows, or only one.
$scope.data = [ {label: "one", value: 12.2, color: "red"}, {label: "two", value: 45, color: "#00ff00"}, {label: "three", value: 10, color: "rgb(0, 0, 255)"} ];
$scope.gauge_data = [ {label: "CPU", value: 75, suffix: "%", color: "steelblue"} ];
complementBrightness: optional (disabled by default). Expects a number between 0 and 100. If set, it will take the color of the chart, increase the brightness by a given percentage and use the new color for the complement.
colorComplement: optional (default is "white"). Defines the color of the complement. Will be ignored if
complementBrightnessis set.
Options must be an object. Depending whether you want a pie/donut or a gauge, additional settings can be required.
$scope.options = {thickness: 10};
thickness: optional (default is 10). Defines the chart's thickness and has an impact on the legend display (thicker chart means less space for legend).
$scope.gauge_options = {thickness: 5, mode: "gauge", total: 100};
thickness: optional (default is 10). Defines the chart's thickness and has an impact on the legend display (thicker chart means less space for legend).
mode: optional (default is ""). Can be "gauge" or anything else (but anything else will default to standard pie/donut mode). "gauge" only works when there is exactly one data row in the chart's
dataattribute.
total: optional (default is 100). Ignored if
modeis not "gauge". Make the chart able to display the data relatively to a maximum (for instance, if you want to display a percentage, the maximum should be 100).
Fetch the repo :
sh $ git clone https://github.com/angular-d3/pie-chart.git
Install stuff :
sh $ npm install
Install moar stuff :
sh $ bower install
Install teh uterz stuff :
sh $ grunt
Hack.
AngularJS is designed to be testable, and so is this project. It has a good coverage rate (between 85% and 95%), and we want to keep it this way.