Chart.js v2.0 で時系列グラフの描画


#始めに
***時系列グラフ(time series chart)***とは[文献1](https://github.com/nnnick/Chart.js/issues/1059)で冒頭に明記されているよに、下記の特徴をもった折れ線グラフです

- データは x軸上で等間隔ではない
- x軸 のラベルはデータとは無関係

下のグラフ（Chart.js v2.0 の sample です）で、青い実線と破線が通常の折れ線グラフ、 ***灰色の線が時系列グラフ***です

![スクリーンショット 2016-02-05 18.06.50.png](https://qiita-image-store.s3.amazonaws.com/0/46544/cb456e7b-8c7a-e5c1-288f-6f781ddbc4b3.png "スクリーンショット 2016-02-05 18.06.50.png")

きれいなグラフが手軽にかける Chart.js ですが、これまで***時系列グラフとか散布図とかがなく***、v2.0 のロードマップでした（

※[プラグインとしてつくっておられる方はいました](http://dima117.github.io/Chart.Scatter/) 

現在 [beta-2](https://github.com/nnnick/Chart.js/releases/tag/2.0.0-beta2)で上記のように時系列グラフの描画がうごいているようですので、僭越ながらその旨こちらでご報告させていただきます次第です

2016.05.02 補足：
V2.0 リリースされたみたいですね

#時系列グラフのサンプルプログラムの実行する際の注意

chart.js の github で v2.0-dev を選択して

![スクリーンショット 2016-02-05 17.56.00.png](https://qiita-image-store.s3.amazonaws.com/0/46544/2f7f0050-2bbd-5930-2f6c-a210a465d137.png "スクリーンショット 2016-02-05 17.56.00.png")

Zip をダウンロードして
![スクリーンショット 2016-02-05 17.56.25.png](https://qiita-image-store.s3.amazonaws.com/0/46544/8c4cb89d-7b59-70ab-79b7-a9325dd1f4ed.png "スクリーンショット 2016-02-05 17.56.25.png")

samples の html を適当に選んでブラウザで開くとみなキレイなグラフをかいてくれるのですが

![スクリーンショット 2016-02-05 17.58.21.png](https://qiita-image-store.s3.amazonaws.com/0/46544/74796693-2c45-f8a3-12a0-0836a97c9453.png "スクリーンショット 2016-02-05 17.58.21.png")

timeScale フォルダ配下の html、例えば line-time-scale.html を開くと下記のように真っ白なキャンパスが描画されるだけです

![スクリーンショット 2016-02-05 17.58.34.png](https://qiita-image-store.s3.amazonaws.com/0/46544/b49eeefd-421d-9930-d278-67057c56539c.png "スクリーンショット 2016-02-05 17.58.34.png")

デバッガでみてみると moment.js がない事が原因のようです
![スクリーンショット 2016-02-05 17.59.17.png](https://qiita-image-store.s3.amazonaws.com/0/46544/6c9aafba-ddfb-1c8b-d710-140297e324ac.png "スクリーンショット 2016-02-05 17.59.17.png")

ソースを見ると node_modules 配下の moment.js を使っています
![スクリーンショット 2016-02-05 18.00.10.png](https://qiita-image-store.s3.amazonaws.com/0/46544/8504a0c5-9ab1-b939-638f-d2d338ee4ef2.png "スクリーンショット 2016-02-05 18.00.10.png")

そこで、以下のいずれかの方法で moment を用意します（1. が普通だとは思いますが... なんか事情があるのなら 2. でも OK）

1. chart.js の root directory で npm install
2. moment.js をダウンロードしてきて、それを使うようにサンプルプログラムを変更

すると、冒頭のキレイなグラフが描画されます
![スクリーンショット 2016-02-05 18.06.50.png](https://qiita-image-store.s3.amazonaws.com/0/46544/b0573f7b-6f51-e8a9-d44c-001efc5b2a70.png "スクリーンショット 2016-02-05 18.06.50.png")

恥ずかしい話しなのですが、しばらくこれに気がついていなくて、time series はまだなのかな〜、とか勘違いしてました ^^;

#v1.0 からの変更点
時系列グラフが moment.js に depend している他、私が気がついた範囲でv1.0 からいろいろな変更点があるようです。

1. v1.0 では Chart を new して、Chart の Line メソッドでグラフを描画していたが、v2.0 では Chart を new する際の configパラメタでグラフの種別を指定し、new のタイミングで描画。Line メソッドはもうない

2. 動的に変化する Chart を書く際、v1.0 では chart.datasets の point と、chart.scales を書き換えることでもできていましたが（普通は addData, removeData を使うのでしょうけど一気に全部書き換えたい時に上の方法は便利でした）、それらの場所がchart.config.data 配下に変わっている


変更点一覧は現時点ではドキュメントにまとまっていないようですが、それを用意することが v2.0 の [issue に上がっている](https://github.com/nnnick/Chart.js/issues/1925)ようです


#references
1. [New chart type: Time Series #1059](https://github.com/nnnick/Chart.js/issues/1059) feature の定義
2. [Chart.Scatter](http://dima117.github.io/) plugin として提供されていました
3. [2.0.0-beta2](https://github.com/nnnick/Chart.js/releases/tag/2.0.0-beta2) 昨年暮れにリリースされました
4. [momentjs](http://momentjs.com) moment.js の本家です
5. [Moment.jsを使う](http://qiita.com/osakanafish/items/5ef636bbcb2c3ef94953) moment.js の大変分かりやすい記事
6. [Any docs on how to migrate from version 1 to 2.0(beta)?](https://github.com/nnnick/Chart.js/issues/1925) 変更ドキュメントないじゃん！という issue