CODEWITHSUNDEEP
javascriptangularjscharts
Progs
Progs

Reputation: 737

Angularjs and Chart.js minimal example

I'm using angular and charts.js to create dynamic charts, but the graphics always show empty, there is any minimal example on how to use both of them?

here a plunker:http://plnkr.co/edit/V1gIaCIAixQTcHtBj9YN?p=preview i'm still learning angular, so i'm not sure what i'm doing wrong.

The non working code:

 <div ng-repeat="e in encuesta.cuestionario">
          <!--This doesn't works!-->
          <div id="canvas-holder" class="col-sm-4">
            <canvas id="{{'chart-area-'+$index}}" width="250" height="250" />
          </div>
          <div class="col-sm-6 formulario">
            <ul>
              <li>
                <p>{{e.pregunta}}</p>
              </li>
            </ul>
          </div>

        </div>

Upvotes: 1

Views: 1091

Answers (1)

BatteryAcid
BatteryAcid

Reputation: 8881

Here is a fairly simple take on your code: http://plnkr.co/edit/RvtPAcV4JKDkzikeSamM?p=preview

I build the charts into a scope array based on the cuestionario length.

for (i = 1; i < $scope.encuesta.cuestionario.length; i++) {
    $scope.charts.push({
        chartId: i
    });
}

Then render the charts inside a timeout to let digest complete:

function loadCharts() {
    $timeout(function() {
      angular.forEach($scope.charts, function(chart) {
        var ctx = angular.element(document.getElementById("chart-area-" + chart.chartId))[0].getContext("2d");
        window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
          responsive: true
        });
      });
    });
  }

The other big thing to note is that we access the element as an array, "[0]":

var ctx = angular.element(document.getElementById("chart-area-" + chart.chartId))[0].getContext("2d");

Upvotes: 2

Related Questions