Angles.js not working with Ionic


#1

Hey everyone,

I’ve currently got angles.js and charts.js included in my index.html like so:

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    
    <!-- SocialSharing js -->
    <script src="js/SocialSharing.js"></script>
    <!-- Chart js -->
    <script src="js/Chart.min.js"></script>
    <!-- Angles js -->
    <script src="js/angles.js"></script>```

In my app.js, I have the following:

```angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ui.router', 'angles'])```

This is all as recommended here: https://github.com/lgsilver/angles

I then place the directive in one of my templates:

`<canvas chart type="Bar" options="options" data="chart" width="300" height="300"></canvas>`

However, I get the following error in my console:

TypeError: undefined is not a function
at Object.fn (http://localhost:8100/js/angles.js:62:43)
at Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20221:29)
at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20486:24)
at done (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16098:45)
at completeRequest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16303:7)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16242:11) ionic.bundle.js:17763
TypeError: Cannot read property ‘draw’ of undefined
at Object.fn (http://localhost:8100/js/angles.js:69:29)
at Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20221:29)
at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20486:24)
at done (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16098:45)
at completeRequest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16303:7)
at XMLHttpRequest.xhr.onreadystatechange (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16242:11) ```

Not sure how I can fix this?

Any help is appreciated.

Thanks!


#2

You have to include angles.js before chart.js.


#3

Hmmm, I don’t think it’s that.

I just tried it now:

ReferenceError: Chart is not defined
    at link (http://localhost:8100/js/angles.js:82:29)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14862:44
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14471:13)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13875:15)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13878:13)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14465:24)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13875:15)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14465:24)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13875:15)
    at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13780:30) <canvas chart="" type="Bar" options="options" data="chart" width="300" height="300"> ionic.bundle.js:17763
ReferenceError: Chart is not defined
    at Object.fn (http://localhost:8100/js/angles.js:53:33)
    at Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20221:29)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20486:24)
    at done (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16098:45)
    at completeRequest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16303:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16242:11) ionic.bundle.js:17763
TypeError: Cannot read property 'draw' of undefined
    at Object.fn (http://localhost:8100/js/angles.js:69:29)
    at Scope.$digest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20221:29)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20486:24)
    at done (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16098:45)
    at completeRequest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16303:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16242:11) ionic.bundle.js:17763

There are more errors than before… have you been able to get it to work, perhaps?


#4

Sorry, I was mistaken. You were doing it the right way. I’m testing and I get the same error I think the angles library could have some errors.


#5

does work good if your doing it right ;-D

i think you forgot to set the data in your controller:
like this:

$scope.linechart = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

here a demo with all charts:

http://codepen.io/Auro/pen/cBqls?editors=101

#6

Thanks Auro!

I was talking about the angles.js library for Angular, however Charts.js stand alone will do just fine.


#7

well i used angles.js…
as far as i know angles.js is an angular wrapper for chart.js

look at my pen.

and i got the same errors like you when im not defining the data…


#8

Thanks for that! I saw the pen, but didn’t realise that you had included angles.js at the bottom of your controller. Very much appreciated!