Set XML As String

Overview

AnyChart can accept data as string with XML settings, the most convenient way to use this feature - use AnyChart JavaScript Integration Library.

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

Method Parameters Description
setData(xmlData)
Returns: null		 xmlData: String - string with XML Set chart XML as String
You may call this method before write()

to top

AJAX - Set XML As String

You can get XML String from server using AJAX and then set it to the chart.

Launch the sample with Set XML As String - AJAX Sample: Open the Sample

Download the sample with Set XML As String - AJAX Sample: Download Sample

In this sample create an empty chart at first:

<script type="text/javascript" language="javascript">
// Create new chart
var chart = new AnyChart('./swf/AnyChart.swf');
// Write chart directly to window
chart.write();
//]]>
</script>

Then we create button to launch XML File loading:

<input id="button" value="Load File to Chart using AJAX"
type="Submit" onclick="getXMLData('data.xml', loadXMLToChart);">

Function getXMLData(path, onLoadHandler) loads specified file and launches specified function when XML file is loaded.

So, loadXMLToChart function is called when data.xml is loaded, loadXMLToChart declaration looks like:

// this function is launched when chart xml is loaded
function loadXMLToChart(xmlhttp){

// it receives http response object and sets response text to chart
chart.setData(xmlhttp.responseText);
}

That's it - such page is AJAX and AnyChart Powered, you can modify it and use it in your applications.

to top

Set XML As String From TextArea

You can get XML String from the page, for example - textarea, and then set it to the chart.

Launch the sample with Set XML As String from TextArea: Open the Sample

Download the sample with Set XML As String from TextArea: Download the Sample

In this sample we placed a <textarea> with chart XML on the page, like that:

<textarea cols="65" rows="17" id="rowData">
<anchart>
<charts>
<chart>
<data>
<series name="Year 2003" type="Bar">
<point name = "A" y="637166"/>
<point name = "B" y="7216430"/>
<point name = "C" y="148662"/>
<point name = "D" y="78662"/>
<point name = "E" y="90000"/>
</series>
</data>
</chart>
</charts>
</anchart>
</textarea>

And we've added a button that launches function that sets data to chart:

<input type="button" value="Set Textarea XML to Chart" style="width:545px;" onclick="updateData()" />

And chart is added as usual:

//Set default swf path
AnyChart.swfFile = './swf/AnyChart.swf';
//Create new chart
var chart = new AnyChart();
chart.width="400";
//Write chart to "chart" div
chart.write("chartDiv");

And the last simple thing - set textarea content to chart function:

function updateData() {
//Get string data from text area
var data = document.getElementById('sampleForm').rowData.value.toString();
//Set text data to chart
chart.setData(data);
}

That's it - you can store XML anywhere on your page and set it to the chart when needed.

to top

Set Map XML As String From TextArea

The same setData function can be used to set Map XML.

Launch the sample with Set Map XML As String from TextArea: Open the Sample

Download the sample with Set Map XML As String from TextArea: Download the Sample

So you can store XML anywhere on your page and set it to the map, as well as to the chart when needed.

to top