Google Charts

Google Charts and Alasql

Based on StackOverflow.com question

Question

The plan is to use alaSQL to extract data from an excel spread sheet and use the resultant array as the source for a Google chart. How I can do it?

Answer

    <script src="alasql.min.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>
    <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"})', 
                [], function (xlData) {
                var items = [];
                xlData.forEach(function (key, val) {
                    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'));

                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>