Question

我在这里使用谷歌可视化图表api：https://developers.google.com/chart/interactive来制作服务器正常运行时间图，它似乎运行良好。

但是我希望用户能够选择日期范围，然后重绘图表而无需刷新浏览器。我对此有一个小问题。

我首先使用初始数据绘制图形，然后如果用户更改日期范围，则应重新绘制此图形。我尝试重新绘制一些示例数据，这很好。但是我似乎无法使用更新的数据。

现在在php文件中，我从数据库中获取数据，我将返回此期间的平均正常运行时间以及该时段的总运行时间：

/*mysql query striped*/
$uptime_result = mysql_query($query, $connection) or die(mysql_error());


$uptime_data = "['Day',   'Uptime'],";
while ($items = mysql_fetch_array($uptime_result)){
    $uptime_data.="['{$items['date']}',{$items['uptime']}], ";
}

// get average uptime
/*mysql query striped*/
$uptime_result = mysql_query($query, $connection) or die(mysql_error());

$result_array = mysql_fetch_array($uptime_result);
$avg_uptime = round($result_array['AVG(uptime)'],2);

echo "{\"data\":\"{$uptime_data}\",\"average\":$avg_uptime}";

输出的内容如下：

{"data":"['Day', 'Uptime'],['2012-05-31',100.00], ['2012-06-01',100.00], ['2012-05-  22',99.65], ['2012-05-21',99.65], ['2012-05-20',100.00], ['2012-05-31',100.00], ['2012-05-30',100.00], ['2012-05-29',100.00], ['2012-05-28',100.00], ['2012-05-27',100.00], ['2012-05-26',100.00], ['2012-05-25',100.00], ['2012-05-24',100.00], ['2012-05-23',100.00], ['2012-05-19',100.00], ['2012-05-18',100.00], ['2012-05-17',100.00], ['2012-05-16',100.00], ['2012-05-15',100.00], ['2012-05-14',100.00], ['2012-05-13',100.00], ['2012-05-12',100.00], ['2012-05-11',100.00], ['2012-05-10',100.00], ['2012-05-09',100.00], ['2012-05-08',100.00], ['2012-05-07',100.00], ['2012-06-02',100.00], ['2012-06-03',100.00], ['2012-06-04',100.00], ","average":99.98}

即具有两个变量数据和平均值的JSON数组。我可以这样独立地取两个：

$(function(){
            $('#from,#to').focusout(function(){

            var start=$('#from').val();
            var end=$('#to').val();
            $.ajax({
                type: 'POST',
                data: ({from : start, to : end, id : <?php echo $id; ?>}),
                url: 'fetchuptime.php',
                success: function(data) {
                     //7 reulst goes here
                    //var json = data;
                    var obj = jQuery.parseJSON(data);
                     $('#uptime_span').html(obj.average +" %");
                     $('#test').html(data);
                     chart_data = google.visualization.arrayToDataTable([
                            obj.data
                        ]);
                        var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
                        ac.draw(chart_data, {
                            colors : ['#00DB00'],
                            title : '',
                            isStacked: false,
                            width: 570,
                            height: 400,
                            'chartArea': {'width': '88%', 'height': '90%'},
                            hAxis: {minValue: 0,showTextEvery: 6, slantedText: false},
                            vAxis: {  
                                viewWindowMode:'explicit',
                                viewWindow:{
                                    max:100,
                                    min:90.65
                                }
                            },
                            pointSize: 3,
                            legend: {position: 'none'}
                        });

          }
        });
    });
});

例如。 obj.average和obj.data给了我两个字符串。然而，这似乎不起作用，我想数据不会正确传递。

我已经测试了实际输出数据（例如obj.data）格式正确，因为我已经尝试静态插入。

所以我显然在这里做错了，我认为这是因为我传递了一个字符串，而谷歌图表需要一个数组，试图以各种方式解决它，但还没有找到任何工作。

任何人都可以帮我这个吗？

Answer 1

您的JSON格式有效，但可能不是您想要的：

{"data":"['Day', 'Uptime'],['2012-05-31',100.00] ... ['2012-06-04',100.00], ", "average":99.98}

表示一个名为data的字段的对象，其值为字符串（如您所说）。你可能想要做的是在服务器端使它成为一个数组。而不是双引号，使用方括号。还有一个必须删除的尾随逗号。

{"data":[['Day', 'Uptime'],['2012-05-31',100.00] ... ['2012-06-04',100.00]], "average":99.98}

Ajax / JSON重绘谷歌图表

1 个答案: