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