如何使用文本文件中获得的数据绘制实时图形（直方图） [英] How to plot a realtime graph (histogram) using data obtained in a text file

问题描述

我有连续生成的数据（文本文件）由服务器上的程序生成。我想将数据绘制为实时图形，就像 powergrid 一样。这是我的方法：

由于数据是在服务器上以文本文件连续生成的，因此我编写了一个PHP脚本来读取该文件（ get_file_contents ），输出数据点并使用 sparkline jQuery插件绘制图表。但问题是，它一次读取文件。此外，文本文件不断增长。任何人都可以给我一个更好的方法吗？

解决方案

在讨论使用Javascript绘图解决方案时，您需要： / p>

• 在页面加载时，您可以通过阅读完整的文本文件并记住它的大小来创建当前图表。


• 在页面加载后，创建一个Javascript函数，该函数使用AJAX技术（ XMLHttpRequest ）定期轮询服务器上的特定脚本，并传递文本的最后一个已知文件大小文件作为参数。
  
• 您的轮询脚本获取文件大小参数，打开文本文件，跳过文件，直至达到上次读取文件的位置（filesize-parameter） 。


• 轮询脚本将所有可用数据从 filesize 返回到文件末尾和新文件站点


• 您的Javascript读取AJAX响应，并将所需的绘图点添加到您的图表中


• 然后您可以重新开始查询您的服务器端脚本，并使用新的文件大小作为参数

这个过程涉及服务器端和客户端编程，但可以轻松完成。

下面是一个示例轮询脚本，它需要一个索引参数，它告诉脚本从哪个位置读取文本文件并返回一个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（）
）; 
 //向前移动到指定的位置
 fseek（$ file，$ index，SEEK_SET）; 
 while（！feof（$ file））{
 / * 
 *假设我们有一个类似
 * 0,10 
 * 1,15 $的文件b $ b * 2,12 
 * ... 
 * / 
 list（$ x，$ y）= explode（'，'，trim（fgets（$ handle）），2 ）; 
 $ data ['data'] [] = array（'x'=> $ x，'y'=> $ y）; 
} 
 //设置新索引
 $ data ['index'] = ftell（$ file）; 
 fclose（$ file）; 
 
 header（'Content-Type：application / json'）; 
 echo json_encode（$ data）; 
 exit（）; 
  

相应的Javascript / jQuery代码片段可以是：

  //用于轮询脚本的jQuery代码
 var current = 0; 
函数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 ; 
 //在这里绘图
} 
}）; 
} 
 //每5秒钟调用pollData（）
 var timer = window.setInterval（pollData，5000）; 
  

请注意，这只是一个例子，它缺少所有错误检查（例如并发呼叫 pollData（）在同一页面上会有问题）。

I have a continuously generated data (text file) generated by a program on the server. I want to plot the data as a real-time graph just like powergrid does. This was my approach:

As the data is generated continuously on the server in a text file, I wrote a PHP script which reads that file(get_file_contents), outputs the data points and plot the graph using sparkline jQuery plugin. But the problem is that it reads the file all at once. Moreover, the text file keeps on growing. Can anyone suggest me a better approach?

解决方案

As you're talking about using a Javascript plotting solution you do the following:

• on page load you create the current graph by reading the complete text file and remembering it's size.
• after the page is loaded you create a Javascript function that regularly polls a specific script on your server using AJAX-techniques (XMLHttpRequest) and passing the last-known filesize of your text file as a parameter.
• your polling script takes the filesize parameter, opens the text file, skips through the file until it reaches the point from which you last read the file (filesize-parameter).
• the polling script returns all the available data from filesize to the end of the file and the new filesite
• your Javascript reads in the AJAX response and adds the required plot points to your graph
• you can then start over polling your server-side script with the new filesize as a parameter

This procedure involves server-side as well as client-side programming but can be accomplished easily.

The following is a sample polling script that requires a index paramater that tells the script from which position to read the text file and returns a JSON-encoded list of plot points and the new index pointer.

// 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();

The corresponding Javascript/jQuery snippet could be:

// 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);

Please be careful that this is only an example and that it lacks all error checking (e.g. concurrent calls to pollData() on the same page will be problematic).

这篇关于如何使用文本文件中获得的数据绘制实时图形（直方图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！