0

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?.

Improve this question
6
  • where do you place javascript? Commented Oct 12, 2015 at 5:39
  • where did i need to put the javascript?. Commented Oct 12, 2015 at 5:40
  • either head or html, but not in something like $(document).ready Commented Oct 12, 2015 at 5:41
  • did you include controller js on page ? Commented Oct 12, 2015 at 5:48
  • you mean lode the controller javascript?. Commented Oct 12, 2015 at 5:56

4 Answers 4

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I removed "tc-chartjs-doughnut chart-options="options"" still get the same error.
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
what you mean?. can you explain?.
Check updated answer with working code and compare it with your code to understand and solve the issue which is explain in my answer... :)
ok will do man. thank you very much. can you tell me your skype or other social account name?. again thank you very much
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

Improve this answer

6 Comments

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.
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?
i used as name my app name. is it ok?.
I don't understand what you mean.
what should be included as name?.
|
0

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: "" } ]]; });
Improve this answer

Comments

0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.