Read data from a database and show it in Google Charts - php

Question

I need advice on this matter, I tried to convert this sample code (https://developers.google.com/chart/interactive/docs/php_example?csw=1) from pie chart to google stacked bar chart which looks like this
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMultSeries);
function drawMultSeries() {
var data = google.visualization.arrayToDataTable([
['Genre',
/*Agriculture 4*/
'Agriculture (Plants)',
'Agriculture (Livestock)',
'Agriculture (Aquaculture)',
'Others Agriculture',
/*Beach 4*/
'Sandy Beach',
'Stoney Beach',
'Buddy Beach',
'Others Beach',
/*Shophouses 7*/
'Shophouses (Commercial )',
'Shophouses (Office)',
'Shophouses (Commercial & Residential)',
'Shophouses (Commercial & Office)',
'Shophouses (Commercial & Residential & Office)',
'Shophouses (Hotel/Inn/Budget Hotel/Lodging)',
'Others Shophouses',
{ role: 'annotation' } ],
['Agriculture',
/*Agriculture 4*/10,24,20,32,
/*Beach 4*/0,0,0,0,
/*Shophouses 7*/ 0,0,0,0,0,0,0,
''],
['Beach',
/*Agriculture 4*/0,0,0,0,
/*Beach 4*/10,20,30,40,
/*Shophouses 7*/ 0,0,0,0,0,0,0,
''],
['Shophouses',
/*Agriculture 4*/0,0,0,0,
/*Beach 4*/0,0,0,0,
/*Shophouses 7*/ 10,20,30,20,40,60,20,
'']
]);
var options = {
width: 800,
height: 400,
legend: { position: 'bottom', maxLines: 2 },
bar: { groupWidth: '50%' },
isStacked: 'percent'
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I encounter problem when replacing the var data = new google.visualization.DataTable(jsonData); with var data = google.visualization.arrayToDataTable();
The modified file from sample code is in the attachment.