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

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

使用方法 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ライブラリ「Smoothie Charts」サンプル

sponsors

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

記事作成:
記事URL:

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