Wie befüllen Sie chart.js mit SQL-Daten?

Question

Ich verwende chart.js, um Diagramme auf meiner Seite zu generieren. Allerdings möchte ich diese Diagramme von meiner SQL-Datenbank gefüllt werden. Ich bin in der Lage, meine Daten aus meiner Datenbank zu bekommen, aber ich werde das Diagramm nicht zeichnen

Ich habe eine Leinwand auf meiner Hauptseite namens "OmzetChart", das ist, wo das Diagramm kommen sollte.

<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> 

Die Seite von GetData.php Ergebnisse in der folgenden (Dies ist, was ich brauche, will es einfach in mein Diagramm):

[{"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() erzeugt einen JSON-String. Sie müssen parse dies mit JSON.parse() bevor Sie es verwenden können.

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

Auch mit $.ajax()dataType Parameter Methode, können Sie diese Analyse zu jQuery verlassen.

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