G.raphael, as well as updating / revitalizing values

Question

I am working on some bar charts and I need to update the chart values. The only way I found this is to redraw everything. Isn't there a way to simply update bars? And if so, then I really hope this brings this change to life. Any suggestions?

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

Answer 1

Here you want (updated Fiddle ).

You were on the right track to create a new bar chart. The only problem is that you do not want to “display” this histogram, but you want to use its bars for animation. Although this creates a new graph that we later throw away (using remove() ), this is apparently Raphael's 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 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, since we did not animate the legends to fit the new diagram, but this technique applied to shortcuts should be there. Basically, we need to re-display the hangs to show the new tags (and remove the old tags).

Hope this should work the way you hoped. Let me know if you have any problems. Enjoy it!

Answer 2

I had to adapt the above code to make it 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!