How to looping on Treemap chart

Question

I have a treemap chart code and this is work, displaying treemap chart according to my expectations. But the values still on hard code. I want to looping that as much as the existing data in the database. Using for, while but went I run it, I get an error

Uncaught SyntaxError: Unexpected token for

This is my code

function drawChart(){
                    var data = google.visualization.arrayToDataTable([
                        ['Location', 'Parent' , 'Size', 'Color'],
                        ['Cabang',null,0,0],
                        [
                        for (i=0; i<0; i++){
                            console.log([dataFromPHP[i].provinsi,'Cabang',0,0],);
                        ],

                        [
                        for (j=0; j<0; j++){
                            console.log([dataFromPHP[j].kode_sales ,dataFromPHP[j].provinsi ,dataFromPHP[j].gaji ,dataFromPHP[j].count],);
                        ], ]);

And this is my working code

function drawChart(){
                    var data = google.visualization.arrayToDataTable([
                        ['Location', 'Parent' , 'Size', 'Color'],
                        ['Cabang',null,0,0],
                        [dataFromPHP[0].provinsi,'Cabang',0,0],
                        [dataFromPHP[1].provinsi,'Cabang',0,0],
                        [dataFromPHP[2].provinsi,'Cabang',0,0],
                        [dataFromPHP[0].kode_sales ,dataFromPHP[0].provinsi ,3 ,dataFromPHP[0].count],
                        [dataFromPHP[1].kode_sales ,dataFromPHP[1].provinsi ,1 ,dataFromPHP[1].count],
                        [dataFromPHP[2].kode_sales ,dataFromPHP[2].provinsi ,1 ,dataFromPHP[2].count], ]);

What should I do to make a looping values in Treemap format? Thanks in advance

This is my JSON file

[
{
    "provinsi": "Jawa Tengah",
    "pulau": "Jawa",
    "kode_sales": "SAL04",
    "gaji": "913",
    "count": "3"
},
{
    "provinsi": "Jawa Barat",
    "pulau": "Jawa",
    "kode_sales": "CLI02",
    "gaji": "500",
    "count": "1"
},
{
    "provinsi": "Jawa Timur",
    "pulau": "Jawa",
    "kode_sales": "SAL99",
    "gaji": "125",
    "count": "1"
}

]

Answer 1

first, you must complete one statement before starting another

can't have a for loop in the middle of arrayToDataTable

as for for loop, this will never run --> for (i=0; i<0; i++){

i starts at 0, and should run as long as i < 0 -- so it ends immed

try this...

var data = google.visualization.arrayToDataTable([
  ['Location', 'Parent' , 'Size', 'Color'],
  ['Cabang', null, 0, 0]
]);

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].provinsi, 'Cabang', 0, 0]);
}

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].kode_sales, dataFromPHP[i].provinsi, dataFromPHP[i].gaji, dataFromPHP[i].count]);
}

EDIT

instead of using arrayToDataTable, define the DataTable explicitly
to ensure the correct types are used

var data = new google.visualization.DataTable();
data.addColumn('string', 'Location');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Size');
data.addColumn('number', 'Color');

data.addRow(['Cabang', null, 0, 0]);

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].provinsi, 'Cabang', 0, 0]);
}

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].kode_sales, dataFromPHP[i].provinsi, dataFromPHP[i].gaji, dataFromPHP[i].count]);
}

EDIT 2

since the numbers are stored as strings in the JSON,
wrap numbers in parseFloat (floating precision) or parseInt (integer)

e.g. --> parseFloat(dataFromPHP[i].gaji)

for (var i = 0; i < dataFromPHP.length; i++) {
  data.addRow([dataFromPHP[i].kode_sales, dataFromPHP[i].provinsi, parseFloat(dataFromPHP[i].gaji), parseInt(dataFromPHP[i].count)]);
}