ChartJS: How do I control the animation of a chart?

Answered
0
0

How can I stop a chart from animating when the data on it is changed?

Thanks

Nic

Share
  • You must to post comments
Filter
Sort by: Recently Active
Best Answer
0
0

Hi Nic,

Please update your ChartJS code with the latest source at /Extensions. It includes your enhancements, some fixes and the embedded js resources to be “internet-free”.

  • You must to post comments
Best Answer
0
0

Hi Luca,

I actually found an answer in the UpdateData() method of the widget. This will update the data without animation. However in the current version this does not also update labels.

I’ve attached an updated version of the chartjs extension. My changes are:

  • Labels now also get updated when UpdateData() is called – very useful for realtime charts 🙂
  • You can set the axis labels through new properties
  • You can set the scale type on the axis through a new property.
  • I’ve also commented out the “debugger” statements in startup,js that are in the extension download so the extension runs correctly.

Hope that is helpful

Nic

Attachment
ChartJS-NA-changes.zip
  • You must to post comments
0
0

Hi all,

Animation value doesn’t seem to have any effect for me when setting in UpdateData(x).

It always seems to be 300mS.

Saying that, perhaps I’m doing something wrong.

I have two arrays, one for data and the other for x-axis time which I’m adding a new datapoint to every second.
I then update the chart with UpdateData(x).

Visually this looks awful because the chart is cleared and then loaded with the latest dataset, every second.

What I’m trying to achieve is a smoothiechart-like appearance (i.e. a scrolling stripchart) but using chartjs.
I need to use chartjs because I need to be able to pause the chart and scroll back and forth through historic data.

Any tips?

Cheers

 

  • You must to post comments
0
0

Hi Nic,

There is a global property for the animation duration. Look in startup.js “Chart.defaults.global.animation.duration = 0;”. Maybe you can add a property to the ChartJS class as you did for the JustGage extension. If you do, make sure to download the latest source from the extensions page first. I will add this to the enhancements.

The problem is that this is a global option applying to all charts. I don’t know if it can be set on a single chart.

Best,

Luca

  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.