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で以下に説明するクエリを置き換えることにより、戻り値を1つだけに制限すると、グラフを1つの値でプロットできますが、値のグループではプロットできません。要件は、今から30分データをフェッチし、スプラインチャートをプロットすることです。

$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

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 に答える
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 に答える