Chart.js library not working on device



I have a problem using Chart.js for my project hopefully you can help me:

I am loading the library in my index.html:

<script src="libraries/Chart.min.js"></script>

Then in my Controller I set up my chart like this:

var summary= new Chart(ctx).Doughnut(data, {});

In the browser everything loads fine, but on my Android device I get an Reference error saying that Chart is not defined in the logcat output. I have no clue where to start debugging this. I also tried other paths for the library and loading it directly from the web but with the same result.

I even tried to copy the content of Chart.min.js into my controller without any success.

Any ideas what I am doing wrong?

Thanks in advance!


You have to load this script before ionic.

Could you show us your index.html?


I figured it out. Your tip that it wasn’t in the right order made me have a look at my index.html again. I am using the Yeoman generator for Ionic and my project therefore uses Bower. I think there was an Issue with that. Initially I included the Library right below cordova.js. Now I included it right below

<!-- build:js scripts/scripts.js -->

Here is my complete index.html for reference:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <!-- build:css styles/vendor.css -->
    <!-- <link rel="stylesheet" href="vendor/some.contrib.css"> -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/ionic/release/css/ionic.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

    <!-- build:js scripts/vendor.js -->
    <!-- <script src="vendor/someContribJs.js"></script> -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/collide/collide.js"></script>
    <script src="bower_components/ionic/release/js/ionic.js"></script>
    <script src="bower_components/ionic/release/js/ionic-angular.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

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

    <!-- build:js scripts/scripts.js -->
    <script src="libraries/Chart.min.js"></script>
    <script src="scripts/config.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/login.ctrl.js"></script>
    <script src="scripts/controllers/summary.ctrl.js"></script>
    <!-- endbuild -->

  <body ng-app="GeneratedWithSideMenu" ng-controller="MainCtrl">