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...

varsqlQuery="sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
               "SubSection = '1.1' &sqlQueryID=questions_bank";
varquery1=newgoogle.visualization.Query(sqlQuery);

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

varsqlQuery2="sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
               "SubSection = '1.2' &sqlQueryID=questions_bank";
varquery2=newgoogle.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;
    }
    varquestionBankResponse= queryResponse.getDataTable();
    if (questionBankResponse === null) {
        alert('Empty rows in query: ' + questionBankResponse.getNumberOfRows());
        return;
    }
    varquestionDataTable=newgoogle.visualization.DataTable();
    questionDataTable.addColumn('string', '');
    questionDataTable.addColumn('string', '');
    questionDataTable.addColumn('string', '');
    varquestionDataTableRow=newArray();
    var rowCounter;
    for (rowCounter = 0; rowCounter < questionBankResponse.getNumberOfRows() ; rowCounter++) {
        varcount=0 * 1;
        var chbQuestion;
        varquestionId= questionBankResponse.getValue(rowCounter, 2);
        varquestionName= questionBankResponse.getValue(rowCounter, 3);
        varanswerValue= questionBankResponse.getValue(rowCounter, 4);
        varanswerOthers= 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 />";
        elsechbQuestion="<input type=\"checkbox\"" + " id=\"" + questionId + "\"" + " />";
        questionDataTableRow[count++] = chbQuestion;
        questionDataTableRow[count++] = questionName;
        questionDataTableRow[count++] = answerOthers;
        questionDataTable.addRow(questionDataTableRow);
    }
    vartableObject=newgoogle.visualization.Table(document.getElementById(TABLE_LOCATION));
    tableObject.draw(questionDataTable, { allowHtml: true, 'cssClassNames': cssClasses, width: '100%', sort: 'disable' });
}