Angular-Chart.js it doesn't display the chart

Question

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

Which browser you are using. Are u using any Dev tools , Anything in the console ? — Syed Ekram Uddin, May 10 '16 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. — Belal Mostafa Amin, May 10 '16 at 15:55

Dustin Hodges · Accepted Answer · 2016-05-10T16:43:20.790

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="angularjs@1.5.3" 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>

edited May 10 '16 at 16:43

answered May 10 '16 at 16:38

Dustin Hodges

4,110
3
26
41

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 – Belal Mostafa Amin May 10 '16 at 16:55
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 – Dustin Hodges May 10 '16 at 16:57
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. – Dustin Hodges May 10 '16 at 17:00
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 ? – Belal Mostafa Amin May 10 '16 at 17:10
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 – Dustin Hodges May 10 '16 at 17:15
Got 404 for "https://raw.githubusercontent.com/jtblin/angular-chart.js/master/dist/angular-chart.min.css ".... – MobileEvangelist Oct 24 '16 at 10:12
Strange, I can't find that file anywhere. If I find it I'll update the answer – Dustin Hodges Oct 24 '16 at 14:21

score 0 · Answer 2 · answered May 10 '16 at 16:04

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>

answered May 10 '16 at 16:04

yBrodsky

4,981
3
20
31

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) @ – Belal Mostafa Amin May 10 '16 at 16:08
and still no thing is displayed – Belal Mostafa Amin May 10 '16 at 16:10

score 0 · Answer 3 · answered May 10 '16 at 16:06

0

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

answered May 10 '16 at 16:06

Syed Ekram Uddin

2,907
2
29
33

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 – Belal Mostafa Amin May 10 '16 at 16:11
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 – Belal Mostafa Amin May 10 '16 at 16:15

score 0 · Answer 4 · answered May 10 '16 at 19:17

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.

Angular-Chart.js it doesn't display the chart

4 Answers4

Linked