title: Google Column Charts from MySQL
body: <p>I want to fetch data for today's sales from MySQL database. With the code below, I can only show one menu ID in the chart. I want to show it like there are S001, S002, S003, S004 and S005. The quantity of the items will be shown even it's zero.</p>
  
  <pre><code>function drawChart() {
  
      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Food');
      data.addColumn('number', 'Quantity');
      data.addRows([
        &lt;?php
          $i = 0;
          require "init.php";
          $menu_id = "S001";
  
          //query db
          $sql = "SELECT m.food_name, SUM(o.quantity) AS quantity FROM `Order` o INNER JOIN `Menu` m ON m.menu_id = o.FK_menu_id WHERE DATE(`ordered_on`) = CURDATE() AND o.FK_menu_id = '$menu_id'";
          $result = mysqli_query($con, $sql) or die("Error: ".mysqli_error($con));
  
          while ($row = mysqli_fetch_array($result)) {
            $i++;
            echo "['".$row['food_name']."', ".$row['quantity']."]";
            if ($i &lt; $row) {
              echo ",";
            }
          }
        ?&gt;
      ]);
  
      // Set chart options
      var options = {'title':"Today's Sales",
                     'width':600,
                     'height':450,
                     'legend':'none'};
  
      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </code></pre>
  
  <p>The figure is the output for current code:
  <a href="https://i.stack.imgur.com/o0eRS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o0eRS.png" alt="enter image description here"></a></p>