JavaScript API Google визуализации Несколько диаграмм Данные отображаются неверно График

Question

Итак, я создаю рудиментарную панель мониторинга в HTML и используя API визуализации Google для этого. Мне нужно создать много графиков, и код ниже хорошо работает для этого. За исключением одной проблемы: сами данные, по-видимому, случайным образом приписываются графикам. Каждый раз, когда я перезагружаю страницу, графики переключают данные, которые они отображают.

Я попытался решить эту проблему, создав dataArray вместе с другими массивами, но это не решило проблему - должен быть какой-то способ напрямую привязывать данные непосредственно к диаграмме в запросе. Благодаря!

<!--Load the AJAX API--> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

<script type="text/javascript"> 

    // Load the Visualization API and the piechart package. 
    google.charts.load('current', {packages: ['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded 
    google.charts.setOnLoadCallback(function() { 
    drawChart('chart1', 0, 'SELECT A, B, C, D, E, G OFFSET 1', 'Sheet1', 
     { title: 'Chart 1'} 
    ) 

    drawChart('chart2', 1, 'SELECT A, I OFFSET 1', 'Sheet1', 
     { title: 'Chart 2' } 
    ) 
    }); 

    var chartsArray = []; 
    var optionsArray = []; 
    var nextID = 0; 

    function drawChart(tag, id, sqlCommand, sheetName='Sheet1', options= {}, numHeaders=1) { 

    chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag)); 

    optionsArray[id] = options; 

    var queryString = encodeURIComponent(sqlCommand); 

    var query = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString); 
     query.send(handleDataQueryResponse); 
    } 

    function handleDataQueryResponse(response, id) { 
    if (response.isError()) { 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
     return; 
    } 

    data = response.getDataTable(); 
    chartsArray[nextID].draw(data, optionsArray[nextID]); 
    nextID += 1; 
    } 

---

<div id="chart1" class="chart"></div> 
<div id="chart2" class="chart"></div> 

UPDATE: Я решил проблему (на данный момент, ужасное решение) по телефону SetTimeout() и тем самым заставляя вызовы к API визуализации должны быть выполнены в порядке, я хочу их к.

Answer 1

функция обратного вызова, handleDataQueryResponse вызывается асинхронно, так что вы не можете гарантировать один финиширует перед другим ...

рекомендовать что-то вроде этого ...

function drawChart(tag, id, sqlCommand, sheetName='Sheet1', options= {}, numHeaders=1) { 

    chartsArray[id] = new google.visualization.LineChart(document.getElementById(tag)); 

    optionsArray[id] = options; 

    var queryString = encodeURIComponent(sqlCommand); 

    var query = new google.visualization.Query(
    'https://docs.google.com/spreadsheets/d/1L8jhM7FHOg86hZMIJB2L_032-JbGKzX4ht6r3mxvP0gA/gviz/tq?sheet=' + sheetName + '&headers=' + numHeaders.toString() + '&tq=' + queryString); 
    query.send(function (response) { 
    if (response.isError()) { 
     alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
     return; 
    } 

    data = response.getDataTable(); 
    chartsArray[id].draw(data, optionsArray[id]); 
    }); 
}