4

I'm new to angular and web applications in general and I'm having a hard time trying to using zingchart.

What I'd like to do is create charts on an angular application through zingchart, but I'm getting this error on the browser console when I try to run my application.

I'm sure I've correctly added the 'zingchart-angularjs' dependency in my controller, but I'm not that sure about declaring the zingchart libraries inside my hmtl. I have a few questions, please:

1) I downloaded zingchart, but couldn't find the zingchart.min.js file after the download. How important is it to make the whole thing work? How to download it?

2) I work on eclipse. Should I install zingchart on eclipse as a plugin? If so, can someone help? So far I simply moved the zingchart-angularjs.js file to my project folder and declared its path on my html within the script tags. Will it work on eclipse?

3) How should I exactly declare the zingchart libs inside the html? I mean, should I inform the FULL path for the zingchart-angularjs.js file, like "script type="text/javascript" src="C:/kdi/workspace/cnt-ui-web/src/main/webapp/app/spas/cnt/partials/zingchart.min.js" /script or declaring the relative path is enough? If the latter, how should that be?

Thanks.

user2568276
  • 89
  • 2
  • 13

1 Answers1

5

Question 1) -> Yes you need to add zingchart.min.js or zingchart.js in your html. You can include the cdn for zingchart.min.js (zingchart cdn version) in html as,

 http://cdn.zingchart.com/zingchart.min.js

Question 2) -> No you need not install zingchart as a plugin. You just need to include the js files(libraries) in your project.

Question 3) -> No need to provide the full path. Relative path to your html file will do. See relative path vs absolute path

The sequence of .js files should be,

<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script type="text/javascript" src="zingchart-angularjs.js"></script>

Take care of the paths in src attribute, that's the path of file.

Sudhansu Choudhary
  • 3,322
  • 3
  • 19
  • 30
  • @sudhandu, thanks a lot for your reply. I'm still receiving the same message. I did my best to declare the paths correctly in the html and I think they are right now, but the error still comes up. Angular is a plugin in the eclipse that I work with. In this case should I still declare the angular.min.js lib in the html? One important thing to mention is that my html name is NOT "index.html". Will it work declaring the path in it? My question is because all examples I've found in the web show "index.html" as the html file name. – user2568276 Dec 08 '16 at 09:46
  • @user2568276 Don't use it as a plugin, use a cdn link for Angular js or download angular.min.js or angular.js and put it into your project (check which version is compatible with zingchart I think Angular 1.3 or 1.4 could be used, not sure). Provide the path for it. Keep the sequence in mind as I have told in the answer. – Sudhansu Choudhary Dec 08 '16 at 09:49
  • @user2568276 Overlooked the index.html part of your comment. No need to rename the file. It's all about which file is loaded in the browser. You can load whichever html file you have e.g., **localhost:8080/yourfile.html**. Do include all the .js files tags in your html as I've shown in the answer. Also do as per my suggestion in the above comment. – Sudhansu Choudhary Dec 08 '16 at 12:33
  • I finally got it to work. Thanks a lot. I have a final question, but I'm not sure this is the right place to ask. What I want to show in a pie chart is the set of occurrences happened during the validation of a file received from another company. I'll have a diff pie every day and the list of occurrences may vary from no occurrence to a few tenths. Each slice of the pie would be an occurrence and the size of the slice would mean the quantity of that occurrence. How to determine the COLOR for each slice of the pie considering that the # of slices (occurrences) is unpredictable? Thanks again. – user2568276 Dec 08 '16 at 22:48
  • @user2568276 Great that you got it working! Please accept and mark the answer if it helped. Regarding your other question, go through these answers, might give you a clue http://stackoverflow.com/questions/39656387/how-to-dynamically-set-zingchart-attribute-within-angular-ng-repeat?rq=1 and http://stackoverflow.com/questions/37389877/zingchart-change-plot-css-depending-on-x-scale?rq=1 Mean while I'll do my analysis and come back. Do mark the answer :) – Sudhansu Choudhary Dec 09 '16 at 08:06
  • @user2568276 You can use the palette array to define n number of colors as strings. So you can assign customized colors to each pie slice. Simply include enough colors to customize your max number of occurrences. DEMO: https://demos.zingchart.com/view/LQ9CNBQR Link to DOCS: https://www.zingchart.com/docs/tutorials/design-and-styling/javascript-chart-themes/ – Jeff Frederich Dec 12 '16 at 19:14