텍스트 파일에서 얻은 데이터를 사용하여 실시간 그래프 (히스토그램)를 플로팅하는 방법

StackOverflow https://stackoverflow.com/questions/1728937

문제

서버의 프로그램에 의해 생성 된 지속적으로 생성 된 데이터 (텍스트 파일)가 있습니다. 데이터를 실시간 그래프로 플로팅하고 싶습니다. PowerGrid 하다. 이것은 내 접근 방식이었습니다.

텍스트 파일의 서버에서 데이터가 지속적으로 생성되면 해당 파일을 읽는 PHP 스크립트를 작성했습니다.get_file_contents), 데이터 포인트를 출력하고 스파크 라인 jQuery 플러그인. 그러나 문제는 파일을 읽는다는 것입니다 한 번에 모두. 또한 텍스트 파일이 계속 커지고 있습니다. 누구든지 나에게 더 나은 접근을 제안 할 수 있습니까?

도움이 되었습니까?

해결책

JavaScript 플로팅 솔루션을 사용하는 것에 대해 이야기 할 때 다음을 수행합니다.

  • 페이지로드에서 전체 텍스트 파일을 읽고 크기를 기억하여 현재 그래프를 만듭니다.
  • 페이지가로드되면 Ajax-Techniques를 사용하여 서버의 특정 스크립트를 정기적으로 설문 조사하는 JavaScript 함수를 만듭니다.XMLHttpRequest) 및 텍스트 파일의 마지막으로 알려진 파일 크기를 매개 변수로 전달합니다.
  • 폴링 스크립트는 파일 크기 매개 변수를 가져 와서 텍스트 파일을 열고 파일을 마지막으로 읽는 지점 (파일 크기-파라미터)에 도달 할 때까지 파일을 건너 뜁니다.
  • 폴링 스크립트는 사용 가능한 모든 데이터를 반환합니다 파일 크기 파일의 끝과 새 파일 사이트까지
  • JavaScript가 Ajax 응답으로 읽히고 필요한 플롯 포인트를 그래프에 추가합니다.
  • 그런 다음 새 파일 크기를 매개 변수로 서버 측 스크립트 폴링을 시작할 수 있습니다.

이 절차에는 서버 측 및 클라이언트 측 프로그래밍이 포함되지만 쉽게 달성 할 수 있습니다.

다음은 index 텍스트 파일을 읽을 위치에서 스크립트를 알려주고 JSON에 인코딩 된 플롯 포인트 목록과 새로운 인덱스 포인터를 반환하는 매개 변수.

// poll.php
$index = (isset($_GET['index'])) ? (int)$_GET['index'] : 0;
$file = fopen('path/to/your/file.txt', 'r');
$data = array(
    'index' => null,
    'data'  => array()
);
// move forward to the designated position
fseek($file, $index, SEEK_SET);
while (!feof($file)) {
    /*
     * assuming we have a file that looks like
     * 0,10
     * 1,15
     * 2,12
     * ...
     */
    list($x, $y) = explode(',', trim(fgets($handle)), 2);
    $data['data'][] = array('x' => $x, 'y' => $y);
}
// set the new index
$data['index'] = ftell($file);
fclose($file);

header('Content-Type: application/json');
echo json_encode($data);
exit();

해당 JavaScript/JQuery 스 니펫은 다음과 같습니다.

// the jQuery code to poll the script
var current = 0;
function pollData() {
    $.getJSON('poll.php', { 'index': current }, function(data) {
        current = data.index;
        for (var i= 0; i < data.data.length; i++) {
            var x = data.data[i].x;
            var y = data.data[i].y;
            // do your plotting here
        }
    });
}
// call pollData() every 5 seconds
var timer = window.setInterval(pollData, 5000);

이것이 예제 일뿐 아니라 모든 오류 점검이 부족하다는 것을 조심하십시오 (예 : 동시 호출 pollData() 같은 페이지에서 문제가됩니다).

다른 팁

시각화 부품이 대부분 해결 된 것 같습니다. 데이터 세트가 다시 계산하기에는 너무 커지면 증분 히스토그램을 유지하기위한 기술을 살펴볼 수 있습니다. 다음은 도움이 될 수있는 몇 가지 논문입니다.

먼저, 나는 사용자쪽에 그래프를 생성하지 않을 것입니다. 간단한 이유가 있습니다. 모든 사람이 JavaScript를 활성화 한 것은 아닙니다 (좋아요, 대상 그룹에 따라 다릅니다). 아마도 빠르지는 않을 것입니다.

이미 PHP를 사용하고 있으므로 다음과 같은 패키지를 사용하는 것이 좋습니다. PCHART 서버 측에서 그래프를 작성합니다. 이것의 또 다른 긍정적 인 부작용은 상기 패키지에도 캐싱과 함께 제공된다는 것입니다. 예를 들어, 데이터 텍스트 파일이 변경 될 때만 그래프를 만들 수 있습니다 (PHP를 사용하여 생성한다고 가정하자면 PHP 스크립트가 실행될 때마다 파일이 수정되었는지 확인할 수 있음). 많은 자원 절약;)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top