// 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. 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
. Download FusionCharts-SwitchRenderer.zip (268 kB)
Simply copy-paste theFusionCharts.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. Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…