change bar values without redrawing the whole chart

Question

Is it possible to change bar values in an already generated Graph dynamically and animate them (like css-transitions on height/width) without redrawing the whole chart?

Answer 1

No. But don't worry - canvas and SVG are fast at drawing.

You can animate the change to a new set of values with the canvas Bar chart by giving the grow effect a new dataset - There's an example in the demos dir in the download called demos/effects-bar-grow.html , the source code of which is this:

bar = new RGraph.Bar({
    id: 'cvs',
    data: [4,8,6,3,1,2,5],
    options: {
        textSize: 16,
        xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
        shadowBlur: 0,
        shadowOffsetx: 2,
        shadowOffsety: 2,
        colorsStroke: 'rgba(0,0,0,0)',
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        xaxis: false,
        colors: ['Gradient(#d0d:#303)']
    }
}).grow();

setInterval(function ()
{
    var data = RGraph.arrayRandom(7, 0, 10);

    bar.grow({data: data});
}, 3000);

Of course animation on canvas requires redrawing the whole chart repeatedly many times a second.