Canvasjs Säulendiagramm Aktualisierung durch Json funktioniert nicht

Question

Ich habe versucht, herauszufinden, was scheint, um das Problem mit diesem Code, aber ich kann nicht scheinen, die Lösung noch zu finden. Ich möchte, dass dieses Säulendiagramm jede Sekunde mit den Daten von chartOne.php aktualisiert wird, das Diagramm wird aktualisiert, aber die Daten werden nicht angezeigt.

Hier ist der Code chartOne.php ist:

<?php 
include_once("connect.php"); 

$grabOne = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='1'") or die(mysql_error()); 
while($rows = mysqli_fetch_array($grabOne)){ 
    $oneCount = $rows['count']; 
} 
$grabTwo = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='2'") or die(mysql_error()); 
while($rows = mysqli_fetch_array($grabTwo)){ 
    $twoCount = $rows['count']; 
} 
$grabThree = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='3'") or die(mysql_error()); 
while($rows = mysqli_fetch_array($grabThree)){ 
    $threeCount = $rows['count']; 
} 

echo json_encode(array(
    array("id"=>"0","count"=>$oneCount), 
    array("id"=>"1","count"=>$twoCount), 
    array("id"=>"2","count"=>$threeCount) 
)); 

Hier ist das Skript:

window.onload = function() { 
    var dps = [ 
     {label: "Person One", y: 0} , 
     {label: "Person Two", y: 0}, 
     {label: "Person Three", y: 0}, 
    ]; 

    var chart = new CanvasJS.Chart("chartContainer",{ 
     theme: "theme2", 
     title:{ 
      text: "Students' Votes" 
       }, 
      axisY: {     
      title: "" 
       },     
      legend:{ 
      verticalAlign: "top", 
      horizontalAlign: "centre", 
      fontSize: 18 

     }, 
     data : [{ 
      type: "column", 
      showInLegend: true, 
      legendMarkerType: "none",    
      legendText: " ", 
      indexLabel: "{y}", 
      dataPoints: dps 
     }] 
    }); 
    chart.render(); 
    var updateInterval = 1000; 
    var updateChart = function() { 
     $.get("chartOne.php", function(data) { 
      $.each(data, function(n, val) { 
       chart.options.data[0].dataPoints[n].y = val.count; 
      }); 
     }, "json"); 
     chart.render(); 
    }; 
    setInterval(function(){updateChart()}, updateInterval); 
} 

Daten auf der Seite MySQL ist wie folgt:

id | count 
1 | 100 
2 | 200 
3 | 150 

Nach einer zweiten Von der Seitenladung wird das Diagramm in

Ich habe versucht, document.write(); es und die Daten zeigen sich gut. Kann mir jemand helfen? Danke im Voraus.

Answer 1

Okay, also danke @ oneskinnydj's Beitrag (console.log Idee). Ich fand heraus, dass die MySQL-Abfrage eine Zeichenfolge anstelle einer ganzen Zahl zurückgab, die CanvasJS benötigt. Um dies zu tun, müssen Sie die mysqli_fetch_array(); in: Der

mysqli_fetch_assoc(); 

ist das Endergebnis des PHP-Teils Also:

<?php 
include_once("connect.php"); 

$grabOne = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='1'") or die(mysql_error()); 
while($rows = mysqli_fetch_assoc($grabOne)){ 
    $oneCount = intval($rows['count']); 
} 
$grabTwo = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='2'") or die(mysql_error()); 
while($rows = mysqli_fetch_assoc($grabTwo)){ 
    $twoCount = intval($rows['count']); 
} 
$grabThree = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='3'") or die(mysql_error()); 
while($rows = mysqli_fetch_assoc($grabThree)){ 
    $threeCount = intval($rows['count']); 
} 

$data = json_encode(array(
        array("id"=>"Person One","count"=>$oneCount), 
        array("id"=>"Person Two","count"=>$twoCount), 
        array("id"=>"Person Three","count"=>$threeCount) 
       )); 

echo $data; 

JavaScript-Teil ist das gleiche wie zuvor, aber besser (dank @oneskinnydj) stell die chart.options.data [0] .dataPoints [n] .y = val.count; in diese:

chart.options.data[0].dataPoints[n] = { label: val.id, y: val.count }; 

Answer 2

Das Problem ist, wie Sie Ihre Daten zum Diagramm hinzufügen. Die wichtige Linie ist dies:

chart.options.data[0].dataPoints[n] = { label: val.id, y: val.count }; 

Vollarbeitsbeispiel unten, nicht ich drucke die JSON-Daten, anstatt sie aus der Ferne zu holen, aber es sollte gut funktionieren, wenn Sie in dem $ .get tauschen zurück:

<!DOCTYPE HTML> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> 
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script> 
    <script type="text/javascript"> 

     <?php 

     $data = json_encode(array(
      array("id"=>"Person One","count"=>20), 
      array("id"=>"Person Two","count"=>10), 
      array("id"=>"Person Three","count"=>15) 
     )); 

     echo "var data = {$data}"; 

?> 

     window.onload = function() { 
      var dps = [ 
       {label: "Person One", y: 0} , 
       {label: "Person Two", y: 0}, 
       {label: "Person Three", y: 0}, 
      ]; 

      var chart = new CanvasJS.Chart("chartContainer",{ 
       theme: "theme2", 
       title:{ 
        text: "Students' Votes" 
       }, 
       axisY: { 
        title: "" 
       }, 
       legend:{ 
        verticalAlign: "top", 
        horizontalAlign: "centre", 
        fontSize: 18 

       }, 
       data : [{ 
        type: "column", 
        showInLegend: true, 
        legendMarkerType: "none", 
        legendText: " ", 
        indexLabel: "{y}", 
        dataPoints: dps 
       }] 
      }); 
      chart.render(); 
      var updateInterval = 1000; 
      var updateChart = function() { 

        $.each(data, function(n, val) { 
         console.log(n); 
         console.log(val); 
         chart.options.data[0].dataPoints[n] = { label: val.id, y: val.count }; 

        }); 

       chart.render(); 
      }; 
      setInterval(function(){updateChart()}, updateInterval); 
     } 
    </script> 
</head> 
<body> 
<div id="chartContainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html>