After working with Angular for some time, I decided to give Yeoman and generator-angular-fullstack a try. My main goal was to use angular-chart.js to display a chart in a particular view called poll.html. Surprisingly, everything loaded correctly except for the chart itself. I double-checked the Devtools and saw that all the necessary files like chart.js, angular-chart.js, and angular-chart.css were loading as expected with a status 200. Despite trying to troubleshoot by using sample data, the issue persisted. Here are the steps I took along with relevant code snippets. For the complete source code, visit https://github.com/MichaelLeeHobbs/freeTheVote.
Your help is greatly appreciated!
To get started, I used Daftmonk's generator-angular-fullstack for the project seed. Then, I utilized Bower to install angular-chart.js (with the command: bower install --save angular-chart.js)
In my index.html:
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>In app.js:
angular.module('freeTheVoteApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'validation.match',
'chart.js'
])In poll.controller.js:
angular.module('freeTheVoteApp')
.controller('PollCtrl', function ($scope, $http) {
var self = this;
this.polls = [];
$http.get('/api/polls').then(function(response) {
self.polls = response.data;
});
$scope.options = ['a', 'b', 'c'];
$scope.votes = ['3', '5', '13'];
});And finally, in poll.html:
<navbar></navbar>
<div class="mainContent container">
<div class="row">
<div class="col-lg-12">
<div class="col-md-4 col-lg-4 col-sm-6" ng-repeat="aPoll in poll.polls">
<h3>{{aPoll.name}}</h3>
<ol>
<li ng-repeat="options in aPoll.options">{{options}}
<span> votes: {{aPoll.votes[$index]}}</span>
</li>
</ol>
<canvas id="{{'doughnutChart' + $index}}" class="chart chart-doughtnut" chart-data="votes" chart-labels="options"></canvas>
</div>
</div>
</div>
</div>
<footer></footer>