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>

You are passing array as value for drawChart function, but not using it anywhere in it. google.visualization.arrayToDataTable(val) — Justinas
– Justinas, Commented Dec 30, 2014 at 10:11
Yes I dont know how to use it in google.visualization.arrayToDataTable(val) — user3689990
– user3689990, Commented Dec 30, 2014 at 10:14

Oleksandr T. · Accepted Answer · 2014-12-30 10:38:16Z

1

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]);
});

edited Dec 30, 2014 at 10:38

answered Dec 30, 2014 at 10:17

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3689990 Over a year ago

Thanks Alexander. It worked perfectly. Thanks everyone for the help :)

Mariusz Jamro · Accepted Answer · 2014-12-30 10:50:02Z

0

You have passed that array to drawChart() function as,

drawChart(values);

Hope that it will work fine.

edited Dec 30, 2014 at 10:50

Mariusz Jamro

31.9k25 gold badges129 silver badges170 bronze badges

answered Dec 30, 2014 at 10:17

Sajin M Aboobakkar

4,2374 gold badges34 silver badges40 bronze badges

1 Comment

user3689990 Over a year ago

No I tried this before. When I do it its not showing the data properly on the chart

mirabilos · Accepted Answer · 2014-12-30 11:40:17Z

0

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.

edited Dec 30, 2014 at 11:40

mirabilos

5,4193 gold badges49 silver badges78 bronze badges

answered Dec 30, 2014 at 10:50

mortrr

11 bronze badge

Collectives™ on Stack Overflow

Pass a array from one function to another

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related