使用mysql數據庫使用Canvas.js的PHP和Html圖表

Question

我想從mysql數據庫獲取數據並使用canvas.js方式繪製一個線圖.....我只是想知道如何傳遞值從數據庫中提取到dataPoints：x和y值....我; e..X將包含時間和Y包含溫度。我試圖繪製時間vs溫度圖在這裏..

我收到了這兩個使用此代碼在我的數據庫中的數據值。

$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的值，我能看到的數據庫值....

是露苗頭從我的數據庫日期時間值：

[ [[「2016/8/30 9:37」]，[「2016/8/30 9:33」]，[「2016/8/30 9:32」]，[「2016/8/30 9:32 「]，[」2016/8/30 9:32「]，[」2016/8/30 9:32「]，[」2016/8/30 9:32「]，[」2016/8/30 9 ：[「2016/8/30 9:31」]，[「2016/8/30 9:31」]]]

- 這些是我的數據庫中的溫度值：

[[[25]，[25]，[28.91]，[28.82]，[28.84]，[28.91]，[29.05]，[29.05]，[28.92]，[29.11]]]

現在我想通過這些varaibles到數據點：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> 

PLZ幫我在這....

Answer 1

您可以從this page下載CanvasJS樣品，包括渲染圖表來自mySQL數據庫的數據。

Answer 2

您需要以CanvasJS接受的格式解析數據。檢查下面

$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 
. 
. 
});