Set XML As String

Overview

AnyGantt can accept data as string with XML settings.

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 Gantt 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 gantt chart.

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

Open the folder with Set XML As String - AJAX Sample: Open Folder With Sample

In this sample create an empty chart at first::

<script type="text/javascript" language="javascript">
// Create new chart
var chart = new AnyChart('./swf/AnyGantt.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 AnyGantt 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 your gantt chart.

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

Open the folder with Set XML As String from TextArea: Open Folder With Sample

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

<textarea cols="65" rows="17" id="rowData">
<anygantt>
<project_chart>
<tasks>
<task id="1" name="Task 1" parent="" actual_start="2008.07.01" actual_end=" 2008.07.12"/>
<task id="2" name="Task 2" parent="1" actual_start="2008.07.01" actual_end="2008.07.07"/>
<task id="3" name="Task 3" parent="1" actual_start="2008.07.04" actual_end="2008.07.09"/>
<task id="4" name="Task 4" parent="2" actual_start="2008.07.05" actual_end="2008.07.12"/>
</tasks>
</project_chart>
</anygantt>
</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/AnyGantt.swf';
//Create new gantt chart
var chart = new AnyChart();
chart.width="700";
//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

to top