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

Question

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

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

Answer 1

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

Answer 2

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

• История гистограмм (в сокращении)
• Случайная выборка для построения гистограммы:Насколько достаточно?
• Потоки данных и гистограммы
• Быстрое пошаговое обслуживание приблизительных гистограмм

Answer 3

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

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