Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

I have been using angular for a while but this is the first time I have tried using yeoman and generator-angular-fullstack. I am trying to use angular-chart.js to display a chart in a view. poll.html loads up with no issues and displays everything correctly with only the chart not showing. Devtools shows status 200 on all documents and I can see that chart.js, angular-chart.js, and angular-chart.css are all being loaded in the correct order. I've attempted to use sample data to see if it was some sort timing issue but the sample data does not work either. Below I have listed the steps taken as well as code snips. Full source: https://github.com/MichaelLeeHobbs/freeTheVote

Thanks in advance!

I used Daftmonk's generator-angular-fullstack for the seed. Next I used bower to install angular-chart.js (bower install --save angular-chart.js)

index.html

  <script src="bower_components/Chart.js/Chart.js"></script>
  <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>

app.js

angular.module('freeTheVoteApp', [
 'ngCookies',
 'ngResource',
 'ngSanitize',
 'ngRoute',
 'ui.bootstrap',
 'validation.match',
 'chart.js'
])

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'];
});

poll.html

<navbar></navbar>
<!--
  ownerId: Number,
  name: String,
  options: [String],
  votes: [Number],
  active: Boolean
-->
<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>
share|improve this question
up vote 1 down vote accepted

Directive element should be have data instead of chart-data & labels instead of chart-labels

<canvas id="{{'doughnutChart' + $index}}" 
  class="chart chart-doughtnut" 
  data="votes" 
  labels="options">
</canvas>

And the data should be two dimensional array

$scope.options = [['a', 'b', 'c']];

Plunkr

share|improve this answer
    
Something odd is going on. I was able to use your plunkr example to display a bar chart on poll.html but have not been able to do the same for the doughnut chart. I've been trying to use the example on this page: jtblin.github.io/angular-chart.js/#getting_started As to remove chart- this will throw a warning: "data" is deprecated and will be removed in a future version. Please use "chart-data" instead. You have put me on the right track, thanks! – Michael Hobbs Oct 3 '15 at 13:32
    
Apparently I cant spell doughnut... – Michael Hobbs Oct 3 '15 at 14:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.