angular has plugins which support several kinds of charts. one among them is http://www.chartjs.org/
lets see how to use it:
1. download the package from the above link
2. include css and js
<link href="css/angular-chart.min.css" rel="stylesheet">
<script src="js/Chart.min.js"></script>
3. use it in html
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" options="{showTooltips: false}"></canvas>
initialize values in your controller:
.controller('LineChartCtrl',function($scope){
$scope.labels = ["Jan", "","","Feb","","", "Mar", "","Apr", "May", "Jun", "Jul","Aug","Sep","Oct","Nov","Dec"];
// $scope.series = ['Series A', 'Series B'];
$scope.data = [
[13, 15,12,18,22,24,21,25]
];
})
lets see how to use it:
1. download the package from the above link
2. include css and js
<link href="css/angular-chart.min.css" rel="stylesheet">
<script src="js/Chart.min.js"></script>
3. use it in html
<canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" options="{showTooltips: false}"></canvas>
initialize values in your controller:
.controller('LineChartCtrl',function($scope){
$scope.labels = ["Jan", "","","Feb","","", "Mar", "","Apr", "May", "Jun", "Jul","Aug","Sep","Oct","Nov","Dec"];
// $scope.series = ['Series A', 'Series B'];
$scope.data = [
[13, 15,12,18,22,24,21,25]
];
})
the library also supports gant,bar etc charts follow the above steps to use it.
No comments:
Post a Comment