Pass a array from one function to another
Question
I have this code which grab data from a xml file. I need to feed these data to a google chart which is currently in an array. I need to pass my xml values to the google chart. Can anyone help me to figure this out. The below is my code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var values = [];
$(document).ready(function() {
$.ajax({
type: "GET",
url: "ChartData.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Pie').each(function() {
var sTitle = $(this).find('Title').text();
var sValue = $(this).find('Value').text();
values.push([sTitle, sValue]);
});
drawChart(values);
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
function drawChart(val) {
alert(val);
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<title>My Read</title>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
Xml File
<?xml version="1.0" encoding="utf-8" ?>
<Chart>
<Pie>
<Title>Task</Title>
<Value>Hours per Day</Value>
</Pie>
<Pie>
<Title>Work</Title>
<Value>11</Value>
</Pie>
<Pie>
<Title>Eat</Title>
<Value>2</Value>
</Pie>
<Pie>
<Title>Commute</Title>
<Value>2</Value>
</Pie>
<Pie>
<Title>Watch TV</Title>
<Value>2</Value>
</Pie>
<Pie>
<Title>Sleep</Title>
<Value>7</Value>
</Pie>
</Chart>
3 answers
solution1
1 ACCPTED 2014-12-30 10:17:46
Change this
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
to
var data = google.visualization.arrayToDataTable((Array.isArray(val) && val.length) ? val : [
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
if value array and is not empty - pass val to function, else pass default options.
Also you need convert sValue from string to number, like this
$(xml).find('Pie').each(function() {
var sTitle = $(this).find('Title').text();
var sValue = $(this).find('Value').text();
if (!isNaN(+sValue)) {
sValue = +sValue;
}
values.push([sTitle, sValue]);
});
solution2
0 2014-12-30 10:17:09
You have passed that array to drawChart() function as,
drawChart(values);
Hope that it will work fine.
solution3
0 2014-12-30 10:50:46
Maybe you are just confusing yourself by calling drawChart twice: once in google.setOnLoadCallback(drawChart) and once in the success function. Remove the one in setOnLoadCallback (or create a function that keeps an eye on load-status for both, and calls drawChart when both are loaded). And implement Alexanders suggestions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.