Question

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?

Answer 1

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).