How to efficiently query for a stacked column chart? - mysql

Question

My use-case is creating a stacked column graph using a logs table stored in MySQL.
Currently I have a regular column chart, but I would like to aggregate data by site_id so that I can see which parts of the bar are attributed to which site.
My current technique for the existing column chart is to get a list of dates, and count the records whilst grouping by the date. Then I use a for loop to create the 14 day period I need, and then loop my data to populate matching counts into the correct day.
SELECT DATE(`created`) AS `day`,
COUNT(`id`) AS `count`
FROM `api_logs` `ApiLogs`
WHERE DATE(created) BETWEEN DATE_SUB(CURDATE(), INTERVAL 14 day) AND CURDATE()
GROUP BY DATE(`created`)
ORDER BY DATE(`created`)
For the stacked chart though, I can't think of a way to collate the data in MySQL without performing a number of queries or building a subquery to collate the count per site.
Is there an established pattern for querying for a result which is easily compatible with the stacked column chart?
My front-end is built in PHP, if there are any post-query processing solutions.

Answer 1

the problem is you need a column for each site
if you have a set number of sites, then you can build the columns manually in the sql
SELECT DATE(`created`) AS `day`,
SUM(CASE WHEN `site_id` = 'A' THEN 1 ELSE 0 END) AS `site A`,
SUM(CASE WHEN `site_id` = 'B' THEN 1 ELSE 0 END) AS `site B`
FROM `api_logs` `ApiLogs`
WHERE DATE(created) BETWEEN DATE_SUB(CURDATE(), INTERVAL 14 day) AND CURDATE()
GROUP BY DATE(`created`)
ORDER BY DATE(`created`)
otherwise, you can build the columns dynamically and aggregate
using google's DataView and data.group
first, add site_id to the sql
SELECT DATE(`created`) AS `day`,
`site_id` AS `site_id`,
COUNT(`id`) AS `count`
FROM `api_logs` `ApiLogs`
WHERE DATE(created) BETWEEN DATE_SUB(CURDATE(), INTERVAL 14 day) AND CURDATE()
GROUP BY DATE(`created`), `site_id`
ORDER BY DATE(`created`), `site_id`
which should result, similar to the following...
['Date', 'Site', 'Count'],
[new Date('11/17/2016'), 'A', 10],
[new Date('11/17/2016'), 'B', 15],
[new Date('11/17/2016'), 'C', 22],
see following working snippet for building columns dynamically...
google.charts.load('current', {
callback: function () {
// raw table data
var data = google.visualization.arrayToDataTable([
['Date', 'Site', 'Count'],
[new Date('11/17/2016'), 'A', 10],
[new Date('11/17/2016'), 'B', 15],
[new Date('11/17/2016'), 'C', 22],
[new Date('11/17/2016'), 'D', 8],
[new Date('11/16/2016'), 'A', 12],
[new Date('11/16/2016'), 'B', 6],
[new Date('11/16/2016'), 'C', 13],
[new Date('11/16/2016'), 'E', 14],
[new Date('11/15/2016'), 'A', 9],
[new Date('11/15/2016'), 'B', 16],
[new Date('11/15/2016'), 'D', 11]
]);
// create view with columns for each site, then agg view
var view = new google.visualization.DataView(data);
var aggColumns = [];
var viewColumns = [0];
data.getDistinctValues(1).forEach(function (site, index) {
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === site) {
return dt.getValue(row, 2);
}
return null;
},
label: site,
type: 'number'
});
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: site,
type: 'number'
});
});
view.setColumns(viewColumns);
var group = google.visualization.data.group(
view,
[0],
aggColumns
);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(group, {
isStacked: true
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>