Display Vertical bar chart with grouped bars. - php

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>