Как сделать цикл внутри JavaScript с помощью переменной PHP

Я нашел этот великий ресурс в Chart.js — получение данных из базы данных с использованием mysql и php но мне немного нужна помощь, чтобы получить эти записи из базы данных. Это то, что я уже сделал, следуя руководству выше.

сохраните php в отдельном файле api.php и вызовите api.php, используя JSON. Но мне нужно было сделать

этикетки: [«Январь», «Февраль», «Март», «Апрель», «Май»]

а также

данные: [randomScalingFactor (), randomScalingFactor (), randomScalingFactor ()]

раздел динамически извлекает данные из базы данных sql. для этикетка мне нужно было установить значения, которые вводятся дата в базу данных и для данные Мне нужно было установить значение, которое вводится в базу данных соответственно. Я был бы признателен, если бы кто-нибудь мог направить меня с этим.
Спасибо!

api.php

<?php

$id    = $_REQUEST['ID'];
$item1 = $_REQUEST['item'];

$sql = "SELECT * FROM item WHERE item_sup_company = '$id' AND subcategory = '$item1' ORDER BY item_id DESC";

$ser      = new DBConnection();
$serchRes = $ser->executeQuery($sql);
$result   = mysql_fetch_object($serchRes);



$arrLabels   = $result->date;
$arrdata     = $result->item_price;
$arrDatasets = array(
'label' => "My First dataset",
'fillColor' => "rgba(220,220,220,0.2)",
'strokeColor' => "rgba(220,220,220,1)",
'pointColor' => "rgba(220,220,220,1)",
'pointStrokeColor' => "#fff",
'pointHighlightFill' => "#fff",
'pointHighlightStroke' => "rgba(220,220,220,1)",
'data' => $arrdata
);

$arrReturn = array(
array(
'labels' => $arrLabels,
'datasets' => $arrDatasets
)
);

print(json_encode($arrReturn));
?>

index.html

<script type="text/javascript">
$.ajax({
type: 'POST',
url: '../include/chart-api.php',
success: function(data) {
lineChartData = data;
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);

var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
});

var randomScalingFactor = function() {
return Math.round(Math.random() * 1000)
};

window.onload = function() {
var chart1 = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(chart1).Line(lineChartData, {
responsive: true
});

};
</script>
<div class="canvas-wrapper">
<canvas class="main-chart" id="line-chart" height="200" width="600"></canvas>
</div>

Теперь я достиг этого шага, и мне нужно было какое-то тело, чтобы помочь мне в этом. Уже извлекаются записи заданных значений на графике. Тем не менее, график показывает мне только одну запись для всех значений.

Вот как я это сделал.

<?php


$sqlchart = "SELECT * FROM item WHERE item_sup_company = '$id' AND subcategory = '$item1' ORDER BY item_id DESC";


$chartres = new DBConnection();
$chartr   = $chartres->executeQuery($sqlchart);

?><?php

while ($chartrows = mysql_fetch_object($chartr)) {

$monthdate = strtotime($chartrows->date);
$todate    = date("M", $monthdate);

$arrLabels1 = $todate;

$arrdata1 = $chartrows->item_price;
echo $arrLabels1 . ' ' . $arrdata1 . "<br/>";

//$arrDatasets = array('label' => "My First dataset",'fillColor' => "rgba(220,220,220,0.2)", 'strokeColor' => "rgba(220,220,220,1)", 'pointColor' => "rgba(220,220,220,1)", 'pointStrokeColor' => "#fff", 'pointHighlightFill' => "#fff", 'pointHighlightStroke' => "rgba(220,220,220,1)", 'data' => $arrdata);

//$arrReturn = array(array('labels' => $arrLabels, 'datasets' => $arrDatasets));

//print (json_encode($arrReturn));

?>

<script type="text/javascript">
var randomScalingFactor = function() {
return Math.round(Math.random() * 10)
};

var lineChartData = {

labels : ["<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>","<?php echo $arrLabels1; ?>"],
datasets: [

{
label: "My Second dataset",
fillColor: "rgba(48, 164, 255, 0.2)",
strokeColor: "rgba(48, 164, 255, 1)",
pointColor: "rgba(48, 164, 255, 1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(48, 164, 255, 1)",
data : [<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>,<?php echo $arrdata1; ?>]
}

]

}

window.onload = function() {
var chart1 = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(chart1).Line(lineChartData, {
responsive: true
});

};
</script>
<?php
}
?>