CODEWITHSUNDEEP
animationgraphraphaelgraphael
circlecube
circlecube

Reputation: 704

g.raphael bar chart and updating/animating the values

I'm working on some bar charts and need to update the chart values. The only way I've found to do this is to redraw the whole thing. Isn't there a way to simple update the bars? And if so what I'm really hoping to do is animate that change. Any suggestions?

http://jsfiddle.net/circlecube/MVwwq/

Upvotes: 4

Views: 5100

Answers (2)

Alistair Colling
Alistair Colling

Reputation: 1563

I had to adapt the above code to get this to work with Raphaël 2.1.0 and g.Raphael 0.51 and JQuery 1.9.1:

function b_animate(){
var c2 = bars.barchart(10, 10, 500, 450, bdata, { colors:custom_colors});
$.each(c.bars, function(k, v) {
    v.animate({ path: c2.bars[k][0].attr("path") }, 500);
    v[0].value = bdata[k][0];
});
c2.remove();}

Hope this helps!

Upvotes: 0

hayesgm
hayesgm

Reputation: 9096

Here's what you want (updated Fiddle).

You were on the right track for creating a new bar chart. The only issue is, you don't want to "display" that bar chart, but you want to use its bars for animation. While this does generate a new graph which we later throw away (using remove()), it seems to be Raphael best practice.

function b_animate(){
  //First, create a new bar chart
  var c2 = bars.g.barchart(200, 0, 300, 400, [bdata], {stacked: false, colors:["#999","#333","#666"]});

  //Then for each bar in our chart (c), animate to our new chart's path (c2)
  $.each(c.bars[0], function(k, v) {
    v.animate({ path: c2.bars[0][k].attr("path") }, 200);
    v.value[0] = bdata[k][0];
  });

  //Now remove the new chart
  c2.remove();
}

This is not complete, as we haven't animated the legends to match the new chart, but this technique applied to the labels should get you there. Basically, we need to re-map the hovers to show new labels (and remove the old labels).

Hopefully, this should work exactly like you hoped. Let me know if you have any issues. Enjoy!

Upvotes: 6

Related Questions