Is it possible to create a rendering animation using css3 or javascript?

[Liam Ryan]

I'm creating a flotr2 angularjs directive and I'm wondering if there's a recommended way to animate the chart when it renders?

Currently I'm trying to work it by manipulating the data sets with a temporary variable where I start with the y of each data point as 0 and double until it is equal to or above the actual y value, then I swap in the defined data values. This is highly inefficient and I was wondering if someone had experimented with using CSS3 transitions to expand the graph data in a re-usable fashion?

[Liam Ryan]

Here's a pen showing the very inefficient approach I cobbled together 

http://codepen.io/anon/pen/PwjGPe 

On Fri, Jan 23, 2015 at 11:49 AM, Liam Ryan <lio...@gmail.com> wrote:

I'm creating a flotr2 angularjs directive and I'm wondering if there's a recommended way to animate the chart when it renders?

Currently I'm trying to work it by manipulating the data sets with a temporary variable where I start with the y of each data point as 0 and double until it is equal to or above the actual y value, then I swap in the defined data values. This is highly inefficient and I was wondering if someone had experimented with using CSS3 transitions to expand the graph data in a re-usable fashion?

--
You received this message because you are subscribed to a topic in the Google Groups "flotr2" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/flotr2/JAYaDpvIa4Y/unsubscribe.
To unsubscribe from this group and all its topics, send an email to flotr2+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Liam Ryan]

I've had a look through the source code and I can see scale used in several areas but I'm stumped as to how to scale the drawings in a re-usable manner. Any suggestions?

[Carl Sutherland]

Hey Liam, Flotr2's draw method, when re-drawing, is very fast.  Calling it repeatedly is the correct way to animate.

You can be more efficient about your memory use by re-using the temporary array data structure (instead of re-creating it every time).

CSS3 transitions won't work here because this is a Canvas based library.

You received this message because you are subscribed to the Google Groups "flotr2" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flotr2+un...@googlegroups.com.