グラフの動的データを使用する

Question

私はうまくいけば、多くのユーザー生成データを含むサイトを構築することを目指しています。 私は自己学習プログラミングの最初の年です：Python、Django、MySQL、HTML、Javascript。

テーブル上のダミーデータをグラフ化することはできますが、そのデータを見やすいカラフルなグラフに変えようとしています。

私は調査の最初の日にこれを行う方法を見つけることになっています。しかし、私が続行する前に、いくつかの質問をしたいと思います。

Googleチャートやjqueryチャート、Cairo Plotやmatplotlibなどのチャート構築用のオブジェクト指向プログラムなど、チャートを作成するためのJavaScriptフレームワークが多数あるようです。

Javascriptフレームワークは当初はとても簡単な方法です。しかし、HTMLページの本文に可変データタグを入力でき、Javascriptで見栄えを良くするテーブルでは、可変データタグがあまり見えないスクリプト領域にグラフのデータが入ります同じように働く私はDjangoを使用していますので、可変タグは次のようになります：

Q1。これがうまくいかなければならないのですか、間違っているのですか、変数タグがスクリプト領域に入ることができないと思っていますか？

Q2。あなたは<script>エリア外のデータからJavascriptフレームワークでグラフを作成できますか？

Q3。私はJavascriptのフレームワークがより強力になってきていることを読んだのですが、大量の動的データを潜在的に使用するため、カイロのプロットやmatplotlibなどのOOスタイルのグラフプログラムを使用することに集中する必要があります。サポートのレベルは同じですか？

ちょうど正しい方向にナッジを探しています。

Answer 1

プロットは（通常）ウェブページにどのように配置されていますか？ここで

は、JavaScriptベースのデータの可視化ライブラリの通常のAPIスキーマです：

私は。 をマークアップ（またはテンプレート）のチャートコンテナとして事前に割り当てます。多くの場合、これらのライブラリは、この容器はサイズ事前されることを必要

<div id="chart1"> </div> 

を - 例えば、高さ及び幅特性を有するスタイル：典型的にそうように、IDセレクタを使用して、IDセレクタを使用して、

<div id="chart1" style="height:300px;width:500px; "></div> 

HTML5ライブラリはコンテナに関する特定のある - すなわち、それらは、

II例えば、キャンバスタグ内に配置されるようにチャートを必要とします。 付属のJavaScriptファイルからプロットコンストラクタを呼び出し、（i）データソースを渡します。 （ii）審美的なオプション（軸ラベル）（iii）プロットを保持するコンテナのマークアップ内の位置。この場所は通常、idセレクタの形式であると予想されます。

---

私はお勧めJavaScriptベースのデータの可視化ライブラリ

plot1 = $.jqplot('chart1', [dataSet1, dataSet2], chartOptions) 

、jQueryのreadyイベント内のインスタンスの jqplot中のSO（複数のプロジェクトのために、それぞれ使用したに基づきます）。

I.従来のプロット形式：あなたが夜にプロットを作成するために、以下のコードを必要とするのでバー、ライン、ポイント、パイ

は、ライブラリをプロットJavaScriptのなかで、私はjQueryのベースのオプションをお勧めしますそれはあなたのデータをロードするためにjQueryのAJAXメソッドを使用する方が簡単ですので、例えば、jqplot、FLOT、およびHighCharts（3つのライブラリ番目私は以下でお勧めします）はすべて基本的なディストリビューションにAJAXを介してデータをロードすることを示す完全な（html、css、js）サンプルプロットを含みます。

• HighCharts（オープンソースが、商業的使用のために支払ったライセンスが必要ですが、最も洗練された最長の機能リスト; HighChartsサイト上でアクティブとかなり高い信号対雑音比フォーラム）

• （おそらく最も広く使用されている）

  flot

• jqplo t（プロットタイプの選択肢が多い。基本を越えて最もfunctinalityは、一度に1つのプラグイン）
  
  

IIを追加されます。グラフ、木、ネットワーク図など

• d3（protovisの後継;素晴らしいグラフィック品質、豊富なインタラクティブな要素、アニメーション、厳密にはjQueryベースではないが、著者は明らかにjQueryのからの基本的な構文パターンを借りて、優れたチュートリアルJan Willem Tulpここで紹介した他のライブラリとは異なり、これは低レベルのライブラリであり、実際にはd3に基づいていくつかのプロットライブラリがあります（例えば、shutterstockによってrickshaw、Squareによってcube）。あなたは従来のxy線/棒グラフを求め、それから私はたとえば、HighChartsなどでプロットを作成することができます。特にアニメーションと非正統的な可視化（サンバーストダイアグラム、コードダイアグラム、平行ラインプロット、地理的な地図、等）

• RafaelJSに - ユースケースは、より具体的になるようにD3はより興味深いなりますSVGをd3とprocessing.jsとともにレンダリングすると、このライブラリを使って何か（例：ブラウザの2人のゲーム）を作ることができます。 gRafaelは、通常のプロットタイプ（バー、ライン、パイ）
  
  

IIIを作成するための別のライブラリです。時系列プロット

• dygraphs（JavaScriptライブラリは、時系列プロットにソリーdedidated、およびその機能セットが大量でプロットを処理してレンダリングするためにこのミッション、例えば、容量 を反映しています 多くの書式設定オプションを持つデータ（>万 ポイント）、時間軸の目盛りラベルのためのopdtionsの広い範囲の

• HighStock（HighChartの連中から時系列ライブラリー）
  

IV

。リアルタイム/ストリーミングデータ

• Smoothie Charts（まばらな機能セット、唯一スムーズにデータストリーミングレンダリングされるだけでなく、一つのことを行うことを意図し、またこれを行いますHighCharts、jqplot、およびFLOTを、しかし、データの特性（分散、レート）によっては、これらの3つの汎用ライブラリでデータが「スパイキー」と表示されない場合があります。

Answer 2

非常に大きなデータセット（> 10000個の要素）を扱う場合、ピックアップを終了するJavascriptライブラリに関係なく、パフォーマンスの問題が発生する可能性があります。

これまでに、JSONやXMLなどのHTTPリクエストで動的にデータセットをロードするJavascriptのツールキットが増えています。flotはかなり高速でオープンソースです。 Highchartsは非常に豊富で、非営利プロジェクトでは無料です。さらに難解な視覚化が必要な場合は、d3.jsを参照する必要があります。

Answer 3

私は別のJavaScriptのチャートを見つけましたstreに有効なライブラリaming data = https://github.com/INRIA/VisualSedimentation。このコードはd3.jsに依存していますが、いくつかの拡張性があります。