5

私はWeb開発の初心者です。PHPでプログラミングを始めたところです。（サーバーから）MySQLデータベースに接続された動的ページを開発し、その結果をリアルタイムでプロット（散布図、ヒストグラムの可能性があります）に表示したいと思います。これまでのところ、データベースからデータを取得してグラフを表示することができました。しかし、私はそれをリアルタイムで行うことができませんでした。

私は周りを探していました。私が見つけたのは、AJAXを使用してリアルタイムプロットを実行することでした。いいでしょう、私はそれについていくつかのチュートリアルを行い、例を実行することができました。私の課題は、グラフをプロットすることです。

それが役に立ったら、これはまさに私がやりたいことです http://jsxgraph.uni-bayreuth.de/wiki/index.php/Real-time_graphing

このコードを実行しようとしましたが、実行できませんでした。

誰かが私に単純なものから始める方法を教えてもらえますか？私の質問が十分に明確でない場合は、詳しく説明します。前もって感謝します！

@ティム、これが私がやろうとしたことです。

私のphpは

 <?php


   $con = mysql_connect("localhost","root","");
   if (!$con)
    {
    die('Could not connect: ' . mysql_error());
    }
    else
    //echo "Database Connected!";
   mysql_select_db("DB", $con);
   $sql=mysql_query("SELECT Def_ID, Def_BH FROM BBB WHERE Ln_Def < 1200");

   $Def_ID= array();  
   $Def_BH = array();

  while($rs = mysql_fetch_array($sql))
  {
    $Def_ID[] = $rs['Def_ID'];
    $Def_BH [] = $rs['Def_BH '];

  }

  mysql_close($con);

  $json = array(
  'Def_ID' => $Def_ID,
  'Def_BH' => $Def_BH
  );

  echo json_encode($json);
?>

出力は

{"Df_ID":["0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41"],"Df_BH":["1","1","1","5","5","2","1","1","1","1","2","1","1","1","1","1","1","1","1","1","1","1","2","1","1","2","1","3","10","1","2","1","1","1","2","2","2","1","1","1","1","1"]}

次に、私のスクリプトは次のとおりです

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Flot Example: Real-time updates</title>
        <link href="../examples.css" rel="stylesheet" type="text/css">
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
        <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
        <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
         <script language = "javascript" type="text/javascript" src="Include/excanvas.js"></script>
        </head>
    <body>

        <div id="placeholder" style="width:600px;height:300px"></div>


    </body>

    <script type="text/javascript">
    function doRequest(e) {
    var url = 'fakesensor.php'; // the PHP file
    $.getJSON(url,data,requestCallback); // send request
}




function requestCallback(data, textStatus, xhr) {
  //       // you can do stuff with "value" here
   $.each(data, function(index, value) {
        console.log(value.Df_ID); 
        console.log(value.Df_BH); 
          });
  }

    </script>

    </html>

Def_IdとDef_BHをプロットしたいと思います。何が悪かったのか分かりますか？

4

3 に答える 3

5

High Charts Dynamic Updateを見てください;-)

于 2013-01-22T13:04:34.980 に答える
4

まず、出力を正しく取得する必要があります。私の意見では、非同期リクエストを使用してサーバーとクライアント間でデータを転送するには、 JSONが最適な形式です。多くのプログラミング言語で簡単に解析できるデータ形式です。

次に、転送するものを把握する必要があります。一度に大量のデータを転送し、javascript を使用してアニメーション化する予定ですか、それとも新しいビットごとにリクエストを送信する予定ですか?

私のアドバイス: リクエストの量をできるだけ少なくしてください。リクエストは遅いです。

何を送信すればよいかどうやってわかりますか？タイムスタンプを取得しますか？ID？何でも可能です。ID は自動インクリメントなので、それを使用することもできます。

まず、PHP をセットアップします。

// get user input
$lastID = intval($_GET['lastid']);

// --------------------------------
// FETCH RECORDS FROM DATABASE HERE
// --------------------------------
// $sql = "SELECT * FROM `graph` WHERE `id` > " . $lastID;

// CREATE DUMMY CONTENT
$data = array();

for($i = $lastID; $i < $lastID + 50; $i++) {
    array_push($data, array(
        'id'        => $i,
        'position'  => array(
            'x' => $i,
            'y' => mt_rand(0, 10) // random value between 0 and 10
        )
    ));
}
// END CREATING DUMMY CONTENT

// create response
$json = array(
    'lastID'    => $data[count($data) - 1]['id'],
    'data'      => $data
);

// display response
echo json_encode($json);

ご覧のとおり、lastid入力として使用して大量のデータを取得しています。そのインプットは重要です。

次に、リクエストを取得するように JavaScript を設定します。私はjQuery ファンボーイなので、AJAX リクエストにjQuery ライブラリを使用しています。

var interval = setInterval(doRequest, 4000); // run "doRequest" every 4000ms
var lastID = 0; // set 0 as default to ensure we get the data from the start

function doRequest(e) {
    var url = 'my-file.php'; // the PHP file
    var data = {'lastid': lastID}; // input for the PHP file

    $.getJSON(url, data, requestCallback); // send request
}

// this function is run when $.getJSON() is completed
function requestCallback(data, textStatus, xhr) {
    lastID = data.lastID; // save lastID

    // loop through data
    $.each(data, function(index, value) {
        // you can do stuff with "value" here
        console.log(value.id); // display ID
        console.log(value.position.x); // display X
        console.log(value.position.y); // display Y
    });
}

あとは結果をグラフに出力するだけ！

PHP 応答を見ると、配列を含む 2 つのプロパティを持つ 1 つのオブジェクトがあることがわかります。

{
    "Df_ID": [1, 2, 3, ...],
    "Df_BH": [1, 2, 3, ...]
}

これらのプロパティにアクセスするには、...これらのプロパティを呼び出しますdata.Df_ID。data.Df_BH

function requestCallback(data, textStatus, xhr) {
    console.log(data.Df_ID, data.Df_BH);
}
于 2013-01-22T13:26:27.737 に答える
1

これらは私がグーグルで見つけたものです-

動的グラフを作成し、AJAXを使用して無限に呼び出すことができます。

于 2013-01-22T13:06:43.430 に答える