javascript - angular-charts.js wont properly update with new data -


the chart html

<!-- data-component block theres chart      , table. since table doesn't ever have issues,      displays real async data...      because chart wont render async data,      start off fake data can see --> <div class="data-component">   <canvas id="bar"     class="chart chart-bar"     data="data"     labels="labels">    <table>    ... real data ...   </table> </div> 

initial (fake) data:

$scope.data= [     [1,2,3] ]; $scope.labels = [1,2,3]; $scope.series = ['field1']; 

results in this: enter image description here

data update:

$http.get( _url )   .success(function(distribution) {   $scope.loading = false;   console.log(distribution);   var seriesdata = [];   var labels = [];   for(var in distribution)   {     var step = distribution[i];      //this data returned     //[{"segment":null,"count":308,"percentage":0.77},     //{"segment":1,"count":16346,"percentage":40.71},     //{"segment":2,"count":13186,"percentage":32.84},         //{"segment":3,"count":10309,"percentage":25.68}]      seriesdata.push(step.count);     labels.push(step.segment || "null");   }    $scope.distribution = distribution;    $scope.data = [seriesdata];   $scope.labels = labels;   $scope.series = ["field2"];  }) .error(function() {}); 

results in this: enter image description here

does know why async updates of data causes render nothing @ all?


Comments

Popular posts from this blog

google chrome - Developer tools - How to inspect the elements which are added momentarily (by JQuery)? -

angularjs - Showing an empty as first option in select tag -

php - Cloud9 cloud IDE and CakePHP -