Zingchart is not defined error

I'm working with the mean.io starter project and I am trying to get a chart to display using zingchart.
When I inspect my code, I see a zingchart not defined error that looks like this.

enter image description here

I am new to using mean.io.
I should also mention that this is taking place in a new package that I created called "dashboard"

Here is my controller (dashboard.js):

(function() {
  'use strict';

  /* jshint -W098 */

  angular
    .module('mean.dashboard', ['zingchart-angularjs'])
    .controller('DashboardController', function($scope) {
      $scope.myJson = {
    type : 'line',
    series : [
      { values : [54,23,34,23,43] },
      { values : [10,15,16,20,40] }
      ]
};

});
})();

My html file (index.html):

<html ng-app="mean.dashboard" ng-init="checkCircle()">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>
<script src="dashboard.js"></script>

<body ng-controller="DashboardController" ng-cloak layout="column">

    <!-- graph here -->
    <h1>Graph Test</h1>
    <div ng-controller="DashboardController">
    <div zingchart id="myChart" zc-json="myJson" zc-height=500 zc-width=600></div>
  </div>
  </div>
  </div>
</body>
</html>

My app.js file:

'use strict';

/*
 * Defining the Package
 */
var Module = require('meanio').Module;

var Dashboard = new Module('dashboard', ['zingchart-angularjs']);

/*
 * All MEAN packages require registration
 * Dependency injection is used to define required modules
 */

Dashboard.register(function(app, auth, database, circles) {

  //We enable routing. By default the Package Object is passed to the routes
  Dashboard.routes(app, auth, database, circles);

  //We are adding a link to the main menu for all authenticated users
  Dashboard.menus.add({
    title: 'dashboard',
    link: 'dashboard',
    roles: ['authenticated'],
    menu: 'main'
  });

  Dashboard.angularDependencies(['zingchart-angularjs']);

  return Dashboard;
  });

1 answer

  • answered 2017-06-17 19:44 Sajeetharan

    With your code i see lot of issues, let me simplify your code and show the mistakes,

    <html ng-app="mean.dashboard" ng-init="checkCircle()">
    

    you cannot have ng-init with inside the html , it needs to be placed inside the body, also ng-controllers are duplicated. You need to have it only in one place.

    Check the demo below

    Demo

    (function() {
      'use strict';
      angular
        .module('mean.dashboard', ['zingchart-angularjs'])
        .controller('DashboardController', function($scope) {
          $scope.myJson = {
        type : 'line',
        series : [
          { values : [54,23,34,23,43] },
          { values : [10,15,16,20,40] }
        ]
    };
    
        });
    })();
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-2.2.2.min.js"></script>
    <script src= "https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/zingchart-angularjs-1.0.4.js"></script>
    <body ng-app="mean.dashboard">
      <div ng-controller="DashboardController" id="resizable">
        <div zingchart id="chart-1" zc-json="myJson" zc-width="100%" zc-height="100%"></div>
      </div>
    </body>