web-dev-qa-db-ja.com

リアルタイムデータグラフ

Webベースのリアルタイムデータグラフを作成したいのですが、次のようなさまざまなオプションを検討しています。

  • HTML5キャンバス
  • ExtjsなどのグラフをサポートするJSライブラリ

リアルタイムとは、Webサーバーをポーリングするクライアントが毎秒言うか、逆Ajaxを使用することです。サーバーは、利用可能な場合にデータをクライアントにプッシュします。

何かお勧めしてもらえますか？

javascripthtmlgraphjavascript-framework
26
ken

jQuery に基づくオープンソースのプロットライブラリである Flot の使用を検討してください。

私は、リアルタイムで、グラフが自動的に更新されることを意味すると想定しています。 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);
}

実際の動作を確認するには、次のデモを必ずチェックしてください（[データのポーリング]ボタンをクリックしてください）。

Flotの詳細については：

15
Daniel Vassallo

SmoothieCharts もあり、このユースケース向けに設計されています。

16
scoopr

デザインがより良い他のソリューションと可能性：

https://changelog.com/posts/rickshaw-realtime-javascript-graphing-library

例： http://shutterstock.github.com/rickshaw/examples/extensions.html

コード： https://github.com/shutterstock/rickshaw

5
Rubén Fanjul Estrada