Google Visualization : How To Call And Draw Sequential Query With Table?

I have to draw a side by side table with 2 different sql query data. I am sending in the given below format. However, it was drawn first query data into second table container inst

Solution 1:

since the callback for Query.send is called asynchronously,
cannot guarantee one finishes before the other

as you point out, send the table id within the callback, rather than using global scope...

see following snippet...

var sqlQuery = "sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
               "SubSection = '1.1' &sqlQueryID=questions_bank";
var query1 = new google.visualization.Query(sqlQuery);

query1.send(function (queryResponse) {
  drawQuestions(queryResponse, 'tableProductDeploymentContainer');
});

var sqlQuery2 = "sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
               "SubSection = '1.2' &sqlQueryID=questions_bank";
var query2 = new google.visualization.Query(sqlQuery2);

query2.send(function (queryResponse) {
  drawQuestions(queryResponse, 'tableProductDeploymentContainer2');
});

function drawQuestions(queryResponse, TABLE_LOCATION) {
    if (queryResponse.isError()) {
        alert('Error in query: ' + queryResponseData.getMessage() + ' ' + queryResponseData.getDetailedMessage());
        return;
    }
    var questionBankResponse = queryResponse.getDataTable();
    if (questionBankResponse === null) {
        alert('Empty rows in query: ' + questionBankResponse.getNumberOfRows());
        return;
    }
    var questionDataTable = new google.visualization.DataTable();
    questionDataTable.addColumn('string', '');
    questionDataTable.addColumn('string', '');
    questionDataTable.addColumn('string', '');
    var questionDataTableRow = new Array();
    var rowCounter;
    for (rowCounter = 0; rowCounter < questionBankResponse.getNumberOfRows() ; rowCounter++) {
        var count = 0 * 1;
        var chbQuestion;
        var questionId = questionBankResponse.getValue(rowCounter, 2);
        var questionName = questionBankResponse.getValue(rowCounter, 3);
        var answerValue = questionBankResponse.getValue(rowCounter, 4);
        var answerOthers = questionBankResponse.getValue(rowCounter, 5);
        if (answerOthers !== null)
            answerOthers = answerOthers.toString();
        if (answerValue === null)
            answerValue = 0;
        if (answerValue.toString() === "1")
            chbQuestion = "<input type=\"checkbox\"" + " id=\"" + questionId + "\"" + " checked />";
        else
            chbQuestion = "<input type=\"checkbox\"" + " id=\"" + questionId + "\"" + " />";
        questionDataTableRow[count++] = chbQuestion;
        questionDataTableRow[count++] = questionName;
        questionDataTableRow[count++] = answerOthers;
        questionDataTable.addRow(questionDataTableRow);
    }
    var tableObject = new google.visualization.Table(document.getElementById(TABLE_LOCATION));
    tableObject.draw(questionDataTable, { allowHtml: true, 'cssClassNames': cssClasses, width: '100%', sort: 'disable' });
}