Fetching data from XML
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.