У меня есть непрерывно создаваемые данные (текстовый файл), сгенерированные программой на сервере. Я хочу построить данные в виде графика в реальном времени, как это делает powergrid . Это был мой подход:
Поскольку данные генерируются непрерывно на сервере в текстовом файле, я написал PHP-скрипт, который читает этот файл ( get_file_contents ), выводит точки данных и get_file_contents график с использованием плагина sparkline jQuery. Но проблема в том, что он читает файл все сразу . Более того, текстовый файл продолжает расти. Может ли кто-нибудь предложить мне лучший подход?
Поскольку вы говорите об использовании решения для построения Javascript, вы делаете следующее:
XMLHttpRequest ) и передает последний известный размер файла вашего текстового файла в качестве параметра. Эта процедура включает в себя как серверную, так и клиентскую программу, но ее можно легко выполнить.
Ниже приведен пример сценария опроса, для которого требуется 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-скрипта) и, следовательно, экономия ресурсов;)