PHP - Google Charts - php

Question

I'm trying to use Google Charts and i'm having some trouble to create array for API.
https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts
My source of data has 3 columns, which is quantity, date and user name.
(you can see in attachment).
How to convert his form of array to use with google charts api (line charts)?
I think i need to convert each different value from column "responsavel" to a new column and set these column the value of column "qt_pedido"
In this example, the final array should be something like this:
Date | user1 | user2
-------------------------------
03/09/2018 | 58 | 19
05/09/2019 | 23 | 5
Result from sql server

Answer 1

it would be easier to use google data table methods to transform the rows to columns,
see following working snippet...
google.charts.load('current', {
packages: ['line']
}).then(function () {
// create data table
var data = google.visualization.arrayToDataTable([
['Date', 'responsavel', 'qt_pedido'],
['20/10/2018', 'user1', 10],
['20/10/2018', 'user2', 20],
['20/10/2018', 'user3', 30],
['20/11/2018', 'user1', 40],
['20/11/2018', 'user2', 50],
['20/11/2018', 'user3', 60],
['20/12/2018', 'user1', 70],
['20/12/2018', 'user2', 80],
['20/12/2018', 'user3', 90],
]);
// create data view
var view = new google.visualization.DataView(data);
// column arrays
var aggColumns = [];
var viewColumns = [0];
// build view & agg columns for each responsibility
data.getDistinctValues(1).forEach(function (responsibility, index) {
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === responsibility) {
return dt.getValue(row, 2);
}
return null;
},
label: responsibility,
type: 'number'
});
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: responsibility,
type: 'number'
});
});
// set view columns
view.setColumns(viewColumns);
// sum view by date
var aggData = google.visualization.data.group(
view,
[0],
aggColumns
);
// draw chart
var chart = new google.charts.Line(document.getElementById('chart_div'));
chart.draw(aggData);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>