CODEWITHSUNDEEP
javascriptjqueryangularjscanvascharts
erp
erp

Reputation: 3014

Canvas won't display

Working with Chart js and have run into a bit of trouble. I am trying to pull some data from a web service (which I am doing just fine) but when I try to place it into the chart, the chart doesn't display. I am pulling the data from here just fine. The console prints out the expected values, even the interval works to make sure nothing has changed.

Also the canvas div shows up on the page, just the chart doesn't animate. The html here is pretty straight forward, as I am just using it for a small widget:

  <body ng-app="myapp" ng-controller="MainCtrl">
    <div id="canvas-holder">
      <canvas id="chart-area" width="500" height="500"></canvas>
    </div>
    <button id="randomizeData">Randomize Data</button>
  </body>

And here is a plunker so you can better understand whats going on. If you view the console you can see there are no errors.

Upvotes: 1

Views: 124

Answers (1)

Rudy Setiady
Rudy Setiady

Reputation: 76

Put this code 

var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
    responsive: true
});

inside sucess callback. That will solved.

.success(function(returnedData) {    
     $scope.doughnutData = sortByKey($scope.doughnutData, 'value');

     // Put code here

});

Upvotes: 1

Related Questions