The simple code to change the rendering method of any chart
Here, the situation is a bit tricky: the newly cloned chart must have the same ID as earlier (else it would break existing references to the charts on a page.) This poses a challenge where we cannot have two charts co-exist with the same ID.
The solution is again, simple! Instead of instantly cloning the chart, we just retrieve the cloned construction parameters of the chart. This is achieved by passing
true as the second parameter of the
clone function. After retrieving this object, we dispose the original chart. Now, we are free to create a new chart with same ID as that of the original chart.
However, there is a small issue here. If we iterate on the
FusionCharts.items object and switch their renderer, then as we iterate, the variable being iterated upon changes! To solve this, we first run a loop to safely cache all the IDs of existing charts within an array and then loop through this array to toggle the renderers.
Also, if the changes are to be done at the page level using
FusionCharts.switchRenderer function, you can also set that as permanent renderer by setting the second parameter as
How can you use the above code
For your convenience, we have packed the above set of codes in a downloadable zipped archive.
Download FusionCharts-SwitchRenderer.zip (268 kB)
Simply copy-paste the
FusionCharts.switchRenderer.js file onto your web server and include it just after you have included
FusionCharts.js file in your page. Voila! You can now easily use the above set of functions anywhere on your page.