timeplot.js を使ってみた
これです。
timeplot.js
http://simile.mit.edu/timeplot/
用はCSVとかテキストのデータを自動でグラフにしてくれる
というJSライブラリです。
URL先のTOPに出てくるグラフとかすごすぎる。
使い方
１：とりあえずインクルード
<script src=”http://static.simile.mit.edu/timeplot/api/1.0/timeplot-api.js” type=”text/javascript”></script>
ライブラリを落とすんじゃなくて、外部JSをたたいてくださいというタイプです。
まあこのJS->画像作成処理->Ajaxでアウトプット
というスタイルなので当たり前といえば当たり前ですが。
ちなみに若干重いです。
あと自分のサーバに置けないのはちょっと不安かな。
２：HTML部分を書こう
<body onload=”onLoad();” onresize=”onResize();”>
<div id=”my-timeplot” style=”height: 150px;”></div>
</body>
こんだけです。
もちろんonloadはイベントリスナーで対応してもOK。
３：メインの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>
とりあえずこれでまずは動きます。（データ突っ込めば）
しょぼいけどｗ
最後の
timeplot.loadText(”a.txt”, “,”, eventSource);
これがデータロード部分で、
第一引数がファイル名
第二引数が区切り文字
です。
区切り文字はデータテキストの区切り文字です（そのまんま）
これで、自分のサーバ上のデータを取得して、グラフにして、HTMLにAjaxで吐き出す
という設定が終わりました。
すげー簡単！
ちなみに上の場合はカラムが2個の場合（日付,データ）とかのデータに対応します。
４：遊ぼう！
もちろんかっこよく仕上げるいじり方が色々書いてあるので、
ドキュメントみてもらうのが一番ですが、
とりあえずこんな感じでやれば簡単にそれっぽくなります。
以下 var plotInfo の中身を書き換える遊び
var plotInfo = [
Timeplot.createPlotInfo({
id: "plot1",
dataSource: new Timeplot.ColumnSource(eventSource,1),
timeGeometry: timeGeometry,
valueGeometry: valueGeometry,
lineColor: "#0000ff",
fillColor: "#00ff00",
showValues: true
})
];
これでマウスオーバーで日付とデータがでます。
データが（日付、データ１、データ２．.）となる場合は
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ライセンスだそうです。
でも十分遊べますねこれ！