XML data as input for Google Charts

[David Kasabji]

Hello,

I am sorting a huge databse into an XML file, and I need to take some data from that database as INPUT for tha Google Charts (for example for Column Chart).
I have been struggling to find any good tutorials on how to do this, ussually people just link some general stuff, but not specificly for Google Charts.

So any input, maybe even walkthrough, would be really really appreciated.

Thanks in advance!

BR,
David

[Andrew Gallant]

I don't know of any examples of using XML to load data for the Visualization API.  Basically, you would need to write an AJAX function to get the data, parse it into an XMLDocument object, and then parse the document object to pull out the data and input it into a DataTable.  jQuery has a lot of built-in functionality to handle this kind of stuff; I expect other libraries do as well.  Here's a basic example that I think should work:

$.ajax({
    url: 'myXML.xml',
    dataType: 'xml',
    success: function (xml) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Value');
       
        $('row', xml).each(function () {
            var name = $('name', this).text();
            var value = parseInt($('value', this).text());
            data.addRow([name, value]);
        });
       
        var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
        chart.draw(data, {
            height: 400,
            width: 600
        });
    }
});

given an XML structure like this:

<rows>
    <row>
        <name>foo</name>
        <value>5</value>
    </row>
    <row>
        <name>bar</name>
        <value>7</value>
    </row>
    <row>
        <name>cad</name>
        <value>4</value>
    </row>
</rows>

[David Kasabji]

Andrew hi! You're helping me out again :)

So what I have discovered so far is, that the best thing to do is to CONVERT the XML into a JSON and then use JSON as an input for the Google Charts. However, I am bounded to use the database only LOCALLY (we do not use Web Server to pull out the data!).  I found a XML to JSON convertion script here: http://davidwalsh.name/convert-xml-json

I think it looks fine, but I have not yet tested it.  Nevertheless, I want to get back to your example:

Yours idea, if it works, is even better for me, so that I dont need to conver the XML to JSON. Because we have database written in XML. I will try this out.

One question before: Can this be done locally? Becaues I only work on local data - there is no web server (though, I do not see any refferences that your coding might need to connect to server).

BR,
David

Dne petek, 16. maj 2014 07:59:06 UTC+2 je oseba David Kasabji napisala:

[David Kasabji]

I have tried your example, but it is not working.

Here is the fiddle: http://jsfiddle.net/6FyVj/

My files are in the same folder named:

test.html

test.xml

BR,
David

Dne petek, 16. maj 2014 09:24:04 UTC+2 je oseba David Kasabji napisala:

[Andrew Gallant]

AJAX requires a web server to run.  You can get one to run locally with WAMP (Windows) or XAMPP (Windows, Linux, MacOS).