lundi 29 décembre 2014

Draw Google Charts using XML data


I am using Google Charts to draw a chart. The data source is getting from Google SpreadSheets. I want it to get from an XML file instead of GoogleCharts. The source code is in the below.



<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
var visualization;

function draw() {
drawVisualization();
drawToolbar();
}

function drawVisualization() {
var container = document.getElementById('visualization_div');
visualization = new google.visualization.PieChart(container);
var vartest = new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-
CptHnwJEfo8tALA').
send(queryCallback);
}
function queryCallback(response) {
visualization.draw(response.getDataTable(), {is2D: true});
}

google.setOnLoadCallback(draw);
</script>
</head>
<body>
<div id="visualization_div" style="width: 570px; height: 500px;"></div>
<div id="toolbar_div"></div>
</body>
</html>


Now you can see vartest variable query gets data from the https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA. Data within this URL is in the below.



// Data table response
google.visualization.Query.setResponse({"version":"0.6","status":"ok","sig":"598319012","table":{"cols":[{"id":"A","label":"Element","type":"string","pattern":""},{"id":"B","label":"Percent","type":"number","pattern":"#0.###############"}],"rows":[{"c":[{"v":"iron"},{"v":32.1,"f":"32.1"}]},{"c":[{"v":"oxygen"},{"v":30.1,"f":"30.1"}]},{"c":[{"v":"silicon"},{"v":15.1,"f":"15.1"}]},{"c":[{"v":"magnesium"},{"v":13.9,"f":"13.9"}]},{"c":[{"v":"sulfur"},{"v":2.9,"f":"2.9"}]},{"c":[{"v":"nickel"},{"v":1.8,"f":"1.8"}]},{"c":[{"v":"calcium"},{"v":1.5,"f":"1.5"}]},{"c":[{"v":"aluminium"},{"v":1.4,"f":"1.4"}]}]}});


But what I want is instead of that URL the data must be in an XML stored within a web server and pull data from that.


But I cannot understand how to do that? Do I have to use AJAX?


Could someone help me to solve this matter?


Thanks and regards, Chiranthaka





Aucun commentaire:

Enregistrer un commentaire