jtblin / angular-chart.js

Reactive, responsive, beautiful charts for AngularJS using Chart.js: http://jtblin.github.io/angular-chart.js
Other
2.67k stars 761 forks source link

Class changed not refreshed #634

Closed bdbais closed 7 years ago

bdbais commented 7 years ago

Hi I'm receiving graph from rest-api and I want to draw it depends of data:

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-controller="graphCtrl">
  <div class="panel panel-default">
    <div class="panel-heading">Graph</div>

    <div class="panel-body"><iframe class="chartjs-hidden-iframe" tabindex="-1" style="width: 80%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></iframe>
      <canvas id="type" ng-class="class_type" class="chart chart-xs ng-isolate-scope" chart-data="data" chart-labels="labels" chart-options="options" chart-colors="colors" width="523" height="261" style="display: block; width: 523px; height: 261px;"></canvas>
    </div>
  </div>
</div>
<button type="button" ng-click="changeType('pie', 'chart-pie')">Pie</button>
<button type="button" ng-click="changeType('line', 'chart-line')">Line</button>

on controller:

myapp.controller("graphCtrl", ['$scope', '$broadcast', function ($scope, $broadcast ) {

  $scope.colors = ['#FFFFFF', '#DAF2F2', '#E0FBD8'] ;
  $scope.labels = ["FIELD1", "FIELD2", "FIELD3"];
  $scope.options = "";
  $scope.data = [12,15,16];
  $scope.type = "";
  $scope.class_type = "";

  $scope.changeType = function(type, class-type){
                $scope.class_type = class-type;
                $scope.type = type;
                $scope.$broadcast("$reload", {});
  }
}]);

is it possible to refresh with new type of graph dynamicaly ?

bdbais commented 7 years ago

Result on page is: <canvas id="type" ng-class="class_type" class="chart chart-xs ng-isolate-scope chart-pie" chart-data="data" chart-labels="labels" chart-options="options" chart-colors="colors" width="523" height="261" style="display: block; width: 523px; height: 261px;"></canvas>

and chart is empty/white.

jtblin commented 7 years ago

ng-class does not work to change directives on the fly, you need to use chart-base class and change the chart-type attribute. See "Dynamic chart" example at the bottom of http://jtblin.github.io/angular-chart.js/ for full example.