1

我正在尝试使用从 MySQL 获取的数据绘制样条图。

<script> 
var chart; 
function requestData() 
{
    $.ajax({
    url: 'get_hourly_data.php',
    datatype: "json",
    success: function(data) 
    {
            chart.series[0].addPoint(data);
    },      
    });
}
$(document).ready(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
chart = new Highcharts.Chart({
     chart: {
        renderTo: 'graph',
        type: 'spline',
        events: {
            load: requestData
        }
     },
     title: {
        text: 'Monitoring'
     },
     xAxis: {
        type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
     },
     yAxis: {
        minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Response time (ms)',
                margin: 80
            }
     },
     series: [{
        name: 'Time',
        data: [],
     }]
  });
  });

    </script>

get_hourly_data.php

<?php
// Query to fetch half an hour data from current time
$query = "SELECT UNIX_TIMESTAMP(current_ts), response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2'";

$result = mysql_query($query,$db);

while($item = mysql_fetch_array($result)) 
{
    $current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
    $response_time = $item['response_time']*1;      
    $ret = array($current_time, $response_time);        
    echo json_encode($ret);
}
?>

My JSON data looks like this
[1357536877000,0.012178182601929][1357536881000,0.0123610496521][1357536891000,0.011971950531006][1357536895000,0.011821985244751][1357536916000,0.010467052459717]

如果我通过在 get_hourly_data.php 中替换下面提到的查询来仅限制一个返回值，则可以用一个值绘制图形，但不能绘制一组值。要求是从现在开始获取半小时的数据并绘制样条图。

$query = "SELECT UNIX_TIMESTAMP(current_ts), response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2' limit 1";

我想在将服务器数据添加到图形时做错了。可能在 jQuery 成功函数之后。我是第一次使用 stackoverflow 用户和 jQuery 新手。有人可以指导我吗？

4

3 回答 3

3

发布完美运行的代码。

<script> 
var chart; 
function requestData() 
{
    $.ajax({
    url: 'get_hourly_data.php',
    datatype: "json",
    success: function(data) 
    {
           chart.series[0].setData(data);
    },      
    });
}
$(document).ready(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });
chart = new Highcharts.Chart({
     chart: {
        renderTo: 'graph',
        type: 'spline',
        events: {
            load: requestData
        }
     },
     title: {
        text: 'Monitoring'
     },
     xAxis: {
        type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
     },
     yAxis: {
        minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Response time (ms)',
                margin: 80
            }
     },
     series: [{
        name: 'Time',
        data: [],
     }]
  });
  });
    </script>

get_hourly_data.php：

$ret = array();
while($item = mysql_fetch_array($result)) 
{
        $current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
        $response_time = $item['response_time']*1;  
        $y = rand(0, 100);          
        $ret[] = array($current_time, $response_time);      
    }
    echo json_encode($ret);
于 2013-01-08T09:36:44.480 回答
0

$query = "SELECT UNIX_TIMESTAMP(current_ts) * 1000, response_time FROM site_response WHERE current_ts >= DATE_SUB( NOW( ) , INTERVAL 30 MINUTE ) AND site_id ='2'";

$dataArr = new array();
while($item = mysql_fetch_array($result)) 
{
    $current_time = $item['UNIX_TIMESTAMP(current_ts)'];
    $response_time = $item['response_time'];      
    $dataArr[] = array($current_time, $response_time);        
}
echo json_encode($dataArr);

关于成功函数

success: function(data) 
{
    data = jQuery.parseJSON(data);
    chart.series[0].addPoint(data);
}
于 2013-01-07T13:43:07.057 回答
0

您在 while 循环内回显。您需要为数据创建一个数组数组。

你需要你的 JSON 看起来像

[[1357536877000,0.012178182601929],[1357536881000,0.0123610496521],[1357536891000,0.011971950531006],[1357536895000,0.011821985244751],[1357536916000,0.010467052459717]]

这样的事情可能会奏效

$dataArr=new array();
while($item = mysql_fetch_array($result)) 
{
    $current_time = $item['UNIX_TIMESTAMP(current_ts)']*1000;
    $response_time = $item['response_time']*1;      
    $dataArr[] = array($current_time, $response_time);        
}
echo json_encode($dataArr);
于 2013-01-07T11:04:06.213 回答