html5を使用した折れ線グラフでのリアルタイムデータグラフ
数秒ごとに更新し、ページを更新する必要のない折れ線グラフを作成したい（サーバー上で更新する別のファイルから情報を取得する）、それらのJavaScriptライブラリ（JQuery以外）これで簡単になりますか？誰でもウェブページに意味のある例を表示できますか？ 1から10までのスケールで、これはどれくらい難しいでしょうか？（10は難しい）
また、重要な場合、データは10秒の固定間隔で更新されます。そして可能であれば、CSS3 HTML5とjavascriptだけに固執したいと思います。
使用できるチャートライブラリはいくつかあります。 gRaphael 、 Highcharts 、および他の人が言及したものです。これらのライブラリは非常に使いやすく、よく文書化されています（難易度で1としましょう）。
私の知る限り、これらのライブラリは「リアルタイム」ではありません。なぜなら、それらはその場で新しいポイントを追加する可能性を与えないからです。新しいポイントを追加するには、完全なチャートを再描画する必要があります。しかし、チャートの再描画は高速であるため、これは問題ではないと思います。私はgRaphaelをいくつか試しましたが、このアプローチに問題はありませんでした。更新レートが10秒であれば、問題なく動作するはずです（ただし、グラフの複雑さに依存する場合があります）。
完全なチャートの再描画が問題になる場合は、 Raphael または paper.js のようなベクターグラフィックスライブラリを使用して自分でチャートを作成する必要があります。これは、チャート作成ライブラリを使用するよりも少し難しくなりますが、実行可能でなければなりません。 （難易度で5としましょう）。
固定間隔でデータを取得しているため、通常のajax libを使用できます。 jQueryは大丈夫ですが、他にもいくつかの選択肢があります。固定されていない間隔ではこれは最良の選択ではないかもしれません。この場合、 socket.io のようなものを見なければならないかもしれませんが、サーバー側にも影響があります。
注1：Raphael、gRaphael、およびHighchartsは、純粋にHTML5ではなくSVG/VMLですが、これも許容可能な選択肢だと思います。
注2：Highchartは、新しいポイントを挿入するときにチャートを再描画する必要がないようです。 http://www.highcharts.com/documentation/how-to-use#live-charts を参照してください
Smoothie Charts をお勧めします。
使い方は非常に簡単で、簡単かつ広範囲に設定でき、リアルタイムデータをストリーミングするのに最適です。
オプションを調べてコードを生成できるビルダー があります。
免責事項：私は図書館の寄稿者です。
私はこれがまさにあなたが探しているものだと信じています：
http://www.highcharts.com/demo/dynamic-update
オープンソース（商用Webサイトにはライセンスが必要ですが）、クロスデバイス/ブラウザー、高速。
あなたを助けるかもしれないいくつかのこと：
Canvas Expressは強力なチャートライブラリです。 http://canvasxpress.org/
ここでは、独自の方程式ベースのグラフのローリングに関するチュートリアルを見つけることができます： http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
キャンバスソリューションの使用は非常に簡単です。ajaxを使用してグラフの定期的なデータを取得し、新しいデータを取得するたびにグラフを再描画できます。
すべてクライアント側であるため、ページを更新する必要はありません。
Javascriptとajaxを回避する方法を知っていると、中程度の難易度になります。そうでない場合は、スタックOvreflowにいくつかの質問を投稿して、行き詰まる部分を支援する必要があるでしょう。
また、HTML5 Canvas要素の上に構築される CanvasJS Chart もご覧ください。非常に高速にレンダリングされ、メモリの問題を起こすことなく50〜100ミリ秒ごとに更新できます。
[完全な開示：私はチームの一員です]
最も簡単な方法は、 plotti.co -これのために作成したマイクロサービスを使用することです。どのようにデータを取得するかによって異なりますが、一般的な使用パターンでは、SVGイメージをhtmlに含めます。
<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>
gETリクエストでデータをハッシュに送信します（または(new Image(1,1)).src=...同じまたは他のページのJavaScriptメソッド）
http://plotti.co/FSktKOvATQ8H?d=1,2,
ローカルに設定するのも簡単です
ChartJS のリアルタイムチャートについて発見した要点は次のとおりです。
https://Gist.github.com/arisetyo/5985848
ChartJSは使いやすく、見た目も良いように見えます。
また、 FusionCharts があります。これはエンタープライズ向けのより洗練されたライブラリで、リアルタイムのデモがあります：
http://www.fusioncharts.com/explore/real-time-charts
[〜＃〜] edit [〜＃〜]また、リアルタイムグラフにRickshawを使い始めました。使いやすく、かなりカスタマイズ可能です。 http://code.shutterstock.com/rickshaw/
このスレッドはおそらく非常に古いものです。しかし、このスレッドを見た人にこれらの結果を共有したい。比較ベットを実行しました。 Flotr2、ChartJS、非同期でハイチャート。 Flotr2が最も速いようです。これをテストするために、新しいデータポイントを50ミリ秒ごとに最大1000個のデータポイントごとに渡します。 Flotr2は、チャートを定期的に再描画しているように見えますが、私にとっては最速でした。
サーバーからデータを取得し、以前に利用可能なデータセットを更新してから、おそらく自由に利用可能なライブラリのいずれかを使用してグラフを描画します[例：http://www.rgraph.net/]
考慮したいこと：チャートが状態を表す場合、xhrで新しいデータのみを取得し、クライアントでデータを更新して描画します。
http://www.rgraph.net/ は、グラフとチャートに最適です。
また、Meteor Chartsを試してみるとよいでしょう。超高速（html5キャンバス）で、多くのチュートリアルがあり、よく文書化されています。ライブアップデートは非常にうまく機能します。モデルを更新し、chart.draw（）を実行してシーングラフを再レンダリングするだけです。デモは次のとおりです。
2015年からの追加私の知る限り、ランタイム指向の折れ線グラフライブラリはまだありません。私は、どの動作が「N秒ごとに新しいポイントを要求する」、「古いデータを消去する」、「宣言的」な方法でセットアップできるかを表しています。
代わりに、グラファイトAPIがあります http://graphite-api.readthedocs.org/en/latest/ サーバー側、およびそれを使用するクライアント側プラグインの数。しかし実際には、データスクローラー、範囲グラフ、フェーズでのaxeXセグメンテーションなど、私たちが好む高度な機能がないため、かなり制限されています。
「リーチチャートを表示する」タスクと「リアルタイムチャート」を持つタスクには根本的な違いがあるようです。