Display Vertical bar chart with grouped bars.

Question

I am trying to create barchart using google charts. I want to display both Sales Orders and Sales Quotations total value each month. Now i have done it like this, it displays only orders value for each month that too in horizontal format. I am not getting how to show both the values using single barchart (vertically)

here is my code

$query = "SELECT MONTHNAME(last_modified) as month, 
                 orders.sales_order_id, 
                 orders.authorise, orders.company_id,
                 before_order_line_items.sales_order_id,
                 before_order_line_items.item,
                 before_order_line_items.uom, 
                 SUM(before_order_line_items.total) AS 'Total',
                 before_order_line_items.tax from orders INNER JOIN  
                 before_order_line_items ON
                 orders.sales_order_id ON    
                 before_order_line_items.sales_order_id  
           where orders.order_quote = 'Order' 
           AND orders.authorise='Yes' 
           GROUP BY MONTH(orders.last_modified) 
           ORDER BY MONTH(orders.last_modified)";

 $result = mysqli_query($con, $query);
  while ($row = mysqli_fetch_array($result))
    {
      $myurl[] = "['".$row['month']."', ".$row['Total']."]";

    }

<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Month', 'Actuals'],
         /* ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]*/


            <?php echo implode(",", $myurl); 

            ?>

        ]);

        var options = {
          title: 'Orders',
          vAxis: {title: '',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

Answer 1

first, need to adjust sql to return both the values

then add columns to $myurl[]

$myurl[] = "['".$row['Month']."', ".$row['Quotes'].", ".$row['Orders']."]";

from there, draw the chart, but recommend using loader.js vs. older library jsapi

something like this should be close...

$query = "SELECT
            MONTHNAME(last_modified) as Month,
            SUM(case when orders.order_quote = 'Order' then before_order_line_items.total else 0 end) AS Orders,
            SUM(case when orders.order_quote = 'Quote' then before_order_line_items.total else 0 end) AS Quotes
          FROM orders
          INNER JOIN before_order_line_items
          ON orders.sales_order_id = before_order_line_items.sales_order_id
          WHERE orders.authorise = 'Yes'
          GROUP BY MONTH(orders.last_modified)
          ORDER BY MONTH(orders.last_modified)";

$result = mysqli_query($con, $query);
while ($row = mysqli_fetch_array($result)) {
  $myurl[] = "['".$row['Month']."', ".$row['Quotes'].", ".$row['Orders']."]";
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {
    callback: drawChart,
    packages: ['corechart']
  });

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Quotes', 'Orders'],
      <?php
        echo implode(",", $myurl);
      ?>
    ]);

    var options = {
      title: 'Orders',
      vAxis: {
        title: '',
        titleTextStyle: {
          color: 'red'
        }
      }
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>