GRaphael Pie Chart Dynamic Size

Question

I want to enlarge the gRaphael pie chart after some event, like click. But the gRaphael pie chart creates a static width and height after the window loads. Is it possible to dynamically redraw it in real time?

My code is:

var myRadius; myRadius = 200; var myChart = Raphael("myChartDiv"), myChartPie = myChart.piechart( myRadius, // cx myRadius, // cy myRadius, //Radius [70, 30], //Data { colors: ["#eb5e57", "#ebad50"], stroke: "#f1eeea" } ); $('#myButton').click(function(){ myRadius = 500; myChart.clear(); //Clear current canvas // Do something to insert myChart with new myRadius }); 

UPD Ofcourse I can delete the current chart after a click and create a new one, but this is not the way, because I will need to return to the original size after another click.

Answer 1

You just need to clean and redraw your cake, like this script .

 var myRadius; myRadius = 200; var myChart = Raphael("myChartDiv"), myChartPie = myChart.piechart( myRadius, // cx myRadius, // cy myRadius, //Radius [70, 30], //Data { colors: ["#eb5e57", "#ebad50"], stroke: "#f1eeea" } ); $('#myButton').click(function(){ if(myRadius == 200) myRadius = 500; else myRadius = 200; myChart.clear(); myChartPie = myChart.piechart( myRadius, // cx myRadius, // cy myRadius, //Radius [70, 30], //Data { colors: ["#eb5e57", "#ebad50"], stroke: "#f1eeea" } ); }); 

Of course, data and parameters should be factorized and placed in a global area for ease of use.