# Fetching data from an XML file (AJAX)

Warning: Because of the XMLHttpRequest security restrictions this example does not work offline. You can view the online version here.

This is an example of fetching data from an XML file that is located on the server. The page uses the XMLHttpRequest (Javascript) object to fetch the XML file (sample.xml) then parses it in Javascript and creates the chart. The function that parses the XML response and then uses the data to create the chart is shown below and called myXMLProcessor() (it's the XMLHttpRequest callback function).

This example has been tested in modern browsers and also MSIE 7/8 (via MSIE9 compatibility modes).

    <script>

        // This is the same AJAX function that is defined in the documentation here:
        // http://www.OfficeExcel.net/docs/#ajax
        AjaxCall('/sample.xml', myXMLProcessor);

        /**
        * This sample callback function is called when the data is ready (readyState=4). It is where
        * the XML response is parsed, the data pulled out and finally the chart is created.
        */
        function myXMLProcessor ()
        {
            // Check the readystate to see if the XMLHttpRequest object is ready
            if (this.readyState == 4 && this.status == 200) {

                /**
                * This gets an xmlDoc object, accounting for differences in MSIE and
                * other browsers
                */
                if (window.DOMParser) {
                    var parser = new DOMParser();
                    var xmlDoc = parser.parseFromString(this.responseText,"text/xml");
                } else {
                    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                    xmlDoc.async = "false";
                    xmlDoc.loadXML(this.responseText);
                }

                /**
                * Initialise the arrays that we will populate with data
                */
                var john = [];
                var fred = [];
                var lucy = [];

                /**
                * Now the main loop that goes through the XML extracting the data
                */
                var days = xmlDoc.getElementsByTagName("stats");

                for (var i=0; i<days[0].childNodes.length; ++i) {

                    var node = days[0].childNodes[i]

                    if (node.nodeName == 'day') {
                        var john_tag = node.getElementsByTagName('john');
                        var fred_tag = node.getElementsByTagName('fred');
                        var lucy_tag = node.getElementsByTagName('lucy');

                        john.push(Number(john_tag[0].childNodes[0].nodeValue));
                        fred.push(Number(fred_tag[0].childNodes[0].nodeValue));
                        lucy.push(Number(lucy_tag[0].childNodes[0].nodeValue));
                    }
                }

                /**
                * Now we have the information, use it to create and show the chart
                */
                var myLine = new OfficeExcel.Line('cvs', john, fred, lucy);
                myLine.Set('chart.title', 'A chart of Johns, Freds and Lucys weekly statistics');
                myLine.Set('chart.linewidth', 2);
                myLine.Set('chart.hmargin', 5);
                myLine.Set('chart.tickmarks', 'endcircle');
                myLine.Set('chart.labels', ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']);
                myLine.Set('chart.key', ['John', 'Fred', 'Lucy']);
                myLine.Draw();
            }
        }
    </script>