Passing xmlhttprequested object to another function

StackOverflow https://stackoverflow.com/questions/22735073

Question

I am new to web development, and what I am trying to do is drawing a Google Chart in drawChart() function in my code below.

In order to draw the chart, I need to pass some data, and I fetch the data from a database in the backend(using Python), and request it in GetData() function below.

I succeeded in doing the two task in isolation, but I am not sure how to put this together without losing modularity.

In other words, in function GetData(), how can I pass ret to drawChart()?

function GetData()
{
    // code for IE7+, Firefox, Chrome, Opera, Safari
    if(window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    else// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    var ret;

    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            ret = JSON.parse(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET","/submit222", true);
    xmlhttp.send();
    return ret;
}

function drawChart()
{
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Number of Requests');

    var myData = GetData();

    for(var i=0; i<5; i++) {
        data.addRows([
            new Array(new Date(myData[i][0]), Number(myData[i][1]))
        ]);
    }

    var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

    var options = {
      displayAnnotations: true,
    };

    chart.draw(data, options);
}
</script>
</head>            
    <body onload="GetData()">
        <div id='chart_div' style='width: 900px; height: 500px;'></div>
    </body>
</html>
"""
Was it helpful?

Solution

Because the request is asynchronous, you'll have to restructure how your program works:

function getData(callback) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhr.open("GET", "/submit222", true);

    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(JSON.parse(xhr.responseText));
        }
    };

    xhr.send();
}

function drawChart(myData) {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Number of Requests');

    var rows = new Array(5);
    for (var i = 0; i < rows.length; i++) {
        row[i] = [ new Date(myData[i][0]), myData[i][1] ];
    }

    data.addRows(rows);

    var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

    var options = {
      displayAnnotations: true,
    };

    chart.draw(data, options);
}
</script>
</head>            
    <body onload="getData(drawChart)">
        <div id='chart_div' style='width: 900px; height: 500px;'></div>
    </body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top