Как построить график реального времени (гистограмму), используя данные, полученные в текстовом файле

У меня есть непрерывно генерируемые данные (текстовый файл), генерируемые программой на сервере. Я хочу построить данные в виде графика в реальном времени, как это делаетpowergrid . Таков был мой подход:

Поскольку данные непрерывно генерируются на сервере в текстовом файле, я написал PHP-скрипт, который читает этот файл (get_file_contents), выводит точки данных и строит график с помощью плагина sparkline jQuery. Но проблема в том, что он читает файл сразу. Более того, текст файл продолжает расти. Может ли кто-нибудь предложить мне лучший подход?
3 2
jquery php real-time histogram

3 ответа:

Когда вы говорите об использовании решения для построения графиков Javascript, вы делаете следующее:

  • При загрузке страницы вы создаете текущий график, читая полный текстовый файл и запоминая его размер.
  • после загрузки страницы вы создаете функцию Javascript, которая регулярно опрашивает определенный скрипт на вашем сервере, используя AJAX-методы (XMLHttpRequest) и передавая последний известный размер файла вашего текстового файла в качестве параметра.
  • ваш сценарий опроса принимает параметр filesize, открывает текстовый файл, пропускает файл, пока он не достигнет точки, с которой вы в последний раз читали файл (filesize-параметр).
  • скрипт опроса возвращает все доступные данные из filesize в конец файла и новый файловый сайт
  • ваш Javascript считывает ответ AJAX и добавляет необходимые точки графика в ваш график
  • затем вы можете начать опрос вашего сценария на стороне сервера с новым параметром filesize

Эта процедура включает в себя программирование как на стороне сервера, так и на стороне клиента, но может быть выполнено легко.

Ниже приведен пример сценария опроса, для которого требуется параматер 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() на той же странице будет проблематично).

3

Похоже, что вы в основном проработали часть визуализации. Если набор данных слишком велик для повторного вычисления, вы можете изучить методы поддержания инкрементных гистограмм. Вот несколько документов, которые могут помочь:

3

Во-первых, я не буду генерировать график на стороне пользователя. Этому есть простые причины: не у всех включен JavaScript (хорошо, зависит от вашей целевой группы), и это, вероятно, не очень быстро.

Поскольку вы уже используете PHP, я бы рекомендовал использовать пакет pChart для создания графиков на стороне сервера. Еще одним положительным побочным эффектом этого является то, что указанный пакет также поставляется с кэшированием. Это, например, позволит вам создать только график когда текстовый файл данных изменяется (предполагая, что вы создаете его также с помощью PHP-иначе вы можете просто проверить, был ли файл изменен каждый раз, когда запускается ваш скрипт PHP) и таким образом сэкономить массу ресурсов;)

0