Search code examples
javascripthtmlangularjschartsangular-chart

Angular Charts not display

Trying to work with angular charts with chart.js bundle taken from the cdn links. Angular is 1.5.7 and chart.js is 2.1.6. I get the following error:

angular.js:13708 TypeError: (intermediate value)[type] is not a function at createChart (angular-chart.js:197) at angular-chart.js:150 at Scope.$digest (angular.js:17286) at Scope.$apply (angular.js:17552) at bootstrapApply (angular.js:1754) at Object.invoke (angular.js:4709) at doBootstrap (angular.js:1752) at bootstrap (angular.js:1772) at angularInit (angular.js:1657) at angular.js:31468

HTML Code:

         <!DOCTYPE html>
<html>
    <head>
        <script src="scripts/angular/angular.js"></script>
        <script src="scripts/Chart.js"></script>
        <script src="scripts/angular/angular-chart.js"></script>

        <link rel="stylesheet" type="text/css" href="css/angular/angular-chart.css"/>

        <title>Practice</title>
    </head>

    <body ng-app="appName" ng-controller="indexController">

        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>

    </body>
    <script type="text/javascript" src="scripts/app.js"></script>
</html>

Javascript file:

var appOne = angular.module('appName', ['chart.js']);


appOne.controller("indexController", function ($scope) {
   $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});

Any ideas what is wrong and how to fix it? I don't understand the error too. Cheers :)

Solution

  • So the problem was due to the versions of angular-chart.js and chart.js were not compatible with each other.

    I ended up using the latest angular-chart.js 1.0.0-alpha version with chart.js 2.0.

    That fixed the issue! :)