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

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

• при загрузке страницы вы создаете текущий график, читая полный текстовый файл и запоминая его размер.
• после загрузки страницы вы создаете функцию Javascript, которая регулярно опрашивает определенный скрипт на вашем сервере, используя AJAX-методы (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-скрипт запускается) и, таким образом, экономия ресурсов ;)