timeplot.js を使ってみた


これです。
timeplot.js

http://simile.mit.edu/timeplot/

用はCSVとかテキストのデータを自動でグラフにしてくれる
というJSライブラリです。

URL先のTOPに出てくるグラフとかすごすぎる。

使い方

1:とりあえずインクルード

<script src=”http://static.simile.mit.edu/timeplot/api/1.0/timeplot-api.js” type=”text/javascript”></script>

ライブラリを落とすんじゃなくて、外部JSをたたいてくださいというタイプです。
まあこのJS->画像作成処理->Ajaxでアウトプット
というスタイルなので当たり前といえば当たり前ですが。

ちなみに若干重いです。
あと自分のサーバに置けないのはちょっと不安かな。

2:HTML部分を書こう

<body onload=”onLoad();” onresize=”onResize();”>
<div id=”my-timeplot” style=”height: 150px;”></div>
</body>

こんだけです。
もちろんonloadはイベントリスナーで対応してもOK。

3:メインのJS部分

<script type=’text/javascript’>
function onLoad() {
var plotInfo = [
Timeplot.createPlotInfo({
id: “plot1”
})
];

timeplot = Timeplot.create(document.getElementById(“my-timeplot”), plotInfo);

//ここでデータファイルのパスを書く
timeplot.loadText(“a.txt”, ” “, eventSource);

}

var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
timeplot.repaint();
}, 100);
}
</script>

とりあえずこれでまずは動きます。(データ突っ込めば)
しょぼいけどw

最後の

timeplot.loadText(“a.txt”, “,”, eventSource);

これがデータロード部分で、
第一引数がファイル名
第二引数が区切り文字
です。

区切り文字はデータテキストの区切り文字です(そのまんま)

これで、自分のサーバ上のデータを取得して、グラフにして、HTMLにAjaxで吐き出す
という設定が終わりました。

すげー簡単!

ちなみに上の場合はカラムが2個の場合(日付,データ)とかのデータに対応します。

4:遊ぼう!

もちろんかっこよく仕上げるいじり方が色々書いてあるので、
ドキュメントみてもらうのが一番ですが、
とりあえずこんな感じでやれば簡単にそれっぽくなります。
以下 var plotInfo の中身を書き換える遊び

var plotInfo = [
Timeplot.createPlotInfo({
id: “plot1”,
dataSource: new Timeplot.ColumnSource(eventSource,1),
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: “#0000ff”,
fillColor: “#00ff00”,
showValues: true
})
];

これでマウスオーバーで日付とデータがでます。
データが(日付、データ1、データ2..)となる場合は

var plotInfo = [
Timeplot.createPlotInfo({
id: “plot1”,
dataSource: new Timeplot.ColumnSource(eventSource,1),
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: “#ff0000”,
fillColor: “#cc8080”,
showValues: true
}),
Timeplot.createPlotInfo({
id: “plot2”,
dataSource: new Timeplot.ColumnSource(eventSource,3),
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: “#D0A825”,
showValues: true
})

こんな感じでJS部分をコピー追加していけばOKです。

ちなみに

id -> データファイルのカラム番号になっています。

最後

BSDライセンスだそうです。
でも十分遊べますねこれ!


Leave a Reply