Zingchart: can't get it working? Reference error: zingchart is not defined

Question

I am trying to make some charts with Zingchart but I can't seem to get it working. I installed it using the bower install. On the website they say you need to verify your directory, and I do see that mine is diffrent from what they show.

Theirs:

 bower_components
 -- zingchart
    -- zingchart.min.js
    -- modules
       -- ...
    -- custom
       -- ...

Mine:

 bower_compentents
 -- zingchart
    -- client
       -- zingchart.min.js
       -- modules
          -- ...

The error I get when I want to build a standard chart is the following:

ReferenceError: zingchart is not defined

It points to the part in the code where the chart is renderd:

 zingchart.render({ 
        id:'chartDiv',
        data:chartData,
        height:400,
        width:600
    });

I am using javascript and angular. What am I doing wrong?

Answer 1

1. Are you including the script in your html file?

2. Are you direct injecting the zingchart module into your app? e.g. var app = angular.module('myapp', [ 'zingchart-angularjs' ]);

3. Are your scripts in the correct order in your .html ( must be loaded in order ) angular > zingchart > your zingchart render code.

Answer 2

It appears the page that you are referencing from is outdated since the repository file structure has changed as you had experienced. The error you are receiving is related to the file not being included in your html properly. Instead you should include zingchart as follows: <script src="bower_components/zingchart/client/zingchart.min.js"></script> .

Have you checked out the ZingChart-AngularJS directive? It could be useful in your development since you are using AngularJS