CODEWITHSUNDEEP
chart.js
eskimo
eskimo

Reputation: 2624

Chartjs unexpected visual animation effect when adding data

I have a long array with data that I slice with Javascript in order to display data of different date ranges in my chart. This way the backend only needs to get the data once, and I can the just slice it on the client side.

// All data
var allLabels = [
    // data here
];
var allData = [
    // data here
];

Then I do:

var labelsCount = allLabels.length;
var dataCount = allData.length;
var updatedLabels;
var updatedData;

if($date_range === 'last_7_days')
{
    updatedLabels = allLabels.slice(labelsCount - 7);
    updatedData = allData.slice(labelsCount - 7);
}
if($date_range === 'last_30_days')
{
    updatedLabels = allLabels.slice(labelsCount - 30);
    updatedData = allData.slice(labelsCount - 30);
}

scoreChart.data.labels = updatedLabels;
scoreChart.data.datasets[0].data = updatedData;

scoreChart.update({
    duration: 1000,
    easing: 'easeInOutExpo'
});

This all works as expected. When switching from 30 to 7 days the points on the right of the 7 days disappear, and the graph scales and grows nicely to the new 7 days x-axis.

enter image description here

The other way around, when you have the graph of 7 days and then switch to 30, produces an ugly visual effect where the first point of the graph sticks to the side, overlaps the new data points and then animates.

After the animation the graph looks as expected, it's just the animation that's ugly. It's a little tricky to explain so hopefully the screenshots help. Green arrows indicate the animation direction. I've set the animation duration to 10s so I can take this screenshot, the red circle highlights the point that starts on the right of the graph and then animates to the left.

enter image description here

I've also tried adding this:

scoreChart.data.labels.pop();
scoreChart.data.datasets[0].data.pop();
scoreChart.update();

and this:

scoreChart.data.labels = [];
scoreChart.data.datasets[0].data = [];
scoreChart.update();

Before the line scoreChart.data.labels = updatedLabels; but that gives the same result.

Another thing I can do is only update the labels. The result is that the chart just zooms on the timeline when changing date ranges, without the nice animation as they have in the example.

Upvotes: 1

Views: 487

Answers (1)

uminder
uminder

Reputation: 26150

You could try to first remove all labels and the data when switching to 'last_30_days'.

if($date_range === 'last_30_days')
{
    scoreChart.data.labels = [];
    scoreChart.data.datasets[0].data = [];
    scoreChart.update({
      duration: 500,
      easing: 'easeInOutExpo'
    });

    updatedLabels = allLabels.slice(labelsCount - 30);
    updatedData = allData.slice(labelsCount - 30);
}

Upvotes: 0

Related Questions