javascript — диаграмма php и html с использованием Canvas.js с использованием базы данных mysql

Я пытаюсь извлечь данные из базы данных mysql и построить линейный график, используя метод canvas.js ….. Я просто хочу знать, как передать значения, которые я выбрал из базы данных, в dataPoints: значения x и y … .i; e..X будет содержать время, а Y содержит температуру. Я пытаюсь построить график зависимости времени от температуры здесь ..

Я получил эти два значения данных из моей базы данных в php, используя этот код.

$sql1 = "SELECT Time FROM sdata ORDER BY ID DESC LIMIT 10;";
$response1 = mysqli_query($connect, $sql1) or die(mysqli_error($connect));
while($row1 = mysqli_fetch_all($response1)){
$r1[]= $row1;
}

$sql2 = "SELECT Temperature FROM sdata ORDER BY ID DESC LIMIT 10;";
$response2 = mysqli_query($connect, $sql2) or die(mysqli_error($connect));
while($row2 = mysqli_fetch_all($response2)){
$r2[]= $row2;
}

Здесь, когда я даю эхо и вижу значения r1 и r2, я могу видеть значения базы данных ….

—Это значения DateTime из моей базы данных:

[[[«30.08.2016 9:37»], [«30.08.2016 9:33»], [«30.08.2016 9:32»], [«30.08.2016 9: 32 «], [» 30.08.2016 9:32 «], [» 30.08.2016 9:32 «], [» 30.08.2016 9:32 «], [» 30.08.2016 9:31 «], [» 30.08.2016 9:31 «], [» 30.08.2016 9:31 «]]]

—Это значения температуры из моей базы данных:

[[[25], [25], [28,91], [28,82], [28,84], [28,91], [29,05], [29,05], [28,92], [29,11]]]

Теперь я хочу передать эти переменные dataPoints: x и y, как показано в коде ниже:

<script type="text/javascript">
window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Line Chart"},
axisX: {

interval: 5,
title: "Time",
valueFormatString: "hh:mm TT",

},
axisY: {

interval: 20,
title: "Temp"
},
data: [{
type: "line",
dataPoints: ???????????(HOW DO I PASS THE r1 and r2 values here for x and y respectively so that it give me a line chart is my question)

}]
});
chart.render();

}
</script>

Пожалуйста, помогите мне в этом ….

$r1=[[["8/30/2016 9:37"],["8/30/2016 9:33"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:31"],["8/30/2016 9:31"],["8/30/2016 9:31"]]];

$r2=[[[25],[25],[28.91],[28.82],[28.84],[28.91],[29.05],[29.05],[28.92],[29.11]]];
$dataPoints=array();
for($i=0;$i<count($r1[0]);$i++){
array_push($dataPoints,array('x'=> strtotime($r1[0][$i][0])*1000,'y'=>$r2[0][$i][0]));
}

var chart = new CanvasJS.Chart("chartContainer", {
.
.
dataPoints: <?php echo json_encode($dataPoints); ?> // edited
.
.
});