AngularJS Charts not updating data correctly

Question

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:

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:

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

I must add that this happens with other types of charts too – Carlos Martinez Aug 24 '15 at 05:34 — Carlos Martinez, Aug 24 '15 at 05:34

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

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

edited May 23 '17 at 12:10

Community

1
1

answered Aug 24 '15 at 19:56

Carlos Martinez

4,350
5
32
62

score 0 · Answer 2 · answered Aug 24 '15 at 11:13

0

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.

answered Aug 24 '15 at 11:13

potatopeelings

40,709
7
95
119

You might also want to post a fiddle and replicate the problem - the code available in the question is not much to go on (it doesn't show the trigger, the injected services...) – potatopeelings Aug 24 '15 at 11:14
I wasn't able to replicate the problem, that's why i didn't post a fiddle. About the injected services, 'itemsData' is just a json object that came from a server, and the trigger looks like this `ng-click="selectItem(item.ItemId)"`, I checked it up on the debugger, and It's not getting triggered more than once. I'll keep trying to replicate it on fiddle though, thanks – Carlos Martinez Aug 24 '15 at 17:40
https://jsfiddle.net/PGjtS/130/ I posted the wrong fiddle before, lol. Here's the correct fiddle – Carlos Martinez Aug 24 '15 at 19:46

score 0 · Answer 3 · answered Jan 08 '16 at 05:27

0

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)

answered Jan 08 '16 at 05:27

karma

903
10
26

Alex · Answer 4 · 2016-03-11T09:05:17.057

0

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 :)

edited Mar 11 '16 at 09:05

answered Mar 11 '16 at 08:58

Alex

81
1
2

AngularJS Charts not updating data correctly

4 Answers4