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!

• See Live Demo
• Download FusionCharts.UpdateXMLAttribute.js.zip (61KB)

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.

/FusionCharts/JSClass/FusionCharts.js
/FusionCharts/JSClass/FusionCharts.updateChartAttribute.js

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!