Question

I want to draw a stock chart using Google Chart Tools. My self-written webservice returns a JSON-object with stock quotes. The JSON data is read by JQuery using $.getJSON(). Using console log I was able to check, that the data is read in in a correct way.

The JSON data looks like:

{ "share": [
{ "date": "2012-01-30", "open": 72.38, "close": 73.13 },
{ "date": "2012-01-23", "open": 77.71, "close": 72.80 },
{ "date": "2012-01-16", "open": 75.25, "close": 78.05 }
]}

For drawing I’m using the following code snippet:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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);

  function drawChart() {
    var options = {
        width: 720, 
        height: 480,
        title: 'Chart'
    };

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    data.addColumn('number', 'Sales');

    $.getJSON("StockReceiver.jsp",
        function(json) {
            $.each(json.share, function(i, item){
                console.log ([i, item.open]);
                data.addRow([i, item.open]);
                if ( i == 3 ) {
                    return false;
                }
            });
        });

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>
<div id="chart_div"></div>

The problem I got is that the chart is not drawn! At first I’ve tried to draw the image with about 3.000 values. Since this doesn’t worked I tried to draw one line using two number-values. (To point out if I did something wrong)

When I write

data.addRow([1, 20]);
data.addRow([2, 40]);

I see a line in the chart!

When I look into the $.each function call the loop causes the execution of

data.addRow([i, item.open]);

following values are set eg. (checked using console log)

data.addRow([0, 72.38]);
data.addRow([1, 77.71]);
data.addRow([2, 75.25]);

Why is the chart not drawn, when I try to execute data.addRow within the $.each function? I see a chart but without a line. I receive no error message at all with fireburg in firefox browser! In Internet Explorer it is also not working. Any ideas?

Suggested solution was:

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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);

function drawChart() {
    var options = {
        width : 720,
        height : 480,
        title : 'Chart'
    };

    $.getJSON("StockReceiver.jsp", function(json) {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');

        $.each(json, function(i, item) {
            data.addRow([ new Date(item.date), item.open ]);
        });

        var chart = new google.visualization.LineChart(document
                .getElementById('chart_div'));
        chart.draw(data, options);
    });
}
</script>

Answer 1

Your problem is with execution order. $.getJSON() issues an Ajax request. Ajax is asynchronous, meaning that processing continues in the meantime. What happens is the following.

1. A request for data is sent to “StockReceiver.jsp”.
2. An empty chart is drawn.
3. The response from “StockReceiver.jsp” comes in, too late to be used in the chart.

The solution is to move the chart.draw() command into the Ajax callback function(json) {...}.