Dynamically Update FusionCharts XML Attributes

This snippet of code adds the functionality to dynamically update FusionCharts DataXML root attributes (also known as “chart attributes”) on-the-fly using JavaScript.

In case user requires to update chart cosmetics like turn off animation or change chart caption, this script will allow developers to do that in one line of code!

Update: This feature has been assimilated within the new FusionCharts 3.2 JavaScript Library.

Installation and Usage Instructions

After extracting the files, you simply need to copy the file, FusionCharts.UpdateXMLAttribute.js, beside your existing FusionCharts.js file and include it in your page head tag right after the place where your FusionCharts.js file is included.


To update a chart’s XML attributes, you simply need to use the following line of JavaScript code

FusionCharts.updateXMLAttribute("chart-id", "attribute", "value");

If you want to update multiple attributes at one go, you can simply send a JavaScript object containing all your attributes.

FusionCharts.updateXMLAttribute("chart-id", {
    "attribute-1": "value-1",
    "attribute-2": "value-2"
});

How The Code Works

The code uses FusionCharts’ getXML() method to retrieve the current Data-XML of the chart. Then it uses regular-expressions to find the existing attribute and replaces it with the new one. Then it finally uses the chart’s setDataXML() method update with the new XML. FusionCharts suite of products have amazing JavaScript API with which developers can bend and mend a lot of interesting functionality. If you have any such bright thing in mind, feel free to post at the FusionCharts Forum.

Example Implementations

The following sample codes shows how you an change certain aspects of the chart after the chart has been loaded. Here, we are assuming that your chart has a chartId as "chart-id".

Change Caption of FusionCharts Object Dynamically

FusionCharts.updateXMLAttribute("chart-id", {
    "caption": "New Caption",
    "subcaption": "Updated New Sub-Caption"
});

Turn Off FusionCharts Animation

FusionCharts.updateXMLAttribute("chart-id", "animation", "0");

Additional Information

This script will only work with the latest version of FusionCharts v3. You may download your copy from FusionCharts website.

The compressed JavaScript is less than 1 KB and should not affect page load times. There is also a fully documented uncompressed “debug” file in case you are interested in seeing whats going on inside!

2 Replies to “Dynamically Update FusionCharts XML Attributes”

  1. This is awesome man! The lack of this was exactly why I had switched over to amChart with their .setSettings functions!

    Now a quick question… How do I revert to the original XML without doing setDataURL again?

Leave a Reply