Wie zeichne Balkendiagramm mit Datenbankwert

Question

Ich habe einen Wert in meiner Datenbank. Ich möchte ein Diagramm mit diesen Werten erstellen.

Hier ist meine PHP-Code verbinden Datenbank:

<?php 
header('Content-Type: text/html; charset=utf-8'); 

//database 
define('DB_HOST', 'localhost'); 
define('DB_USERNAME', 'futurk_etkin'); 
define('DB_PASSWORD', 'etkin'); 
define('DB_NAME', 'futurk_etkin'); 

//get connection 
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME); 

if(!$mysqli){ 
    die("Connection failed: " . $mysqli->error); 
} 

//query to get data from the table 
$query = sprintf("SELECT SUM(akim) FROM etkin GROUP BY YEAR(tarih),MONTH(tarih)"); 

//execute query 
$result = $mysqli->query($query); 

//loop through the returned data 
$data = array(); 
foreach ($result as $row) { 
    $data[] = $row; 
} 

//free memory associated with result 
$result->close(); 

//close connection 
$mysqli->close(); 

echo json_encode($data); 
?> 

Dieser Code Ausgabe lautet:

[{ "SUM (akim)": "851"}, { "SUM (Akim) ":" 64 "}]

Jetzt habe ich Skript, um Diagramm zu zeichnen. Hier ist mein Script-Code:

<script> 
    $(document).ready(function(){ 
    var data = <?php echo json_encode($data) ?>; 

      var akim = []; 

      for(var i in data) { 
       akim.push(data[i].SUM(akim)); 
      } 

       var chartdata = { 
        labels: id, 
        datasets : [ 
         { 
          label: 'akim', 
          backgroundColor: 'rgba(200, 200, 200, 0.75)', 
          borderColor: 'rgba(200, 200, 200, 0.75)', 
          hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
          hoverBorderColor: 'rgba(200, 200, 200, 1)', 
          data: akim 
         } 
        ] 
       }; 

       var ctx = $("#mycanvas1"); 

       var barGraph = new Chart(ctx, { 
        type: 'bar', 
        data: chartdata 
       }); 
     }); 
    </script> 

Wo ich falsch bin? Ich denke, es sollte funktionieren, aber es funktioniert nicht.

Answer 1

Diese Funktionalität kann mit einer Javascript-Bibliothek namens ChartJs erreicht werden. Sie können die Dokumentation für weitere Details lesen. http://www.chartjs.org/docs/#bar-chart-introduction