この動的なCSSのドットグラフを折れ線グラフにするにはどうすればよいですか？

Question

JavaScriptを使用してすべての計算を行うCSSでドットグラフを作成しました

このグラフはサイト分析を含む多くの目的に使用されます。

グラフをx秒ごとに自動的に更新するリアルタイム機能を有効にすることができます。

このグラフは、一連のAJAXリクエストを使用してデータベースからデータを取得しているため、正確な例を示すことはできません。

しかし、私だけで動作するようにグラフのためのいくつかのランダムな割合が含まJSFiddle、で一緒にこれを入れている：

http://jsfiddle.net/57Jjd/1/

私は多分にこれを回すことができるどのような方法がある場合、私は思っていました好ましくはちょうどCSS、JavaScript、およびJqueryを使用して、update()のスポットとともにアニメーションする折れ線グラフですか？

ので、代わりの：

私が好きな

：

Answer 1

あなたはあなたがあなたのポイント（divを）補間する必要があり、単純なdivを使用していて、連続線を取得します。 HTML5（キャンバス）を使用することをお勧めします。なぜなら、多くのdivを補間する（グラフの解像度の多くが）ページをレンダリングしにくくする可能性があるからです。 HTML5キャンバスはもちろん、ポイント間の補間が必要な場合に必要なものです。

最高のお礼

Answer 2

これはどういう意味ですか？ （100 - 上部=高さ）

$("#spot_1").animate({ 
    top: "95%", 
    height: "5%" 
});