Fetching data from XML

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

This is a page documenting the fetching of data from an XML file that's located on your 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,
                    marginInner: 5,
                    tickmarksStyle: 'endcircle',
                    xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                    key: ['John', 'Fred', 'Lucy'],
                    textSize: 14,
                    xaxis: false
                }
            }).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 objects 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:

• Set the appropriate data property and redraw instead of recreating the chart object from scratch.
• Use the RGraph.reset(canvas) function to clear the ObjectRegistry of relevant objects.

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