0👍
You can use chart.js
with angular by injecting it.
If you want to change the type just set the type on the HTML
DEMO
angular.module("app", ["chart.js"])
.controller("BarCtrl", function($scope) {
$scope.commonEstimationStats = {
rates: [{
"direction": {
"id": 13,
"month": "2016",
"type": 1
},
"points": 5
}, {
"direction": {
"id": 14,
"month": "2017",
"type": 1
},
"points": 3
}]
};
$scope.labels = [];
$scope.data = [];
angular.forEach($scope.commonEstimationStats.rates, function(key, value) {
$scope.labels.push(key.direction.month);
$scope.data.push(key.points);
})
$scope.datasetOverride = [{
fill: true,
backgroundColor: [
"#66ff33",
"#36A2EB",
"#FFCE56"
]
}, {
fill: true,
backgroundColor: [
"#ffff00",
"#46BFBD",
"#FDB45C"
]
}];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.0/Chart.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
</head>
<body>
<div ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-pie" chart-data="data" chart-dataset-override="datasetOverride" chart-series="series" chart-labels="labels" chart-options="options"></canvas>
</div>
</body>
</html>
Source:stackexchange.com