Toggle between Flash and JavaScript charts using clone() method

As you may be aware, FusionCharts v3.2 now allows you to render charts in both Flash and JavaScript. We recently had a requirement in our chart gallery to dynamically convert the already-rendered charts in Flash to JavaScript – all with the click of a button. In this post, we will start with the FusionCharts JavaScript Library and look at the code snippet that goes into it. It will be simple to accomplish this with a Data Visualization Tool that allows you to compare the best JavaScript charting libraries and showcase all possible pros and cons of the JavaScript libraries for creating charts.

The simple code to change the rendering method of any chart

// Fetch the object reference of the Flash-rendered chart.
var myFlashChart = FusionCharts('my-chart-id');
// Clone the Flash chart as JS chart.
var myJSChart = myFlashChart.clone({
renderer: 'javascript'
});
// For our case, we do not need the Flash chart anymore. Hence we delete it
// from memory.
myFlashChart.dispose();
myFlashChart = undefined;
// Render the newly cloned chart at the same place where the original chart
// was rendered.
myJSChart.render();
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.
/**
* This function adds the ability to all FusionCharts instance objects to
* switch between Flash and JavaScript based rendering.
* @id: FusionCharts.prototype.switchRenderer
*
* @param {string} renderer optionally specifies which renderer has to be used.
* By default, it is set to Flash if current renderer is JavaScript and
* vice-versa.
*
* @type FusionCharts
* @return A new FusionCharts object whose renderer has been switched from
* Flash to JavaScript or vice-versa.
*
* @example
* var myChart = FusionCharts('my-chart-id');
* myChart = myChart.switchRenderer();
*/
FusionCharts.prototype.switchRenderer = function (renderer) {
// Get the parameters needed to clone the chart.
// Doing this in order to retain same chart id.
var newChartParams = this.clone({
renderer: renderer ||
(this.options.renderer.toLowerCase() === 'flash' ?
'javascript' : 'flash'),
id: this.id    }, true),
// Keep track whether the chart is currently in a rendered state or not.
wasRendered = this.isActive(), newChart;
// Delete the existing chart.
this.dispose();
// Create new chart with same ID as existing.
newChart = new FusionCharts(newChartParams);
// If the chart was previously in a rendered state, then render the chart.
if (wasRendered) {
newChart.render();
}
// Create and render the new chart.
return newChart;
};

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.

Converting all Flash Charts on a page to JavaScript charts

Using the above code, we can run a loop through all existing FusionCharts object on a page and convert them to JavaScript charts. 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.

/**
* This function switches between Flash and JavaScript charts for all charts
* on a page.
* @id: FusionCharts.switchRenderer
*
* @param {string} renderer optionally specifies which renderer has to be
* used. By default, it is set to Flash if current renderer is JavaScript and
* vice-versa.
* @param {boolean} permanent optionally whether to set the renderer passed in
* the first (renderer) parameter as default.
*
* @type undefined
*
* @example
* function onSomeButtonClick () {
* FusionCharts.switchRenderer();
* }
*/
FusionCharts.switchRenderer = function (renderer, permanent) {
var charts = [], item;
// Iterate on all FusionCharts and store their IDs in an array.
for (item in this.items) {
charts.push(this.items[item].id);
}
// Iterate on the array of IDs and toggle their renderer.
while (item = charts.pop()) {
FusionCharts(item).switchRenderer(renderer);
}
// If the user wants to permanently set the renderer, we do so
// by setting it as the default renderer.
if (renderer && permanent) {
FusionCharts.setCurrentRenderer(renderer);
}
};

The above code has been written in such a way that if someone wants to specifically switch to a particular renderer, they can do so by providing the renderer name ‘flash’ or ‘javascript’ for the first parameter of the switchRenderer function. 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 the file on your page. Voila! You can now easily use the above set of functions anywhere on your page.