Fetching data from an XML file (AJAX)

Share RGraph:   

Summary
An example of using XML data as a source of your chart data. This page shows you how you can use the browser methods to parse XML but you just as easily use jQuery or somethinng similar.

Warning: Because of the XMLHttpRequest security restrictions AJAX does not work offline. You should be aware of this if you're developing offline.
[No canvas support]

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>
    /**
    * The AJAX function is now part of the RGraph common library: RGraph.AJAX(url, callback) You could also
    * use the newer function: RGraph.AJAX.getString(url, callback) which may save you some code.
    */
    RGraph.AJAX('http://www.rgraph.net/sample.xml', myXMLProcessor);



    /**
    * This example 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 line = new RGraph.Line({
                id: 'cvs',
                data: [john, fred, lucy],
                options: {
                    title: 'A chart of Johns, Freds and Lucys weekly statistics',
                    linewidth: 2,
                    hmargin: 5,
                    tickmarks: 'endcircle',
                    labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                    key: ['John', 'Fred', 'Lucy'],
                    textAccessible: true,
                    textSize: 14,
                    noxaxis: true
                }
            }).draw()
        }
    }
</script>

Note about AJAX requests and the ObjectRegistry (old charts reappearing)

Because all objects are necessarily registered now whether they use dynamic features or not this can cause charts to be redrawn if you recreate the object for each AJAX request. This may not necessarily affect you if your chart completely overwrites the area that it draws in (gauges/meters can do this). In this situation you should either:

You can find a list of data properties in the API documentation.

Comments

Add a new comment...