使用 JSON 的谷歌图表答案

【问题标题】：Google Charts using JSON使用 JSON 的谷歌图表
【发布时间】：2015-12-18 18:25:06
【问题描述】：

我以前没有使用过谷歌图表，但我正在尝试使用位于房子周围的传感器绘制一些温度图表，但我一直遇到异常。我相当肯定它，因为 JSON 的格式不正确，但在它需要什么格式以及如何让我的脚本生成该格式的 JSON 方面苦苦挣扎。

从数据库生成 JSON 的 PHP 脚本

<?php
require_once ("config.php");

$array = array();
$res = mysqli_query($con, "SELECT * FROM sensors WHERE vera_variable='CurrentTemperature'");
while ($row = mysqli_fetch_array($res)) {
    $sensor_id = $row['sensor_id'];
    $sensor_name = $row['sensor_name'];

    $res2 = mysqli_query($con, "SELECT * FROM logs WHERE sensor_id='$sensor_id'");
    while ($row2 = mysqli_fetch_array($res2)) {
        $time = strtotime($row2['log_time']);
        $formattedTime = date("m-d-y g:i", $time);

        $sensor_value = $row2['sensor_value'];

            $array[$formattedTime][$sensor_name] = $sensor_value;
    }
}

$json = json_encode($array,  JSON_PRETTY_PRINT);
echo "<pre>" . $json . "</pre>";

?>

上述脚本的示例输出。可以看到有一个日期、多个传感器及其对应的值

{
    "12-12-15 8:35": {
        "Living Room Temperature": "18.3",
        "Outside Temperature": "-5",
        "Mud Room Temperature": "16.0",
        "Basement Temperature": "14.0"
    },
    "12-12-15 8:40": {
        "Living Room Temperature": "18.3",
        "Outside Temperature": "-5",
        "Mud Room Temperature": "16.0",
        "Basement Temperature": "13.0"
    },
    "12-12-15 8:45": {
        "Living Room Temperature": "18.3",
        "Outside Temperature": "-5",
        "Mud Room Temperature": "16.0",
        "Basement Temperature": "13.0"
    },
    "12-12-15 8:50": {
        "Living Room Temperature": "18.3",
        "Outside Temperature": "-5",
        "Mud Room Temperature": "16.0",
        "Basement Temperature": "13.0"
    },
    "12-12-15 8:55": {
        "Living Room Temperature": "18.3",
        "Outside Temperature": "-5",
        "Mud Room Temperature": "16.0",
        "Basement Temperature": "13.0"
    },
    "12-12-15 9:00": {
        "Living Room Temperature": "17.8",
        "Outside Temperature": "-5",
        "Mud Room Temperature": "16.0",
        "Basement Temperature": "13.0"
    }
    }

以下是我所拥有的（只是一个使用 json 的简单示例图表）

<html>
    <head>
        <!-- Load jQuery -->
        <script language="javascript" type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <!-- Load Google JSAPI -->
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {
                packages : ["corechart"]
            });
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var jsonData = $.ajax({
                    url : "json_temp.php",
                    dataType : "json",
                    async : false
                }).responseText;

                var obj = window.JSON.stringify(jsonData);
                var data = google.visualization.arrayToDataTable(obj);

                var options = {
                    title : 'Graph'
                };

                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }

        </script>
    </head>
    <body>
        <div id="chart_div" style="width: 900px; height: 500px;"></div>
    </body>
</html>

编辑：这是 Chrome 在尝试加载图表时显示的错误：

未捕获的错误：不是数组@ 格式+en,default+en,ui+en,corechart+en.I.js:191bha @ 格式+en,default+en,ui+en,corechart+en.I.js:193drawChart @ 温度.php:22

【问题讨论】：

能否请您也发布异常？或者尝试向我们提供有关您遇到的问题的更多信息，特别是。
@Redbeard011010 我在原问题中添加了错误

标签： javascript php json google-visualization

【解决方案1】：

出现此错误是因为输入的 JSON 数据格式（obj 变量）与 Google 图表数据 JSON 格式不兼容。

您可以将输入数据转换为支持的格式，如下所示：

var chartData = [];
chartData.push(['Time','Living Room Temperature','Outside Temperature','Mud Room Temperature','Basement Temperature']);
for (var key in obj) {
     var item = obj[key];
     chartData.push([new Date(key),parseFloat(item['Living Room Temperature']),parseFloat(item['Outside Temperature']),parseFloat(item['Mud Room Temperature']),parseFloat(item['Basement Temperature'])]);       
 }
 var data = google.visualization.arrayToDataTable(chartData);

工作示例

对数据的加载方式进行了一些更改，在特别是因为执行同步被认为是一种不好的做法调用async 设置为true。此外，请求通过以下方式处理 promises.

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    $.ajax({
        url: "https://gist.githubusercontent.com/vgrem/e08a3da68a5db5e934a1/raw/2f971a9d1524d0457a6aae4df861dc5f0af0a2ef/data.json", //json_temp.php
        dataType: "json"
    })
    .done(function (data) {
        
            var chartData = [];
            chartData.push(['Time','Living Room Temperature','Outside Temperature','Mud Room Temperature','Basement Temperature']);
            for (var key in data) {
                var item = data[key];
                chartData.push([new Date(key),parseFloat(item['Living Room Temperature']),parseFloat(item['Outside Temperature']),parseFloat(item['Mud Room Temperature']),parseFloat(item['Basement Temperature'])]);       
            }

            var dataTable = google.visualization.arrayToDataTable(chartData);
            var options = {
                title: 'Graph'
            };
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options);

     });
}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

【讨论】：

这个也没有运气，Uncaught ReferenceError: obj is not defineddrawChart @ temperature.php:23
暂缓我的第一条评论，这确实工作了一次，然后在我第二次刷新时出错。再深入一点，但我认为这是正确的答案！

【解决方案2】：

看起来您传递的是Object，而不是预期的Array。

试试这个：

var obj = window.JSON.stringify(jsonData);
var arr = [];
Object.keys(obj).forEach(function(key){
   var o = obj[key]; 
   o.time = key; 
   arr.push(o);
});
var data = google.visualization.arrayToDataTable(arr);

【讨论】：

运气不好，得到：未捕获的错误：第一行不是数组。