0

ここでグーグル視覚化チャートAPIを使用しています：https ：//developers.google.com/chart/interactiveは、うまく機能しているように見えるサーバー稼働時間グラフを作成します。

ただし、ユーザーが日付範囲を選択して、ブラウザーを更新せずにグラフを再描画できるようにしたいと思います。そして、私はこれに小さな問題があります。

最初に初期データを使用してグラフを描画し、次にユーザーが日付範囲を変更した場合、このグラフを再描画する必要があります。いくつかのサンプルデータを使用して再描画しようとしましたが、これは正常に機能します。ただし、更新されたデータで動作させることができないようです。

ここで、DBからデータをフェッチする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}

つまり、2つの変数dataとaverageを持つJSON配列です。私はそのように2つを独立してフェッチすることができます：

$(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は、2つの文字列を提供します。ただし、これは機能していないようです。データが正しく渡されないと思います。

静的に挿入しようとしたため、実際の出力データ（obj.dataなど）が正しくフォーマットされていることをテストしました。

だから私は明らかにここで何か間違ったことをしています、そしてそれはグーグルチャートが配列を必要としている間に文字列を渡しているためだと思います、それをさまざまな方法で修正しようとしましたが、まだ何も機能していません。

誰かがこれを手伝ってくれますか？

4

1 に答える 1

0

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}
于 2012-06-05T22:00:14.210 に答える