CODEWITHSUNDEEP
google-visualization
Vignesh
Vignesh

Reputation: 263

Google chart api - Read xml to form a org chart

I am using google chart for the first time now... My requirement is to read xml content to form a chart.. I need to pass the xml file name so that it reads value from specific tag...Following is what I hve tried so far...But no success...

XML file:(FlowChart.xml)

<?xml version="1.0" encoding="utf-8" ?>
<Flow>
  <Node>
    <Id>AN001</Id>
    <Type>Annc</Type>
    <Description>Welcome msg</Description>
    <Next>MN001</Next>
  </Node>
  <Node>
    <Id>MN001</Id>
    <Type>Menu</Type>
    <Description>Language Selection</Description>
    <Next>AN002</Next>
  </Node>
</Flow>

Script:

google.load('visualization', '1', {packages:['orgchart']});

        $(document).ready(function(){
             $.ajax({
                  type: "GET",
                  url: "FlowChart.xml",
                  dataType: "xml",
                  success: xmlParser
              });
            });

        function xmlParser(xml) {
            $('#load').fadeOut();
            $(xml).find("Node").each(function () {
                title = $(this).find("Id").text();
                alert('Hi');
            });
        }
      google.setOnLoadCallback(drawChart);

I have used the same code without googleJSAPI and found the required result... Please help on this...

Upvotes: 0

Views: 2174

Answers (1)

asgallant
asgallant

Reputation: 26340

Try this:

function xmlParser(xml) {
    $('#load').fadeOut();

    var id, type, description, next;
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Id');
    data.addColumn('string', 'Type');
    data.addColumn('string', 'Description');
    data.addColumn('string', 'Next');

    // parse the XML
    $(xml).find("Node").each(function () {
        id = $(this).find("Id").text();
        type = $(this).find("Type").text();
        description = $(this).find("Description").text();
        next = $(this).find("Next").text();
        data.addRow([id, type, description, next]);
    });

    // do something with data
}
function drawChart() {
    $.ajax({
        type: "GET",
        url: "FlowChart.xml",
        dataType: "xml",
        success: xmlParser
    });
}
google.load('visualization', '1', {packages: ['orgchart'], callback: drawChart});

Upvotes: 1

Related Questions