Googe Pie Chart PHP - php

Question

Why can't I add data to my google pie chart?
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
<?php
foreach($piechartcaloy as $value){
echo "['".$value['product_name']."',".$value['TEST']."],";
}
?>
]);
var options = {
title: 'TOP 10 products'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}
it vanished the pie chart when i add the
<?php
foreach($piechartcaloy as $value){
echo "['".$value['product_name']."',".$value['TEST']."],";
}
?>
but if i add a normal
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['test',1]
]);
it work but why does my php does not working although i tried to print_r($data);die; my data array it shows like this
Array ( [piechartcaloy] => Array ( [0] => Array ( [product_name] => REG Okinawa [TEST] => 1 ) [1] => Array ( [product_name] => French Fries [TEST] => 0 ) ) )
It has values in it but why can't I populate it? What is wrong in my loop in the pie chart?

Answer 1

i already solved the answer and noticed that the array was having a space so i tried using trim(); and it works trim removes extra spaces that fix the problem.
here is the code i implement
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
<?php
foreach($piechartcaloy as $value){
echo "['".trim($value['product_name'])."',".trim($value['TEST'])."],";
}
?>
]);
var options = {
title: 'TOP 10 Fast Moving products'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
}