SIMILE Timeplotで時間軸のグラフを作成する11つのステップ
How to Create Timeplotsの日本語版
以下のような分かりにくとろこがあったので、作ってみた。
- 全体のHTMLのが見れない
- オリジナルチュートリアルの記述に間違いがある
- データがどこに置いてあるか分からない
英語力が足りないので文章の説明は不足してるところがあるけどご容赦。
エディタ等でHTMLファイルを作成する。
Step 1. APIへのリンク
JavascriptとCSSを設定する
Tutorial.html
<html> <head> ... <link rel='stylesheet' href='styles.css' type='text/css' /> <script src="http://api.simile-widgets.org/timeplot/1.1/timeplot-api.js" type="text/javascript"></script> ... </head> <body> ... </body> </html>
styles.css
@import url("http://www.simile-widgets.org/styles/common.css");
Step 2. div要素の作成
bodyにdiv要素の作成する。
高さとIDは任意に変更可能。
<html> <head> ... <link rel='stylesheet' href='styles.css' type='text/css' /> <script src="http://api.simile-widgets.org/timeplot/1.1/timeplot-api.js" type="text/javascript"></script> ... </head> <body> <div id="my-timeplot" style="height: 150px;"></div> </body> </html>
Step 3. Timeplot.create()メソッドの呼び出し
onload()、onresize()イベントハンドラーをbody要素に追加する。
にJavascriptを記述する。
<body onload="onLoad();" onresize="onResize();"> ... </body>
var timeplot; function onLoad() { var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1" }) ]; timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo); } var resizeTimerID = null; function onResize() { if (resizeTimerID == null) { resizeTimerID = window.setTimeout(function() { resizeTimerID = null; timeplot.repaint(); }, 100); } }
ここまでの記述で、timeplotの枠ができる。
Step 4. データの追加
プロットするためにデータが必要がある。Timeplotがサポートしてるのは、プレーンテキスト形式で、複数行、複数列に対応している。
EventSource と ファイルからのロード処理を追加する。
チュートリアルとして、このデータファイルを使用する。
ダウンロードしたファイル名をdata.txtに変更する。
#で始まる行は、コメントとして無視される。
Timeplot.loadText()メソッドは、データファイルの区切り文字を指定することができる。(今回の場合は"," カンマです。)
Timeplot.ColumnSource(eventSource,1)メソッドの第2パラメータは、loadTextで指定したファイルの列を
指定する。
function onLoad() { var eventSource = new Timeplot.DefaultEventSource(); Step4で追加した処理 var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1", dataSource: new Timeplot.ColumnSource(eventSource,1) Step4で追加した処理 }) ]; timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo); timeplot.loadText("data.txt", ",", eventSource); Step4で追加した処理 }
Step 5. 範囲の調整
なにも設定しなくても、Timeplotは自動で最大値を適切に設定してくれる。
ValueGeometryを使用して水平方向にずらすことができる。範囲は、0〜100の間です。
var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1", dataSource: new Timeplot.ColumnSource(eventSource,1), valueGeometry: new Timeplot.DefaultValueGeometry({ Step5で追加した処理 min: 0, Step5で追加した処理 max: 100 Step5で追加した処理 }) }) ];
Step 6. Y軸の値を表示
読みやすいように、Y軸にスケールのラベルを付けることもできる。
ValueGeometryで色と設定場所を指定することで可能だ。
var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1", dataSource: new Timeplot.ColumnSource(eventSource,1), valueGeometry: new Timeplot.DefaultValueGeometry({ gridColor: "#000000", Step6で追加した処理 axisLabelsPlacement: "left", Step6で追加した処理 min: 0, max: 100 }) }) ];
Step 7. 時間軸の表示
ValueGeometryと同様にTimeGeometryで時間軸のラベルを設定することができる。
var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1", dataSource: new Timeplot.ColumnSource(eventSource,1), valueGeometry: new Timeplot.DefaultValueGeometry({ gridColor: "#000000", axisLabelsPlacement: "left", min: 0, max: 100 }), Step7で追加した処理 (,の追加を忘れずに) timeGeometry: new Timeplot.DefaultTimeGeometry({ Step7で追加した処理 gridColor: "#000000", Step7で追加した処理 axisLabelsPlacement: "top" Step7で追加した処理 }) }) ];
Step 8. プロットの色の変更
プロットと囲んだ範囲の色をPlotInfoを使用することにより変更することも可能だ。
var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1", dataSource: new Timeplot.ColumnSource(eventSource,1), valueGeometry: new Timeplot.DefaultValueGeometry({ gridColor: "#000000", axisLabelsPlacement: "left", min: 0, max: 100 }), timeGeometry: new Timeplot.DefaultTimeGeometry({ gridColor: new Timeplot.Color("#000000"), axisLabelsPlacement: "top" }), Step8で追加した処理 (,の追加を忘れずに) lineColor: "#ff0000", Step8で追加した処理 fillColor: "#cc8080" Step8で追加した処理 }) ];
Step 9. マウスオーバーしたら値を表示する
マウスを合わせたときに、年月と値を表示することができる。
var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1", dataSource: new Timeplot.ColumnSource(eventSource,1), valueGeometry: new Timeplot.DefaultValueGeometry({ gridColor: "#000000", min: 0, max: 100 }), timeGeometry: new Timeplot.DefaultTimeGeometry({ gridColor: new Timeplot.Color("#000000"), axisLabelsPlacement: "top" }), lineColor: "#ff0000", fillColor: "#cc8080", Step9で追加した処理 (,の追加を忘れずに) showValues: true Step9で追加した処理 }) ];
Step 10. 別のグラフを追加する
複数のプロットを同じTimeplot上に描くことができる。
var timeGeometry = new Timeplot.DefaultTimeGeometry({ Step10で追加した処理 gridColor: new Timeplot.Color("#000000"), Step10で追加した処理 axisLabelsPlacement: "top" Step10で追加した処理 }); Step10で追加した処理 var valueGeometry = new Timeplot.DefaultValueGeometry({ Step10で追加した処理 gridColor: "#000000", Step10で追加した処理 min: 0, Step10で追加した処理 max: 100 Step10で追加した処理 }); Step10で追加した処理 var plotInfo = [ Timeplot.createPlotInfo({ id: "plot1", dataSource: new Timeplot.ColumnSource(eventSource,1), timeGeometry: timeGeometry, Step10で追加した処理 valueGeometry: valueGeometry, Step10で追加した処理 lineColor: "#ff0000", fillColor: "#cc8080", showValues: true }), Timeplot.createPlotInfo({ Step10で追加した処理 id: "plot2", Step10で追加した処理 dataSource: new Timeplot.ColumnSource(eventSource,3), Step10で追加した処理 timeGeometry: timeGeometry, Step10で追加した処理 valueGeometry: valueGeometry, Step10で追加した処理 lineColor: "#D0A825", Step10で追加した処理 showValues: true Step10で追加した処理 }) Step10で追加した処理 ];
Step 11. 別のイベントを追加する
Timeplot はTimeline events 形式でもをロードしてプロットすることができ、
プロットとイベントを同じTimeplot上に描くことができる。
var eventSource2 = new Timeplot.DefaultEventSource(); Step11で追加した処理 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 }), Timeplot.createPlotInfo({ Step11で追加した処理 id: "plot3", Step11で追加した処理 timeGeometry: timeGeometry, Step11で追加した処理 eventSource: eventSource2, Step11で追加した処理 lineColor: "#03212E" Step11で追加した処理 }) Step11で追加した処理 ]; timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo); timeplot.loadText("data.txt", ",", eventSource); timeplot.loadXML("events.xml", eventSource2); Step11で追加した処理 (オリジナルは、timeplotsになってるがtimeplotの間違い)
気になるモノ
ベッドやソファに簡単に差し込むだけで収納ラックになる新しい発想のラックが登場!座ったまま、寝たまま、リモコンがすぐ見つかる!
あなろ(インテリア雑貨)
¥ 980 (税込、送料別)
価格は記載時点のものです。購入前にご確認ください。