CODEWITHSUNDEEP
javascriptangularjschart.js
Carlos Martinez
Carlos Martinez

Reputation: 4510

AngularJS Charts not updating data correctly

I'm using angular charts, and I'm trying to display a chart that updates depending the current item selected, It works well on the first item I select, but after I select a second Item, It seems like the data from the first item selected is still present on the chart (although the data has changed completely), the problem looks like this:

dataproblem

app.controller("itemsAppController", function ($scope, $timeout, itemsData, itemsFactory, $filter) {
$scope.items = itemsData.Items;


$scope.itemSelected = false;
$scope.currentItem = {};

$scope.selectItem = function (itemId) {
    $scope.itemSelected = false;

    var foundItem = $filter('filter')($scope.items, { ItemId: itemId }, true);
    var item = foundItem[0];
    $scope.currentItem = item;  

    $timeout(function () {
        $scope.itemSelected = true;
    }, 500);
};

$scope.chartOptions = {
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"
}
});

The canvas:

<div ng-show="itemSelected">
    <canvas class="chart chart-pie" data="currentItem.MostUsedChampionsPrePatchData" labels="currentItem.MostUsedChampionsPrePatchLabels" legend="true" options="chartOptions"></canvas>
</div>

And the object data looks like this:

objectdata

Any ideas of what is causing this problem?

EDIT: Here's a fiddle showing the problem: https://jsfiddle.net/PGjtS/130/

When recreating it, the problem arise when I included the animation and the ng-show

Upvotes: 1

Views: 1858

Answers (4)

Alex
Alex

Reputation: 171

I've got this issue a couple of time.

Just put your update chart code in a new function like "updateChart" and call it using something like this :

$timeout(updateChart(data), 200)

It will solve your issue.

Edit:

Move your :

$scope.currentItem = item;

in your timeout and it's gonna be working :)

Upvotes: 1

karma
karma

Reputation: 923

As per documentation you can try this... If you want to reload the canvas send a broadcast using:

$scope.$broadcast("$reload", {});

This wil repaint the charts (for example when a chart became visible)

Upvotes: 1

Carlos Martinez
Carlos Martinez

Reputation: 4510

As posted here

The problem seems to be caused because of DOM manipulation

Using ng-if or ng-switch instead of ng-show solves the problem

Upvotes: 2

potatopeelings
potatopeelings

Reputation: 41065

Seems (from your picture) like your selectItem is triggering repeatedly - you might want double check the trigger for that.

You might also want to check the tooltipTemplate - though you append %, it doesn't look (from your picture) that your numbers add up to 100.

Upvotes: 0

Related Questions