why google chart didn't display the data in the chart

Question

I don't understand why my google chart didn't display the data? the code didn't show the wrong, but it is not have data in the chart. Please let me know why this happen.Thank you. this is my php code.

<?php
$query="SELECT Time, Temperature FROM (SELECT Time, Temperature FROM fish_tank_parameter order by Time desc limit 10)as a order by Time";
$result=db_connection($query);
function db_connection($query){
    $link=mysqli_connect("localhost","root","","hfjq_race_info");
    return mysqli_query($link,$query);
}

$rows = array();
$table = array();

$table['cols'] = array(
    array(
        'label' => 'Time',
        'type' => 'number'
    ),
    array(
        'label' => 'Temperature',
        'type' => 'number'
    )
);

while($row = mysqli_fetch_array($result)){
    $sub_array = array();
    $datetime = explode("." , $row["Time"]);
    $sub_array[] = array(
        "v" => 'Date('. $datetime[0] .'000)'
    );
    $sub_array[] = array(
        "v" => $row["Temperature"]
    );
    $rows[] = array(
        "c" => $sub_array
    );
}
$table['rows'] = $rows;
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
?>

this is my javascript code.

        google.charts.load('current',{'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart(){
            $.ajax({
                url: "http://localhost/test/get_temp.php",
                dataType: "json",
                    var data = new google.visualization.DataTable(jsonData);
                    var chart = new google.visualization.LineChart(document.getElementById('tempflot'));
                    chart.draw(data,{width: 800, height: 400});
                }
            });
        }

Answer 1

Assuming your json data is correctly generated, you will need to echo your json data in your php file and adjust the drawChart function in your javascript.

PHP:

echo $jsonTable;  // just before closing php tag

JS:

function drawChart() {
    var jsonData = $.ajax({
        url: "http://localhost/test/get_temp.php",
        dataType: "json",
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('tempflot'));
    chart.draw(data,{width: 800, height: 400});
}

This is laid out in the Google Chart Documentation : https://developers.google.com/chart/interactive/docs/php_example