Error: [ng:areq] Argument 'DoughnutCtrl' is not a function, got undefined

Question

when i use ng-controller='DoughnutCtrl' in dive it give the error

Error: [ng:areq] Argument 'DoughnutCtrl' is not a function, got undefined

My chart.js

'use strict';

angular.module('portfolioApp',['chart.js']).
controller('DoughnutCtrl', function ($scope) 
{
$scope.data = [[
    {
      value: 80,
      color: "#949FB1",
      highlight: "#A8B3C5",
      label: "80%"
    },
    {
      value: 20,
      color: "#4D5360",
      highlight: "#616774",
      label: ""
    }

  ],
  [
    {
      value: 70,
      color: "#000000",
      highlight: "#A8B3C5",
      label: "80%"
    },
    {
      value: 30,
      color: "#ffffff",
      highlight: "#167740",
      label: ""
    }
  ]];
 });

and my html code is

<div ng-app="portfolioApp">
<div ng-controller="DoughnutCtrl">

  <canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas>

</div>

i'm new to angularjs can anyone explain why this is happening?.

either head or html, but not in something like $(document).ready — guramidev, Oct 12 '15 at 05:41
yes you should include it on page after angular.js and app.js — A.T., Oct 12 '15 at 06:04

Sarjan Desai · Accepted Answer · 2015-10-12T12:52:34.737

Here the issue is you are trying to use directive tc-chartjs-doughnut in canvas element

<canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend></canvas>

which is tc-angular-chartjs module.

In angular module as angular.module('portfolioApp',['chart.js'])., you are adding chart.js module which is other module of angularj-chart.js

So using different modules for HTML and JS will not work. You have to select one module and add it's related dependancy in project.

In HTML you have defined chart-options="options" which is not bind to $scope so you have to defined looked like below.

$scope.options = {}; // Add available options based on requirement

Check below working example:

angular
  .module('myModule',['tc.chartjs'])
  .controller( 'DoughnutCtrl', function( $scope ) {

    // Chart.js Data
    $scope.data = [
      {
        value: 300,
        color:'#F7464A',
        highlight: '#FF5A5E',
        label: 'Red'
      },
      {
        value: 50,
        color: '#46BFBD',
        highlight: '#5AD3D1',
        label: 'Blue'
      },
      {
        value: 100,
        color: '#FDB45C',
        highlight: '#FFC870',
        label: 'Yellow'
      }
    ];

  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://carlcraig.github.io/tc-angular-chartjs/js/vendor/tc-angular-chartjs.min.js"></script>
<div ng-app="myModule">
  <div ng-controller="DoughnutCtrl">

    <canvas tc-chartjs-doughnut chart-data="data" auto-legend></canvas>

  </div>
</div>

I removed "tc-chartjs-doughnut chart-options="options"" still get the same error. — learnwhat, Oct 12 '15 at 09:00
Issue must be related to adding all required file which is highlighted in my answer...Make sure that all files are included in HTML...If issue occur create [jsfiddle](http://jsfiddle.net) — Sarjan Desai, Oct 12 '15 at 09:02
Check updated answer with working code and compare it with your code to understand and solve the issue which is explain in my answer... :) — Sarjan Desai, Oct 12 '15 at 12:54
ok will do man. thank you very much. can you tell me your skype or other social account name?. again thank you very much — learnwhat, Oct 12 '15 at 12:57

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

It's possible you've defined the module portfolioApp twice.

// This creates the module and passes dependencies to it
angular.module('portfolioApp', ['chart.js']);

vs

// This only gets the module after it's been defined
angular.module('portfolioApp');

Try this question here, seems to be a similar error:
Error: [ng:areq] from angular controller

edited May 23 '17 at 12:15

Community

1
1

answered Oct 12 '15 at 05:42

Artless

4,522
1
25
40

Do you have multiple places in your code that define the module? If so, they must all be getters, while the definition (passing ['charts.js'] to it) must happen only once. – Artless Oct 12 '15 at 06:22
You can only create a module once. Calling `angular.module('name', [])` creates the module. Calling `angular.module('name')` gets the instance of the module you created. Are you sure you are creating it only once? – Artless Oct 12 '15 at 12:11
i used as name my app name. is it ok?. – learnwhat Oct 12 '15 at 12:45
I don't understand what you mean. – Artless Oct 12 '15 at 13:38
what should be included as name?. – learnwhat Oct 12 '15 at 14:50
The name of your module – Artless Oct 12 '15 at 16:02

score 0 · Answer 3 · answered Oct 12 '15 at 05:47

You just use below codes

'use strict';

  var app =   angular.module('portfolioApp',['chart.js']);
    app.controller('DoughnutCtrl', function ($scope) 
    {
    $scope.data = [[
        {
          value: 80,
          color: "#949FB1",
          highlight: "#A8B3C5",
          label: "80%"
        },
        {
          value: 20,
          color: "#4D5360",
          highlight: "#616774",
          label: ""
        }

      ],
      [
        {
          value: 70,
          color: "#000000",
          highlight: "#A8B3C5",
          label: "80%"
        },
        {
          value: 30,
          color: "#ffffff",
          highlight: "#167740",
          label: ""
        }
      ]];
     });

score 0 · Answer 4 · answered Oct 12 '15 at 06:15

I suppose you are referring to the example from this link : http://carlcraig.github.io/tc-angular-chartjs/doughnut/

As you can see the module you need to inject is 'tc.chartjs' not 'chart.js'. So fix it to be :

var app =   angular.module('portfolioApp',['tc.chartjs']);

Next ensure your div with ng-app encloses the div with ng-controller

<div ng-app="portfolioApp">
  <div ng-controller="DoughnutCtrl">
     <canvas tc-chartjs-doughnut chart-options="options" chart-data="data" auto-legend>
      </canvas>
   </div>
</div>

Error: [ng:areq] Argument 'DoughnutCtrl' is not a function, got undefined

4 Answers4