Toggle between Flash and JavaScript charts using clone() method

As you might already know, with the launch of FusionCharts v3.2, you can now render charts in both Flash and JavaScript. Recently, we had a need in our chart gallery to convert the already-rendered charts in Flash to JavaScript dynamically – at the click of a button. This can be done very easily using the FusionCharts JavaScript Library, and in this post we will take a look at the code snippet going into it.

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 file in your page. Voila! You can now easily use the above set of functions anywhere on your page.

Leave a Comment