Hi,
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>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>"GeneratedWithSideMenu"</title>
<!-- 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 -->
</head>
<body ng-app="GeneratedWithSideMenu" ng-controller="MainCtrl">
<ion-nav-view></ion-nav-view>
</body>
</html>