alaSQL и Google Charts

Question

Планируется использовать alaSQL для извлечения данных с листа расширенного расширения и использования результирующего массива в качестве источника для диаграммы Google. Проблема в том, что я не могу получить результаты вызова alaSQL, чтобы правильно заполнить 2-мерный массив, который Google требует графики api. он не выдает ошибку, но не дает никаких результатов.

Вот код:

 var data_cities = []; 
     data_cities = new google.visualization.DataTable(); 
     data_cities.addColumn('string', 'City'); 
     data_cities.addColumn('number', 'Population'); 
     data_cities.addRows(3); 
     var row_Counter = 0; 

     alasql('select * from xlsx("cities.xlsx", {headers:true, sheetid:"Cities", range:"A1:B4"})', //case senstitive on sheet, column name and value 
       [], function (xlData) { 
        $.each(xlData, function (key, val) { 
         //alert(key + " : " + val); 
         items.push("<li>City: " + this['City'] + "</li>" + "<li>Pop: " + this['Population'] + "</li>"); 

         data_cities.setCell(row_Counter, 0, val.City); 
         data_cities.setCell(row_Counter, 1, val.Population); 
         row_Counter = row_Counter + 1; 
        }); 

        $('<ul/>', { 
         html: items.join('') 
        }).appendTo('div#divgetJSON'); 
       }); 

     var chart_cities = new google.visualization.ColumnChart(document.getElementById('chart_div_cities')); 
     drawChart_Cities(); 

     function drawChart_Cities() { 
      // Set chart options 
      var options_cities = { 
       'title': 'Populations of Major Cities', 
       'width': 1800, 
       'height': 400, 
       vAxis: { title: "Population", titleTextStyle: { fontSize: 16, bold: true, italic: false } }, 
       hAxis: { title: "City", titleTextStyle: { fontSize: 16, bold: true, italic: false } }, 
       seriesType: "bars", 
       animation: { 
        duration: 800, 
        easing: 'inout', 
       }, 
       allowHtml: true, 
       bar: { groupWidth: "65%" }, 
       legend: { position: "bottom" }, 
       is3D: true, 
      }; 

      chart_cities.draw(data_cities, options_cities); 
     } 

Answer 1

Я изменил код немного и поместить все файлы в this archive.

Возможно, проблема заключается в том, что Alasql читает файл XLSX с асинхронным интерфейсом, но вы пытаетесь прочитать данные вне функции обратного вызова Alasql.

<script src="alasql.min.js"></script> 
<script src="jquery.js"></script> 
<script src="xlsx.core.min.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="chart_div_cities"></div> 
<div id="divgetJSON"></div> 
<script> 
    google.load('visualization', '1', {'packages':['corechart']}); 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     var data_cities = []; 
     data_cities = new google.visualization.DataTable(); 
     data_cities.addColumn('string', 'City'); 
     data_cities.addColumn('number', 'Population'); 
     data_cities.addRows(3); 
     var row_Counter = 0; 

     alasql('select * from XLSX("cities.xlsx", {headers:true, sheetid:"Cities", range:"A1:B4"})', //case senstitive on sheet, column name and value 
      [], function (xlData) { 
       var items = []; 
       $.each(xlData, function (key, val) { 
        items.push("<li>City: " + this['City'] + "</li>" + "<li>Pop: " + this['Population'] + "</li>"); 

        data_cities.setCell(row_Counter, 0, val.City); 
        data_cities.setCell(row_Counter, 1, val.Population); 
        row_Counter = row_Counter + 1; 
       }); 


      var chart_cities = new google.visualization.ColumnChart(document.getElementById('chart_div_cities')); 
      drawChart_Cities(); 

      function drawChart_Cities() { 
       // Set chart options 
       var options_cities = { 
        'title': 'Populations of Major Cities', 
        'width': 1800, 
        'height': 400, 
        vAxis: { title: "Population", titleTextStyle: { fontSize: 16, bold: true, italic: false } }, 
        hAxis: { title: "City", titleTextStyle: { fontSize: 16, bold: true, italic: false } }, 
        seriesType: "bars", 
        animation: { 
         duration: 800, 
         easing: 'inout', 
        }, 
        allowHtml: true, 
        bar: { groupWidth: "65%" }, 
        legend: { position: "bottom" }, 
        is3D: true, 
       }; 

       chart_cities.draw(data_cities, options_cities); 
      } 

     }); 
    }; 
</script> 

Отказ от ответственности: Я являюсь автором Alasql.