心電図みたいなアニメーション付き折れ線グラフを生成できるJavaScriptライブラリ「Smoothie Charts」

あまり使いみちは多くないかもしれませんが、心電図のようなグラフを作成できます。
PVの推移を表示したい、サーバーのCPUなどを表示したいなどに使えそうなJavaScriptライブラリSmoothie Charts: A JavaScript Charting Library for Streaming Dataです。

sponsors

使用方法

Smoothie Charts: A JavaScript Charting Library for Streaming Dataからファイル一式をダウンロードします。
    
<script type="text/javascript" src="smoothie.js"></script>
    <script type="text/javascript">
      //ランダムのデータを用意しています。
      var random = new TimeSeries();
      setInterval(function() {
        random.append(new Date().getTime(), Math.random() * 10000);
      }, 500);
      
      //タイムラインを生成
      function createTimeline() {
        var chart = new SmoothieChart();
        chart.addTimeSeries(random, { 
          strokeStyle: 'rgba(0, 255, 0, 1)', //線の色
          fillStyle: 'rgba(0, 255, 0, 0.2)', //塗り
          lineWidth: 4 //太さ
        });
        chart.streamTo(document.getElementById("id名"), 500); //数字はディレイ
      }
    </script>
    
上記を記述したらID名を表示させたい場所に書けば完成です。
<canvas id="id名" width="400" height="200"></canvas>

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors