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:
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:
does know why async updates of data causes render nothing @ all?
Comments
Post a Comment