Read data from a database and show it in Google Charts

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 &amp; Residential)',
    'Shophouses (Commercial &amp; Office)',
    'Shophouses (Commercial &amp; Residential &amp; 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.