Set XML As File

Overview

AnyChart can accepts chart data as file XML settings, the most convenient way to use this feature - use AnyChart JavaScript Integration Library.

In this tutorial this feature will be shown and described, we suppose that you have already studied library, or, at least Simple Chart Embedding tutorial.

Actually almost all samples use this method to load chart XML file before rendering, but is possible to change XML file at run-time. We will show this technique at the sample below.

Method Parameters Description
setXMLFile(xmlPath)
Returns: null 		xmlPath: String - path to XML file Sets chart data file path
You may call this method before write()

Sample setting XML file to chart at run-time

For the sample below we've created several XML files with different settings, you can find them in xml sub folder of the sample. In the sample itself we will create Combo Box that will choose file and set it on item select event.

Launch the sample with Set XML File Path: Open the Sample

Download the sample with Set XML File Path: Download the Sample

At first we create Combo list with files:

<!-- selectFile() is launched on click event -->
<select id="fileslist" name="fileslist" onclick="selectFile()">
<option value="./xml/area.xml">Area Chart - area.xml</option>
<option value="./xml/bar.xml">Bar Chart - bar.xml</option>
<option value="./xml/column.xml">Column Chart - column.xml</option>
<option value="./xml/bubble.xml">Bubble Chart - bubble.xml</option>
<option value="./xml/cone.xml">Cone Chart - cone.xml</option>
<option value="./xml/pyramid.xml">Pyramid Chart - pyramid.xml</option>
<option value="./xml/line-column.xml">Line/Column Chart - line-column.xml</option>
</select>

Then create new chart, as usual, with a default file loaded:

// set AnyChart Swf file path
AnyChart.swfFile = './swf/AnyChart.swf';
// Create new chart
var chart = new AnyChart();
// Set width and height
chart.width = "100%"
chart.height= "100%"
// Set xml for the default chart
chart.setXMLFile('./xml/bar.xml');
// Write chart to div with "chart" id.
chart.write("chart");

And the last step - define function that sets file to chart:

// selectFile() gets file name from
// select->option->value and set it to the chart
selectFile = function() {
var filePath = document.getElementById('files').fileslist.value;
chart.setXMLFile(filePath);
}

to top

Here it is, chart accepts different XML files at a run-time, you can use this feature to show different charts when user chooses certain kind of report or something, if you will use dynamic script files instead of static XML files - you can pass some parameters that will configure chart data or layout.

Sample changing map using XML file at run-time

The idea and the tecnhinque used in the previous sample can be used to create run-time switcher of maps:

Launch the sample with Set XML File Path to Map: Open the Sample

Download the sample with Set XML File Path to Map: Download the Sample

 

to top