Canvasjs column chart updating through json not working

Question

I've been trying to figure out what's seems to the problem with this code but I can't seem to find the solution yet. So I want this column chart to refresh every second with the data from chartOne.php, the chart does update but the data doesn't show up.

Here is the chartOne.php code:

<?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)
));

Here is the script:

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

Data on the MySQL side is like this:

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

After a second from the page load the chart turns into this

I've tried document.write(); it and the data shows well. Can anybody help me? Thanks in advance.

Answer 1

Okay, so thanks to @oneskinnydj's post (console.log idea). I found out that the MySQL query returned a string instead of an integer which what CanvasJS needs. So to do that you need to change the mysqli_fetch_array(); into:

mysqli_fetch_assoc();

So the end result of the php part is this:

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

The javascript part is the same as before but better (thanks to @oneskinnydj) change the chart.options.data[0].dataPoints[n].y = val.count; into this:

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