[Chartjs]-Chart Js + Angular

by

3👍

✅

Got your chart working for you

http://plnkr.co/edit/YrI6RtQTkJkZde3Ynnhq?p=preview

    var app = angular.module('Chart', []);

    app.controller('MainController', ['$scope', function($scope) {

        $scope.greet = 'My Charts';

        data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                data: [65, 59, 80, 81, 56, 55, 40]
            }]
        };

        var ctx = document.getElementById("myChart").getContext("2d");
        var LineChart = new Chart(ctx).Line(data);

    }]);

    //Data//

1👍

here’s an example that worked for me.
in your page.html…

    <!-- in head tag include: jquery.js jquery-ui.js bootstrap.js angular.js chart.js angular-chart.js angular-chart.css then this js -->

    <script type="text/javascript">
      var app = angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope, $http) {       
            // get example [{"January":10},{"February":20},{"March":50},{"April":30},{"May":20},{"June":10},{"July":10}]
        $http.get('http://mywebsite/myjsondata').
            success(function(data) {
                var labelArray = [];
                var dataArray = [];                
        angular.forEach(data, function(item){
          var jsObj = angular.fromJson(item);
          for (var prop in jsObj) {
              //alert(prop + " is " + jsObj[prop]);
              labelArray.push(prop);
          dataArray.push(parseInt(jsObj[prop]));
           }
        }); 

        //$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
        // $scope.data = [[10, 20, 50, 30, 20, 10, 10]];
        $scope.labels = labelArray;                     
        $scope.data =   [dataArray]; 
                $scope.series = ['Send Totals']; // Series A
            })
            .error(function() {
        alert("Sorry. Unable to retrieve the data.");     
        }); 
    </script>

… in the body put this

    <div class="col-lg-6 col-sm-12 ng-scope" id="line-chart" ng-controller="LineCtrl">
          <div class="panel panel-default">
            <div class="panel-heading">Line Chart</div>
            <div class="panel-body">
        <canvas id="line" class="chart chart-line" chart-data="data"
         chart-labels="labels" chart-legend="true" chart-series="series"
         chart-click="onClick" >
        </canvas> 

        </div>
      </div>
    </div>

Leave a comment