Chart not redrawn when label is update in http or get

[furqan93]

I am trying to make a bar chart with dynamic labels on x-axis, but when I update labels in http get or http posts 's success function the chart does not show. however if i update labels outside them then it works. Can you please help that how to make it work while updating labels in http get's response?

[moshe]

Facing odd issue that can be related. Updating chart.js binded var inside $http response makes it act weird.

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B', 'Series C'];
      $scope.data = [
        [28, 48, 40, 19, 86, 27, 90],
        [30, 49, 40, 9, 86, 27, 90],
        [65, 59, 80, 81, 56, 55, 40]
      ];

    $http(req).then(function(res) {
            // even if not using response
            $scope.series = ['Series A', 'Series B'];
            $scope.data = [
                [65, 59, 80, 81, 56, 55, 40],
                [28, 48, 40, 19, 86, 27, 90]
        ];
    });

however moving the block outside of the $http to $timeout makes it work.

[hsstan]

I have the same issue... but i don't have to update the series, only the label and the data.

In my example i have label for 15 different times, each every 15 minutes.

When i refresh the data i wanna change the label with the new series (eg. [10:00,10.15,10:30....].

the data updates well, but the label remain the same.

My update of data is inside a promise.

[matthieurosset]

Same issue here.

@MosheZada could you please let us see your workaround with timeout ? Thanks a lot.

[wdrobinson]

Can someone create a jsfiddle showing the issue? I'm not able to recreate.

[xtingray]

I am having the same issue mentioned by MosheZada. My scenario to reproduce it is a little complex but I will try to describe it here:

In your html file:

1. Define a form to call a get request
2. Define a div (id="result") with ng-show option to contain the chart you want to show
3. Inside that div, define one chart including the usual options: chart-data, chart-labels, etc

In your javascript file:

1. Set your ng-show variable to "false" (ensure that everytime you submit your form, the div (id="result") is hidden)
2. Capture your submit event and make a real http request getting new random data every time you use the form
3. Inside your (http) successCallback function update the data/labels/etc values of your canvas
4. Set your ng-show variable to "true", to show your main div (id="result") with your updated canvas

The first time you submit new data to your canvas, you will see that everything is ok, but if you try it a second/third time and you move your mouse in several directions over the canvas you will notice that sometimes your canvas render the graphic using old data (from your previous submit) and changing quickly to the new one, just like in the MosheZada's animated gif. It's a very curious behavior, because there is a "ghost" graphic hidden in the current but showing old data.

Now, if I don't use the ng-show variable and I show the canvas all the time, then the problem doesn't occur. So, it seems there is a relationship between this bug and the hidden rendering of the canvas. Not sure at all.

I appreciate any hint to solve this issue. Thanks.

[jtblin]

I cannot repro using $http, neither with ng-show: http://jsbin.com/voguni/2/edit?html,js,output

[xtingray]

I made this little video to show you how to reproduce this tricky bug: https://www.youtube.com/watch?v=PkuG19K8hKc

As you will see, sometimes it happens, sometimes not (but it's there!).

Here is the code used for this example, so you will be able to reproduce it: https://github.com/xtingray/chartjs-bug

I tried to use jsbin to share the code with you, but I noticed that its interface is refreshing the view all the time, what makes harder to reproduce this bug. So, I recommend you to try the example loading the files directly in your browser just like I did in the video.

Thank you for your help!

[pacificeyes]

put the 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.

[johnedvard]

Putting the update chart code inside a $timeout after getting the result data from a $http request does not solve the issue in my case.

[keepsilentw]

You need a watcher: let chartInstance; $scope.$on("create", function (event, chart) { chartInstance && chartInstance.destroy(); chartInstance = chart; }); but this solution will bring other bugs when there are more than one chart on a page

[EricKit]

I fixed it by modifying the data in my promise, then when it's all setup I do this... it's not pretty but it draws properly now:

$timeout(function(){ value = $scope.data[0].pop; $scope.data[0].push(value) }, 200);

[mynamerahulkumar]

Angular 2 I have initilized chartlabel on every click of graph display. this.lineChartLabels=[]; I have put condition in div untill data comes to chartlabels ,do not render the graph

<div *ngIf="lineChartLabels!=0"> it works for me