Native AngularJS SVG chart directives with no other 3rd party JS dependencies.
The piechart directive uses a default radius of 10, this can be overridden using the radius
attribute.
The piechart-slice directive supports ng-repeat
.
<piechart radius="100">
<piechart-slice ng-repeat="slice in slices" value="{{slice.value}}" fill="{{slice.colour}}" stroke="white" />
</piechart>
function PiechartDemoCtrl($scope) {
var colours = {
0: '#428bca',
1: '#5cb85c',
2: '#5bc0de',
3: '#f0ad4e',
4: '#d9534f'
};
var slices = $scope.slices = [];
var Slice = function(val) {
this.value = val;
this.colour = colours[slices.length];
;
$scope.slices.push(new Slice(50));
$scope.slices.push(new Slice(200));
$scope.addSlice = function() {
$scope.slices.push(new Slice(10));
};
};
The linechart directive uses a default height and width of 200 and 300 respectively, this can be overridden using the h
and w
attributes.
The linechart-series directive supports ng-repeat
.
<linechart h="200" w="300">
<linechart-series ng-repeat="s in series" values="{{s.values}}" stroke="{{s.colour}}" stroke-width="2" fill="none"></linechart-series>
</linechart>
function LinechartDemoCtrl($scope) {
var colours = {
0: '#428bca',
1: '#5cb85c',
2: '#5bc0de',
3: '#f0ad4e',
4: '#d9534f'
};
var series = $scope.series = [];
var Series = function(vals) {
this.values = vals;
this.colour = colours[series.length];
};
$scope.addSeries = function() {
var len = series.length + 1;
series.push(new Series([12 * len, 15 * len, 9 * len, 22 * len]));
};
$scope.addSeries();
$scope.addSeries();
};