0

I am trying to use Angular-chart.js it doesn't display anything for me here is my javascript and html page 

(function(){
 angular.module("app", ["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]
    ];
 });
})(); 
    
<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js
    "></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css
    " />
    <script src="angular-chart.min.js
    "></script>
    <script src="app.js"></script>
</head>

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

</body>

</html>

I don't understand where the error is, thanks in advance for your help

Improve this question
2
  • Which browser you are using. Are u using any Dev tools , Anything in the console ? Commented May 10, 2016 at 15:52
  • I am using google chrome, I have tried every possible markup, checked on my app.js many times, nothing in the console at all, no warnings, no errors, nothing. Commented May 10, 2016 at 15:55

4 Answers 4

Reset to default
3

It looks like angular-chart.js doesn't support version 2 of Chart.js. Below is a snippet, that shows a working chart. It includes v1.1.1 of chart.js

angular.module("app", ["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]
  ];
});
<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/jtblin/angular-chart.js/master/dist/angular-chart.min.css" />
  <script src="app.js"></script>
</head>

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

</html>

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

7 Comments

Man you are a hero :D It WORKED :D I want to give you 100 starts, it is been around 3 hours and I don't understand what to do :D thank you a million man really thanks alot
Glad to help :) I've used angular-chart.js before and like it a lot. Hopefully it gets updated to support v2 of chart.js
Also, if you find an answer helpful, please vote it up by clicking on the up arrow that's to the left of the answer. To accept an answer, click the check mark.
it tells me once I earn 15 reputation, only then I will be able to upvote, promise I will ;) , do u recommend using native chat.js ? I don't know on what bases should I decide whether to use any of them over the other ?
It really depends on your application. If you are using angular, you'll probably need to find a library that'll offer bindings to a native js charting library (like angular-chart.js). If you are only using angular so you can use the angular-chart.js library, it'd likely be better to just use the native libraries. There are a number of angular libraries that allow you to interact with different charting libraries although I've only used angular-chart.js
|
0

Your data binding is wrong

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

You have no variable chart-data nor chart-labels in your controller. You named them differently.

In fact, the attributes are in reverse order. Should be chart-data="data" chart-labels="labels"

Example from http://jtblin.github.io/angular-chart.js/

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

2 Comments

when I did what you advised, I found this error on the console: TypeError: (intermediate value)[e] is not a function at d (angular-chart.min.js:1) at Object.fn (angular-chart.min.js:1) at r.$digest (angular.js:15896) at r.$apply (angular.js:16160) at angular.js:1679 at Object.e [as invoke] (angular.js:4523) at c (angular.js:1677) at yc (angular.js:1697) at Zd (angular.js:1591) at angular.js:29013(anonymous function) @
and still no thing is displayed
0

In html data="chart-data" would be chart-data="data"

Improve this answer

2 Comments

Done, but still nothing , in fact , an error appeared which is :TypeError: (intermediate value)[e] is not a function at d (angular-chart.min.js:1) at Object.fn (angular-chart.min.js:1) at r.$digest (angular.js:15896) at r.$apply (angular.js:16160) at angular.js:1679 at Object.e [as invoke] (angular.js:4523) at c (angular.js:1677) at yc (angular.js:1697) at Zd (angular.js:1591) at angular.js:29013
can you give me a fully working example including the required scripts in the head to try it, for some reason, I think there is something wrong not with the code, but with the included angular.js, and the other scripts , because I can't find a problem in my markup or in my app,js
0

I was getting this error while trying your code:

(intermediate value)[e] is not a function angular chart

It seems there is a version mismatch, tried the same with my own project got the same error. Please take V1.1.1 of Chart.js, as already answered by @dustin.

Check this fiddle.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.