javascript — запрашиваемые данные как точки данных на Chart.js

Я пытаюсь построить график, используя Chart.JS, основываясь на моих данных из базы данных. Здесь количество меток и их значения будут получены непосредственно из результата запроса. Вот мой код:

<script type="text/javascript">
window.onload = function () {
<?php
function getValsOfCategoryLabels(){
$yValsWithLabels = "";
......
// some codes to make query on db and get result in $queryResult variable
......
......

foreach($queryResult as $data){
$x0 = $data0['name'];
$total = $data0['total'];
$yValsWithLabels = $yValsWithLabels. "{y: ".$total.", label: \"".$x0."\"}, ";
}

return $yValsWithLabels;
}

?>
var categoryLabelsNdVals = [<?php echo getValsOfCategoryLabels() ?>];
var hourlyCategoryBarChart = new CanvasJS.Chart("columnchartContainer",    {

animationEnabled: true,
axisX: {
labelFontSize: 16
},
axisY: {
title: "",
labelFontSize: 13
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center",
fontSize: 16
},
theme: "theme2",
data: [

{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "Name of Category",
dataPoints: categoryLabelsNdVals
}
]
});

hourlyCategoryBarChart.render();

Теперь для заданных точек данных (в формате «{y: Some_Value, label: Some_Name}») я не получаю диаграмму в качестве вывода, если я сам не объявил явно все значения по оси y и имена меток, что не соответствует базе данных Информация.

Как правильно достичь моей цели?