SIMILE Timeplotで点と線の折れ線グラフを作成する

SIMILE Timeplotで時間軸のグラフを作成する11つのステップ
で作成したものは、折れ線グラフ。
カーソルを合わせれば、日付と値は分かるが、それぞれの値を点としては表示していない。
点と線の折れ線グラフにする。

2010年の株価を例に表示する。

線だけ

昨日のTutorial9.htmlをベースに作成すると以下のようになる。

ソース(抜粋)

      var plotInfo = [
        Timeplot.createPlotInfo({
          id: "plot1",
          dataSource: new Timeplot.ColumnSource(eventSource,1),
          valueGeometry: new Timeplot.DefaultValueGeometry({
            gridColor: "#000000",
            axisLabelsPlacement: "left",
            max: 100
          }),
          timeGeometry: new Timeplot.DefaultTimeGeometry({
            gridColor: "#000000",
            axisLabelsPlacement: "top"
          }),
          lineColor: darkblue,
          showValues: true
        })
      ];

点と線あり

「dotColor: darkblue」を設定することで「点」を表示することができる。

ソース(抜粋)

      var plotInfo = [
        Timeplot.createPlotInfo({
          id: "plot1",
          dataSource: new Timeplot.ColumnSource(eventSource,1),
          valueGeometry: new Timeplot.DefaultValueGeometry({
            gridColor: "#000000",
            axisLabelsPlacement: "left",
            max: 100
          }),
          timeGeometry: new Timeplot.DefaultTimeGeometry({
            gridColor: "#000000",
            axisLabelsPlacement: "top"
          }),
          lineColor: darkblue,
          dotColor: darkblue,  これを追加
          showValues: true
        })
      ];