Adapting animations to do different things

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Mike on 1st February 2014
Hi there again!

I've got a question - I'm learning so very much from working with RGraph about canvas and javascript. In needed to be able to animate lines that can toggle in and out without disturbing the rest of the canvas when they reset. The cleanest animation for each line was achieved by stacking one canvas per line element.

At first, I was convinced that just having a dynamic range function that displayed a number range relevant to each line (like your line chart with three y axis example) would suffice to show each element, but my client would like for each element to show relative to other lines on the canvas, so when I draw a single line (when the chart loads, it fires off a single line chart) it would use a logical ymin and ymax to take advantage of the canvas space. Because my numbers change very little over time, this gives me a prettier graph than setting ymin at 0, which gives me a relatively flat line.

When I draw the second line in, generally this is a sub or superset of the line data already drawn, so it's lowest number is generally substantially lower(or higher) than the ymin on the already drawn chart. In order to show that, I need to adjust the ymin of the original chart to reflect the data relatively accurately. The ymin scale is outside of the canvas element and updates to reflect the lowest ymin and highest ymax value which should ostensibly be the size of both graphs when the animation completes.

Can you think of an animation that is in the library which would easily lend itself to being used to just animate a ymin lowering over 20 frames?

I'm getting better at figuring out what each function does, but I still get my eyes crossed by the syntax and some of it still looks like magic to me.
Posted by Richard on 1st February 2014
Hi there,

There's nothing like that in RGraph I'm afraid. I thought that you might be able to use the .Animate() function - but apparently not.

So what is feasible is to make your own animation - that gradually decreases the ymin value over approx 25 frames, You could use something like the RGraph.Effects.Rose.Grow() effect as a starting point.

Posted by Mike on 4th February 2014
Thanks for the direction there.

Out of curiosity, my current process is as so -

function DrawLine1 -

  New Rgraph Csv - etc etc.

var line1 = new rgraph line etc..


With about 15 different options .Set on the line.

Is it possible to call that line after it's drawn, and redraw it without redefining (and repeating) all of the settings, but say simply resetting the Ymin

So sans animation, i'm seeing the function as somethng like:

canvas = canvas id
obj = line? canvas?

.Set (ymin, newval)

Rgraph.reDraw(line1)? canvas?

I often see your advice to load the new data and redraw the chart(which is what I guess the progressive charts do?) but I've never been able to figure out how to make it work.

Thanks in advance,

Posted by Richard on 4th February 2014
Hi there,

The absolute fastest way would be to create the object and configure it just once - for which you could use a function and then all of your configuration would be done once. For example:

function getLineChart ()
     if (!window.myLine) {
         window.myLine = new RGraph.Line('cvs', [4,8,6,3,5,4,2])
             .Set('', 35)
             .Set('gutter.left', 35)
             .Set('gutter.bottom', 35)
             // More config options

     return window.myLine;

window.onload = function ()
     var obj = myObject = getLineChart();

The "obj" variable isn't special - it's just a variable name that I use. You could instead do this:

var flooble = new RGraph.Line('cvs', [4,8,6,3,5]);

The canvas variable usually refers to the DOM canvas object. and id would probably be the canvas ID attribute.

Oh and RGraph objects are stored in the RGraph ObjectRegistry - so if you need to get the object again you might do this:

var obj = RGraph.ObjectRegistry.getFirstObjectByType('line');

Once you have the object you can then adjust the ymin setting:

obj.Set('ymin', 5);

and then call the redraw function:


Posted by Enter your name... on 7th February 2014

Awesome advice and help. You've put me right where I need to be.

When I finish I'll post the effect I built in case someone wants to use it for something.

Add a reply

« Back to message list