Question

我试图使用从MySQL获取的数据来绘制Spline图。

<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成功函数之后.Am第一次使用stackoverflow用户并且是jQuery的新用户。有人可以指导我吗？

Answer 1

发布完美无缺的代码。

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

Answer 2

你在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);

Answer 3

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

将JSON数据加载到Highchart

3 个答案: