Javaスクリプトでグラフを描く方法は？

Question

Javaスクリプトでグラフを描きたい。簡単な例で私の問題を分かち合いましょう。

Ind vs Aus cricket match. 
    X axis- Overs 
    Y axis- Runs 

両方のチームが同じグラフで得点したランを表示したいと思います。一緒に見せることはできますか？

私の経験は役に立ちます。助けを望んでいる。

例から：

はそれはのDataTableを構築し、グラフのさまざまな種類とそれらを視覚化するためのクラスが含まれ Google Visualization API:

を試してみてください,, ...

Answer 1

事前のおかげで助けを感謝されますGoogle Visualiation Code Playground：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'x'); 
    data.addColumn('number', 'Cats'); 
    data.addColumn('number', 'Blanket 1'); 
    data.addColumn('number', 'Blanket 2'); 
    data.addRow(["A", 1, 1, 0.5]); 
    data.addRow(["B", 2, 0.5, 1]); 
    data.addRow(["C", 4, 1, 0.5]); 
    data.addRow(["D", 8, 0.5, 1]); 
    data.addRow(["E", 7, 1, 0.5]); 
    data.addRow(["F", 7, 0.5, 1]); 
    data.addRow(["G", 8, 1, 0.5]); 
    data.addRow(["H", 4, 0.5, 1]); 
    data.addRow(["I", 2, 1, 0.5]); 
    data.addRow(["J", 3.5, 0.5, 1]); 
    data.addRow(["K", 3, 1, 0.5]); 
    data.addRow(["L", 3.5, 0.5, 1]); 
    data.addRow(["M", 1, 1, 0.5]); 
    data.addRow(["N", 1, 0.5, 1]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10}} 
     ); 
} 

これは何であるXとY軸で折れ線グラフを作成します。やろうとしている。

Answer 2

gRaphaelは、ウェブ用のグラフとして最適です。これは、SVGでグラフを生成するためにjavascriptを使用しています。IEの古いバージョンでは、VMLをクロスブラウザの出発点にしています。IE6以上で動作し、フラッシュは必要ありません。もう一つの利点は、javascriptオブジェクトによって制御されるSVG/VML DOM要素を使用することで、いつでもグラフ要素が高度にインタラクティブになり、javascriptで操作できることを意味します。

例コード（from doc barchart examples）：

r.hbarchart(10, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]]).hover(fin, fout); 

その行は、あなたが彼らの例では、例えば、関連情報を表示するために使用することができ、各要素にmousein呼び出し、マウスアウトコールバック関数2変数棒グラフを作成します正確な値。 2つの可変棒グラフはおそらく、1イニングの間に2つのチームの得点を表す良い方法です。 graphael dot chartは、複数のオーバーと複数のイニングがある場合、チームごとに1つずつ、より良いオプションになる可能性があります。他のチャートタイプもサポートされています。上のメインプロジェクトページのデモの例を参照してください。