Google Chart is displaying the empty graph

Question

I have a chart where i am fetching values from MySQL table. I am able to get values but not able to show it in bar chart. The chart is returning empty graph as shown in image below.

As you can see the values are coming in the console but the graph is not displaying.

alerts.php

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);

      var chart;
      var data;
      var options;

      function drawChart() {
        dataTable = google.visualization.arrayToDataTable([
          ['Floor', 'Sales', 'Expenses'],
          ['Floor 1',  1000,      400],
          ['Floor 2',  1170,      460],
          ['Floor 3',  660,       1120],
          ['Floor 4',  1030,      540]
        ]);

        options = {
          title: 'Company Performance for 1 month',
          hAxis: {title: 'Floor', titleTextStyle: {color: 'red'}}
        };
        chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
      }

      // function to update the chart with new data.
      function updateChart() {

          dataTable = new google.visualization.DataTable();

            var newData = [['Floors','CO2(1)', 'CO2(2)', 'CO2(3)'],

              <?php 
              $connect = mysqli_connect("localhost", "root", "", "test2");  
              $sql = "SELECT total AS sum_sales FROM expense WHERE asset_type = 'carbon-dioxide' AND floor = 'floor2'";
              $result = mysqli_query($connect, $sql);  

                $sales_query = $conn->query($sql);
                $sales_row = $sales_query->fetch_assoc();

                //expense
                $sql = "SELECT expenses AS sum_expenses FROM expense WHERE asset_type = 'carbon-dioxide' AND floor = 'floor2'";
                $expense_query = $conn->query($sql);
                $expense_row = $expense_query->fetch_assoc();
               $profit = $sales_row['sum_sales'] - $expense_row['sum_expenses'];
                //displaying the needed data
                echo '['.$sales_row['sum_sales'].', '.$expense_row['sum_expenses'].', '.$profit.'],';

                ?>
           ];

          var numRows = newData.length;
          var numCols = newData[0].length;

          // in this case the first column is of type 'string'.
          dataTable.addColumn('string', newData[0][i]);
        options = {
          title: 'Gas Performance',
          hAxis: {title: 'Floors', titleTextStyle: {color: 'red'}}
        };

          for (var i = 1; i < numCols; i++)
            dataTable.addColumn('number', newData[0][i]);           

          // now add the rows.
           for (var i = 0; i < numRows.length; i++) 
              dataTable.addRow(i, Number(newData[i]));  
        console.log(newData);          

          // redraw the chart.
          chart.draw(dataTable, options);    

          // console.log(dataTable);    
      }
    <label>Select period</label> <select name="vbitratecontrol0" id="combo1">;
      <option value="24h">1 Day</option>
      <option value="1w">1 Week</option>
      <option value="1m">1 Month</option>
      <option value="3m">3 Month</option>
      <option value="6m">6 Month</option>
      <option value="1y">1 Year</option>
      <option value="2y">2 Year</option>
      <option value="all">All</option>

  </select>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    $(document).on('change', 'select', function() {
    console.log($(this).val()); // the selected options’s value
var aaa =$(this).val();
    // if you want to do stuff based on the OPTION element:
    var opt = $(this).find('option:selected')[0];
  console.log(opt);
    // use switch or if/else etc.
  if(aaa === "3m"){
  updateChart();
  }
});

The chart is not displaying the bar graph but values are fetched from database and you can see the values in console. Help me solve the issue.

Thank you!!

Answer 1

addRow only accepts an array

dataTable.addRow(newData[i]);

or no arguments for a blank row

dataTable.addRow();

however, newData only has three elements, the dataTable has four columns

be sure those match in number...