为什么谷歌图表没有显示图表中的数据

时间:2018-01-19 15:35:00

标签: javascript php

我不明白为什么我的谷歌图表没有显示数据? 代码没有显示错误,但它没有图表中的数据。请让我知道为什么会这样。谢谢。 这是我的PHP代码。

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

这是我的javascript代码。

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

1 个答案:

答案 0 :(得分:0)

假设您的json数据已正确生成,您需要在php文件中回显json数据并调整javascript中的drawChart函数。

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

这在Google图表文档中列出:https://developers.google.com/chart/interactive/docs/php_example