About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

Fetching data from XML

Warning
Because of the XMLHttpRequest security restrictions ajax does not work offline. You need to be aware of this if you're developing offline.

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:

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