Search This Blog

Saturday 19 March 2016

Charts with AngularJS/Ionic

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]
    ];

})

the library also supports gant,bar etc charts follow the above steps to use it.

No comments:

Post a Comment