Search code examples
cssangularjssails.jsangular-chart

TypeError: (intermediate value)[type] is not a function


I am trying to display a simple chart following the guide here: http://jtblin.github.io/angular-chart.js/

I am using sails.js, angular, bootstrap and angular-chart.js

When I load the app, I get a blank image where a chart should be. I see this error in chrome dev tools:

TypeError: (intermediate value)[type] is not a function
at createChart (angular-chart.js:175)
at Object.fn (angular-chart.js:118)
at Scope.$get.Scope.$digest (angular.js:14308)
at Scope.$get.Scope.$apply (angular.js:14571)
at bootstrapApply (angular.js:1455)
at Object.invoke (angular.js:4203)
at doBootstrap (angular.js:1453)
at bootstrap (angular.js:1473)
at angularInit (angular.js:1367)
at angular.js:26304

Please forgive me but I don't know why that error is popping.

I have tried endless amounts of variations of the code below and feel this version is the closest I have gotten to a working sample.

View:

<head>
<link rel="stylesheet" href="/styles/angular-chart.css">
</head>

<body ng-app="DashboardModule" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>

<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.js"></script>
<script src="/js/dependencies/Chart.Core.js"></script>
<script src="/js/dependencies/angular-chart.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
</body>

Module:

angular.module('DashboardModule', ['chart.js']);

Controller:

angular.module('DashboardModule').controller("BarCtrl", 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]
];
});

Solution

  • I think the missing part was adding these two dependencies perhaps:
    -- chart.js
    -- angular-chart.js

    working version is here: https://jsfiddle.net/cwLja39j/

    FYI: for jsfiddle, github files can be added as "External Resources" by running them through rawgit.com first.


    Markup:

    <div ng-app="DashboardModule" ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" data="data" labels="labels"></canvas>
    </div>
    

    JS :

    angular.module("DashboardModule", ["chart.js"]).controller("BarCtrl", 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]
      ];
    });
    

    (used Chrome, no errors seen in console)