The simple code to change the rendering method of any chart
The above code shows how an existing FusionCharts object is cloned and then re-rendered. While cloning, we provide the overriding parameter that instructs to override the ‘renderer’ of the existing chart object with the new value we provided. Here, you can also override other parameters.
For ease of use, we pack the above set of codes within an easy-to-use function.
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 true.
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.