PHP와 AJAX를 사용하여 실시간 그래프를 그리는 방법은 무엇입니까?

나는 웹 개발의 초보자입니다. 나는 방금 PHP로 프로그래밍을 시작했다. 나는 (서버로부터) MySQL 데이터베이스에 연결된 동적 페이지를 개발하고 그 결과를 플롯 (산포, 히스토그램 일 수 있음)으로 실시간으로 표시하려고합니다. 지금까지 데이터베이스에서 내 데이터를 가져와 그래프를 표시했습니다. 그러나 나는 그것을 실시간으로 처리 할 수 없었다.PHP와 AJAX를 사용하여 실시간 그래프를 그리는 방법은 무엇입니까?

나는 주위를 둘러 보았다. 내가 찾은 것은 AJAX를 사용하여 실시간 음모를 꾸미는 것입니다. 좋아, 나는 그것에 대한 튜토리얼을했고 예제를 실행할 수 있었다. 내 도전 과제는 그래프를 그려 보는 것이다. 도움이된다면

이 내가이 코드를 실행하려고 노력하지만 난 할 수 없습니다 http://jsxgraph.uni-bayreuth.de/wiki/index.php/Real-time_graphing

수행 할 작업을 정확하게.

누구나 간단한 방법부터 시작할 수 있습니까? 제 질문이 충분히 명확하지 않으면 좀 더 자세히 설명해 드리겠습니다. 미리 감사드립니다.

@Tim 여기에 제가 시도한 바가 있습니다.

내 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"]}

그런 다음 내 스크립트 내가 Def_BH 대 Def_Id 음모 싶습니다

<!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>

을 다음입니다. 무엇이 잘못되었는지 보시겠습니까? High Charts Dynamic Update ;-)

출처

2013-01-22 Chris

먼저 출력물을 가져와야합니다. 제 생각에는 JSON이 비동기 요청을 사용하여 서버와 클라이언트간에 데이터를 전송하는 데 가장 적합한 형식입니다. 이것은 많은 프로그래밍 언어로 쉽게 파싱 할 수있는 데이터 형식입니다.

다음으로 전송할 항목을 알아야합니다. 한 번에 대량의 데이터를 전송하고 자바 스크립트를 사용하여 애니메이션을 만들거나 새 비트 당 요청을 보낼 계획입니까?

내 충고 : 가능한 한 요청을 줄이십시오. 요청이 느립니다.

보낼 내용을 어떻게 아십니까? 타임 스탬프 하시겠습니까? 신분증? 뭐든지 가능합니다. 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를 사용하여 데이터의 대부분을 얻고있다. 그 입력은 중요합니다.

이제 자바 스크립트를 설정하여 요청을 보냅니다. 나는 jQuery 팬 보이이기 때문에 the jQuery library을 내 AJAX 요청에 사용하고 있습니다!

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 응답을 보면 배열이 포함 된 두 개의 속성이있는 개체가 하나 있다는 것을 알 수 있습니다.

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

당신은

function requestCallback(data, textStatus, xhr) { 
    console.log(data.Df_ID, data.Df_BH); 
}

출처

2013-01-22 13:26:27

Tim 감사합니다. 나는 이것을 시도 할 것이다. 그것은 내 문제를 해결하는 것 같습니다. 진행 상황을 알려 드리겠습니다. – Chris

@Chris 그래서 어떻게 됐어? –

안녕하세요, @ 지연, 지연에 대한 죄송합니다. 나는 다른 일로 바빴다. 당신의 제안에 따르면, 나는 또한 내 PHP를 설정합니다. 쿼리를 작성하고 데이터베이스에서 데이터를 가져 왔습니다. 잘 작동한다. 자, 내 데이터를 PHP에서 받고 자바 스크립트를 사용하여 음모를 꾸미고 싶습니다. 여기에 도전입니다. 잠시 동안, 나는 PHP로 어떤 입력을 보내지 않는, 간단하게 유지 싶습니다. 내 도전 requestCallback 함수입니다. 데이터를 사용하지 못했습니다. 내 코드를 추가 할 것입니다. – Chris

봐 내가 구글에서 발견 무엇인가 -

당신은 무한 AJAX를 사용하여 동적 그래프 및 전화를 만들 수 있습니다.

출처

2013-01-22 13:04:34

data.Df_BH 당신에게 전자 학습자 감사에 의해 ... 전화 이러한 속성 data.Df_ID 이러한 속성에 액세스 할 수 있습니다. 제가 확인하겠습니다. – Chris

이들은에서

출처

2013-01-22 13:06:43 World

감사합니다! 나는 그것을 살펴볼 것이다. – Chris

PHP와 AJAX를 사용하여 실시간 그래프를 그리는 방법은 무엇입니까?

답변

관련 문제