График данных в реальном времени

Я хотел бы построить веб-график данных реального времени, и я рассматриваю различные параметры, такие как:

  • Холст Html5
  • Библиотеки JS с поддержкой графов как Extjs

В реальном времени я имею в виду, что либо клиентский опрос веб-сервера говорит каждую секунду, либо использует обратный ajax; сервер передает данные клиенту, когда он доступен.

Можете ли вы порекомендовать кого-нибудь?

Ответы

Ответ 1

Возможно, вам захочется использовать Flot, библиотеку с открытым исходным кодом на основе jQuery.

Я предполагаю, что в реальном времени вы подразумеваете, что график будет обновляться автоматически. Ниже приведен пример того, как выглядел бы ваш код, если бы вы собирали и обрабатывали данные с помощью опроса AJAX с интервалом в 1 секунду:

function fetchData() {
   $.ajax({
      url:      'json_fetch_new_data.php',
      method:   'GET',
      dataType: 'json',
      success:  function(series) {
         var data = [ series ];

         $.plot($('#placeholder'), data, options);
      }
   });

   setTimeout(fetchData, 1000);
}

Обязательно ознакомьтесь со следующей демонстрацией, чтобы увидеть ее в действии (нажмите кнопку "Опрос для данных" ):

Для получения дополнительной информации о флоте:

Ответ 2

Существует также SmoothieCharts, который больше подходит для этого прецедента.