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 instead with first table container.

 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);
                        TABLE_LOCATION = 'tableProductDeploymentContainer';
                        query1.send(drawQuestions);
                        var sqlQuery = "sql?tq=select Section, SubSection, Id, Question, Answer, Others where " +
                                       "SubSection = '1.2' &sqlQueryID=questions_bank";
                        var query2 = new google.visualization.Query(sqlQuery);
                        TABLE_LOCATION = 'tableProductDeploymentContainer';
                        query2.send(drawQuestions);
                        break;

function drawQuestions(queryResponse) {
            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' });
        }

I believe, there is some error in setting the TABLE_LOCATION global variable. Is there any way to pass the table container dynamically without maintaining in the global level.

Thanks for your help.

回答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' });
}

来源：https://stackoverflow.com/questions/40216141/google-visualization-how-to-call-and-draw-sequential-query-with-table