読者です 読者をやめる 読者になる 読者になる

SIMILE Timeplotで時間軸のグラフを作成する11つのステップ

javascript



How to Create Timeplotsの日本語版
以下のような分かりにくとろこがあったので、作ってみた。

  • 全体のHTMLのが見れない
  • オリジナルチュートリアルの記述に間違いがある
  • データがどこに置いてあるか分からない

英語力が足りないので文章の説明は不足してるところがあるけどご容赦。


エディタ等でHTMLファイルを作成する。

Step 1. APIへのリンク

JavascriptCSSを設定する

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 (税込、送料別)

価格は記載時点のものです。購入前にご確認ください。