chart.jsにSQLデータを取り込む方法は？

Question

私は自分のページにchart.jsを使ってグラフを生成しています。 しかし、私はこれらのグラフを自分のSQLデータベースに取り込みたいと思います。 データベースからデータを取得できますが、グラフを描画しません。

メインページに「OmzetChart」という名前のキャンバスがあります。ここにグラフが表示されます。以下で

<script> 
    $.ajax({ 
     type: 'POST', 
     url: 'templates/getdata.php', 
     success: function (data) { 
      lineChartData = data; 
      //alert(JSON.stringify(data)); 

      var ctx = document.getElementById("OmzetChart").getContext("2d"); 
      var myLineChart = new Chart(ctx, { 
       type: 'line', 
       data: lineChartData 

      }); 
     } 
    }); 

</script> 

GetData.php結果のページには、（これは、私は必要なものである私のチャートにそれをしたい）：

[{"dag":"23","0":"23","uur":"13","1":"13","SomOmzet":"23.00","2":"23.00"},{"dag":"23","0":"23","uur":"18","1":"18","SomOmzet":"2.50","2":"2.50"}] 

Getdata.php: 
<?php 
include ("../PDO.php"); 


$conn = DatabasePDO::getInstance(); 
$sql = "SELECT DATEPART(DD, receiptdatetime) as dag ,DATEPART(hh, receiptdatetime) as uur, ISNULL(abs(cast(sum(NetAmount) as decimal (10,2))),0) as SomOmzet FROM ReceiptLine a , Receipt b, ReceiptLineDetail c 
where a.LineType = 200 and a.receiptID = b.receiptid and a.receiptlineID = c.receiptlineID 
group by DATEPART(DD, receiptdatetime), DATEPART(hh, receiptdatetime)"; 
$st = $conn->prepare($sql); 
$st->execute(); 
$list = array(); 

while ($row = $st->fetch()) { 
    $list[] = $row; 

} 
$conn = null; 

echo json_encode($list); 

?> 

Answer 1

json_encode()は、JSON文字列を生成します。使用する前にJSON.parse()とparseこれをする必要があります。

$.ajax({ 
    type: 'POST', 
    url: 'templates/getdata.php', 
    success: function (data) { 
     lineChartData = JSON.parse(data); //parse the data into JSON 

     var ctx = document.getElementById("OmzetChart").getContext("2d"); 
     var myLineChart = new Chart(ctx, { 
      type: 'line', 
      data: lineChartData 
     }); 
    } 
}); 

また、$.ajax()方法のdataTypeパラメータを使用して、あなたはjQueryのこの構文解析を残すことができます。

$.ajax({ 
    type: 'POST', 
    url: 'templates/getdata.php', 
    dataType: 'json', //tell jQuery to parse received data as JSON before passing it onto successCallback 
    success: function (data) { 
     var ctx = document.getElementById("OmzetChart").getContext("2d"); 
     var myLineChart = new Chart(ctx, { 
      type: 'line', 
      data: data //jQuery will parse this since dataType is set to json 
     }); 
    } 
});