センサーの値をリアルタイムで表示するJSのグラフライブラリはchart.jsで決まり！！

- スマホでジャイロセンサーの値を取得する`DeviceOrientationEvent`を使ってみた。
    - [デバイスの方向の検出 \- Web API \| MDN](https://developer.mozilla.org/ja/docs/Web/API/Detecting_device_orientation)
    - [DeviceOrientationEvent \- Web APIs \| MDN](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent)
- せっかくなので取得した値をリアルタイムにグラフに描画してみた。
- せっかくなのでライブラリを比較してみた。

## 概要
- chart.js最強！！！！
    - センサーの取得間隔を差し引けば5msほどで描画しており、他の追随を許しません。
- **速度**は300個(100 × 3)のデータを折れ線グラフで描画するのに掛かる時間です。自分の環境だけの雑な測定なので参考程度に。
- **総評**は「センサーのリアルタイム表示」という観点から、描画速度を最優先に評価しました。
    - chartistは中途半端に開発が止まってしまっているため、google Chartsは描画が遅すぎるため今回の観点では戦力外
- **DeviceOrientation API Demo**の🔗から実際の挙動を確認できます。(iPhone未対応。PCでの確認方法は下記)


| Library | 速度 | document | example | 総評 | DeviceOrientation API Demo |
|:-:|:-:|:-:|:-:|:-:|:-:|
| [c3.js](#c3js) | 150ms | ◯ | [◎](https://c3js.org/examples.html) | △ | [🔗](https://arakaki-tokyo.github.io/frontend/chart/c3.js/)[(ソース)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/c3.js/myscript.js) |
| [chart.js](#chartjs) | 20ms | △ | [◯](https://www.chartjs.org/samples/latest/) | ◎ | [🔗](https://arakaki-tokyo.github.io/frontend/chart/chart.js/)[(ソース)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/chart.js/myscript.js)  |
| [chartist](#chartist) | 70ms | - | - | ✕ | [🔗](https://arakaki-tokyo.github.io/frontend/chart/chartist/)[(ソース)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/chartist/myscript.js)  |
| [ECharts](#echarts) | 90ms | ◯ | [◎](https://echarts.apache.org/examples/en/index.html) | ◯ | [🔗](https://arakaki-tokyo.github.io/frontend/chart/echarts/)[(ソース)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/echarts/myscript.js)  |
| [google Charts](#google-charts) | 170ms | ◯ | [◯](https://developers.google.com/chart/interactive/docs/gallery) | ✕ | [🔗](https://arakaki-tokyo.github.io/frontend/chart/google_charts/)[(ソース)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/google_charts/myscript.js)  |
| [HIGHCHARTS](#highcharts) | 70ms | ◯ | [◎](https://www.highcharts.com/demo) | ◯ | [🔗](https://arakaki-tokyo.github.io/frontend/chart/highcharts/)[(ソース)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/highcharts/myscript.js)  |
| [Plotly.js](#plotlyjs) | 100ms | ◯ | [◯](https://plotly.com/javascript/plotly-fundamentals/) | ◯ | [🔗](https://arakaki-tokyo.github.io/frontend/chart/plotly/)[(ソース)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/plotly/myscript.js)  |
| 【参考】センサのみ | 16ms |  |  |  | [🔗](https://arakaki-tokyo.github.io/frontend/chart/template/)[(ソース)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/template/myscript.js)  |
|  |  |  |  |  |  |

### PCでの確認方法
![Untitled_ Dec 30, 2020 12_56 AM.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378557/0a5e66a9-4a1d-00d7-dda7-a8434b526f81.gif)
仕様ではalphaの値は0~360のはずですが、なぜかchromeのエミュレータでは-180~180になってます。
　ref. [DeviceOrientation Event Specification](https://www.w3.org/TR/orientation-event/)


以下、ライブラリの使用方法等メモしておきます。
なお、ライブラリ以外のセンサーの値の取得などの処理はできるだけ共通させるようにしました。[(テンプレ)](https://github.com/arakaki-tokyo/frontend/blob/develop/chart/template/myscript.js)
ご参考になれば幸いです。


##  C3.js
表へ[🔝](#概要)
### コメント
- 描画遅い
- データのラベルと値を一つの配列に入れる扱い方に違和感([columns](https://c3js.org/reference.html#data-columns)で設定する場合。[row](https://c3js.org/reference.html#data-rows)毎で設定も可能)
- ドキュメントは見やすい。設定毎にサンプルのリンクがあり理解しやすい。
- サンプルはコードの変更・反映可能


### LINK
- official:  [C3\.js \| D3\-based reusable chart library](https://c3js.org/)
- GitHub: [c3js/c3: A D3\-based reusable chart library](https://github.com/c3js/c3)
	- スター：8.9k
- interview:  [C3\.jsが実現する，学習不要のグラフ機能](https://www.infoq.com/jp/news/2014/09/c3js-d3-charting/)

### Installation
公式ではダウンロードしてファイル取り出せと言っているが、cdnjsで公開されてたのでCDNから読み込む。

- [C3\.js \| D3\-based reusable chart library](https://c3js.org/gettingstarted.html)
- [c3 \- Libraries \- cdnjs \- The \#1 free and open source CDN built to make life easier for developers](https://cdnjs.com/libraries/c3)

```js
<link  rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css"  integrity="sha512-cznfNokevSG7QPA5dZepud8taylLdvgr0lDqw/FEZIhluFsSwyvS81CMnRdrNSKwbsmc43LtRd2/WMQV+Z85AQ=="  crossorigin="anonymous"  />	
<script  src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"  integrity="sha512-+IpCthlNahOuERYUSnKFjzjdKXIbJ/7Dd6xvUp+7bEw0Jp2dg6tluyxLs+zq9BMzZgrLv8886T4cBSqnKiVgUw=="  crossorigin="anonymous"></script>
```

加えてD3.jsのライブラリも必要とのこと。
> C3 depends on D3, so please load D3 too.

 [Home · d3/d3 Wiki](https://github.com/d3/d3/wiki)
 
```js
<script src="https://d3js.org/d3.v5.min.js"></script>
```

### Getting Started
ref. [C3\.js \| D3\-based reusable chart library](https://c3js.org/gettingstarted.html)

```html
<div  id="chart"></div>
```

```js
var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
```

### 再描画
> By using load() API, you can load data and update the chart dynamically as follows:

```js
chart.load({
  columns: [
    ['data1', 300, 100, 250, 150, 300, 150, 500],
    ['data2', 100, 200, 150, 50, 100, 250]
  ]
});
```

### Options
- アニメーション無効化
	-  [C3\.js \| D3\-based reusable chart library](https://c3js.org/reference.html#transition-duration)
- Y軸タイトル
	- [C3\.js \| D3\-based reusable chart library](https://c3js.org/reference.html#axis-y-label)
- Y軸固定
	- [C3\.js \| D3\-based reusable chart library](https://c3js.org/reference.html#axis-y-max)
- x軸の目盛り指定
	- [C3\.js \| reference.html#data-x](https://c3js.org/reference.html#data-x)




## Chart.js
表へ[🔝](#概要)
### コメント
- レンダリング速度は最も速い
	- 点を描画する場合は約70ms, 点を描画しない場合は驚異の20ms！！
- ドキュメントは分かりづらい
- サンプルは豊富だがコードがない(dev toolから確認しなければならない)

### Link
- [Chart\.js \| Open source HTML5 Charts for your website](https://www.chartjs.org/)
- [Chart\.js \- Wikipedia](https://en.wikipedia.org/wiki/Chart.js)
- GitHub: [chartjs/Chart\.js: Simple HTML5 Charts using the tag](https://github.com/chartjs/Chart.js)
	- star: 51.5k

### Installation 
[Installation · Chart\.js documentation](https://www.chartjs.org/docs/latest/getting-started/installation.html)

```js
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
```

### Getting Started
 [Usage · Chart\.js documentation](https://www.chartjs.org/docs/latest/getting-started/usage.html)

### Options
- グラフタイトル
	- [Title · Chart\.js documentation](https://www.chartjs.org/docs/latest/configuration/title.html)
	- `display: true`がないと表示されない
- Y軸タイトル
	- [Labelling · Chart\.js documentation](https://www.chartjs.org/docs/latest/axes/labelling.html)	
- 折れ線Color
	- [Colors · Chart\.js documentation](https://www.chartjs.org/docs/latest/general/colors.html)
	- rgb(), hsl() どちらも可
- 点を描画しない
	- [Line · Chart\.js documentation](https://www.chartjs.org/docs/latest/charts/line.html#point-styling)
	- dataset内`pointRadius:  0`
- ベジェ曲線を無効化
	- [Performance · Chart\.js documentation](https://www.chartjs.org/docs/latest/general/performance.html)
	- options.elements.line.tension = 0
- アニメーション 無効化
	- [Performance · Chart\.js documentation](https://www.chartjs.org/docs/latest/general/performance.html)
	- options.animation.duration = 0
	- options.hover.animationDuration = 0
	- options.responsiveAnimationDuration = 0
- 凡例を下に
	- [Legend · Chart\.js documentation](https://www.chartjs.org/docs/latest/configuration/legend.html#position)
- Y軸固定
	- [Linear · Chart\.js documentation](https://www.chartjs.org/docs/latest/axes/cartesian/linear.html?h=axes)
	- [Category · Chart\.js documentation](https://www.chartjs.org/docs/latest/axes/cartesian/category.html#min-max-configuration)

### 再描画
- [Updating Charts · Chart\.js documentation](https://www.chartjs.org/docs/latest/developers/updates.html)
- [Chart\.js API · Chart\.js documentation](https://www.chartjs.org/docs/latest/developers/api.html#updateconfig)

## chartist
表へ[🔝](#概要)
### コメント
- 機能的に不十分、というか開発途中？1年以上コミットなし。

### LINK
- GitHub: [gionkunz/chartist\-js: Simple responsive charts](https://github.com/gionkunz/chartist-js)
	- star: 12.4k
- Official: [Chartist \- Simple responsive charts](http://gionkunz.github.io/chartist-js/)


### Installation
- [chartist \- Libraries \- cdnjs \- The \#1 free and open source CDN built to make life easier for developers](https://cdnjs.com/libraries/chartist)

```js
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.css" integrity="sha512-V0+DPzYyLzIiMiWCg3nNdY+NyIiK9bED/T1xNBj08CaIUyK3sXRpB26OUCIzujMevxY9TRJFHQIxTwgzb0jVLg==" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.11.4/chartist.min.js" integrity="sha512-9rxMbTkN9JcgG5euudGbdIbhFZ7KGyAuVomdQDI9qXfPply9BJh0iqA7E/moLCatH2JD4xBGHwV6ezBkCpnjRQ==" crossorigin="anonymous"></script>
```

##  ECharts
表へ[🔝](#概要)
### コメント
- baidu製のライブラリ。最近(20年12月)アパッチインキュベーションを卒業した？
- 出自が若干不安だがまぁまぁ

### LINK
- Official: [Apache ECharts \(incubating\)](https://echarts.apache.org/en/index.html)
	- [Welcome to The Apache Software Foundation\!](https://www.apache.org/)
	- [Apacheソフトウェア財団 \- Wikipedia](https://ja.wikipedia.org/wiki/Apache%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E8%B2%A1%E5%9B%A3)
	- [The Apache Incubator](https://incubator.apache.org/)
- GitHub: [apache/incubator\-echarts](https://github.com/apache/incubator-echarts)
	- star: 44.2k
- 

### about them
> Apache ECharts is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator.
> 
> Apache ECharts は、Apache Incubator のスポンサーである Apache Software Foundation (ASF) でインキュベーション中の取り組みです。


`Graduated Projects`?
start: 2018-01-18
end  : 2020-12-16
[All Incubator Projects By Status](https://incubator.apache.org/projects/#current)
[Incubation Status ECharts \- Apache Incubator](https://incubator.apache.org/projects/echarts.html)

### Overview
[ドキュメント\-ApacheECharts（インキュベーション）](https://echarts.apache.org/next/en/tutorial.html#ECharts%20Basic%20Concepts%20Overview)
 
### Getting Started
#### Installation
```js
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js" integrity="sha256-l2MbFZa/DPaDeHSfMIRbcg5x1GwNX1LaeTEl93+r6VU=" crossorigin="anonymous"></script>
```
or

```js
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.0/echarts.min.js" integrity="sha512-ZRdjJAYP8Kij8Lkln9uiGj0jIrMDLAALm1ZB2b3VfV9XJ0nR4zbJmHKB42/A4tgMlZS4DTPnSAmcYRoS0dginA==" crossorigin="anonymous"></script>
```
[Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/tutorial.html#Get%20Started%20with%20ECharts%20in%205%20minutes)

### Dynamic Data Updating
- [ドキュメント\-ApacheECharts（](https://echarts.apache.org/next/en/tutorial.html#Loading%20and%20Updating%20of%20Asynchronous%20Data)
	- [Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/tutorial.html#Loading%20and%20Updating%20of%20Asynchronous%20Data)


### Options
- グラフタイトル
	- [Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/option.html#title)
- Y軸固定
	- [Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/option.html#yAxis.max)
- Y軸タイトル
	- [Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/option.html#yAxis.name)
- 点非表示
	- [Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/option.html#series-line.symbol)
- 折れ線の色
	- [Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/option.html#color)
- tooltip
	- [trigger](https://echarts.apache.org/next/en/option.html#tooltip.trigger)
	- [axisPointer](https://echarts.apache.org/next/en/option.html#tooltip.axisPointer)
	- [Examples \- Apache ECharts \(incubating\)](https://echarts.apache.org/examples/en/editor.html?c=confidence-band)
- アニメーション無効化
	- [Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/option.html#animation)
- 凡例を下に
	- [Documentation \- Apache ECharts\(incubating\)](https://echarts.apache.org/next/en/option.html#legend.bottom)
- [Render by Canvas or SVG](https://echarts.apache.org/next/en/tutorial.html#Render%20by%20Canvas%20or%20SVG)


## google Charts
表へ[🔝](#概要)
### コメント
- レンダリングが最も遅い
- デザインは最小限
- ドキュメントは充実、反面サンプルは物足りない印象
- データを完全にカプセル化して扱う。スプレッドシートなど外部ソースとの連携が想定されている。

### LINK
- [Charts \| Google Developers](https://developers.google.com/chart)
- GitHub: [google/charts](https://github.com/google/charts)


### Options
[Line Chart \| Charts \| Google Developers](https://developers.google.com/chart/interactive/docs/gallery/linechart#configuration-options)

- グラフタイトル
	- `title`
- Y軸タイトル
	- `hAxis.title`
- Y軸固定
	- `hAxis.maxValue`
	- `hAxis.minValue`
- 線の色
	- `colors`
- 凡例を下に
	- `legend.position`


#### 再描画
[Draw the Chart \| Charts \| Google Developers](https://developers.google.com/chart/interactive/docs/basic_draw_chart)
> method every time you change the data or the options and want to update the chart.

[more information](https://developers.google.com/chart/interactive/docs/basic_draw_chart#more-information)

- Ref. [Google Visualization API Reference \| Charts \| Google Developers](https://developers.google.com/chart/interactive/docs/reference)
	- addRow()
	- removeRow()
	- draw()


### Performance
ドキュメントに従い、レンダリングが完了するまでは再描画を行わないようにした。
ref. [Handling Events \| Charts \| Google Developers](https://developers.google.com/chart/interactive/docs/events#the-ready-event)
> You should always listen for the ready event before trying to call methods on it after calling `draw()`.

```js
google.visualization.events.addListener(tableChart,  'ready', myReadyHandler);
```
`deviceorientation`イベントの`alpha`値は相対値で取得しているため、`removeEventListener`→`addEventListener`を行うたびに初期値(なぜか90)を返してしまう。
→`ready`イベントでフラグの設定、フラグ立ってたら再描画ってことにした。レンダリング速度は変わらず。

## HIGHCHARTS
表へ[🔝](#概要)
### コメント
- 商用有料だけあって多機能
- 設定項目毎にサンプルがあり分かりやすい

### LINK
- [Interactive JavaScript charts for your webpage \| Highcharts](https://www.highcharts.com/)
- GitHub: [highcharts/highcharts: Highcharts JS, the JavaScript charting framework](https://github.com/highcharts/highcharts)
	- start: 9.8k

### Installation
- [Installation \| Highcharts](https://www.highcharts.com/docs/getting-started/installation#a-include-highcharts)
- [Get it – Highcharts](https://www.highcharts.com/blog/download/)
- [code\.highcharts\.com](https://code.highcharts.com/)

```js
<script  src="https://code.highcharts.com/highcharts.src.js"></script>
```

### Options
- ref.
	- [How to set options](https://www.highcharts.com/docs/getting-started/how-to-set-options)
	- [Highcharts JS API Reference](https://api.highcharts.com/highcharts/)
- animaion オフ
	- [chart\.animation \| highcharts API Reference](https://api.highcharts.com/highcharts/chart.animation)
- Y軸固定
	- [yAxis\.max \| highcharts API Reference](https://api.highcharts.com/highcharts/yAxis.max)
	- [yAxis\.min \| highcharts API Reference](https://api.highcharts.com/highcharts/yAxis.min)
- Y軸タイトル
	- [yAxis\.title\.text \| highcharts API Reference](https://api.highcharts.com/highcharts/yAxis.title.text)
- 折れ線の色
	- [plotOptions\.line\.color \| highcharts API Reference](https://api.highcharts.com/highcharts/plotOptions.line.color)
- 点非表示
	- [plotOptions\.series\.marker\.enabled \| highcharts API Reference](https://api.highcharts.com/highcharts/plotOptions.series.marker.enabled)

#### 再描画
ref. [Highcharts Class: Chart](https://api.highcharts.com/class-reference/Highcharts.Chart#update)



## Plotly.js
表へ[🔝](#概要)
### コメント
- R, Python用の描画ライブラリ
- インタラクティブにグリグリ動かせる分レンダリングは遅めだが、同じくD3.jsベースのC3.jsよりは速いし高機能(個人と組織を比べたら当然か…)

### LINK
- [Plotly: The front end for ML and data science models](https://plotly.com/)
	- [Plotly JavaScript Graphing Library \| JavaScript \| Plotly](https://plotly.com/javascript/)
- [Plotly \- Wikipedia](https://en.wikipedia.org/wiki/Plotly)
- [Plotly \- Chrome ウェブストア](https://chrome.google.com/webstore/detail/plotly/khajkhinhblhaenlhpodnblkmpdgclne?itemlang&hl=ja&q=AdBlock)
- GitHub: [plotly/plotly\.js: Open\-source JavaScript charting library behind Plotly and Dash](https://github.com/plotly/plotly.js)
	- star: 12.6k

### 再描画
ref. [Function Reference \| JavaScript \| Plotly](https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact)
[restyle](https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle)はデータの属性を変更する、[relayout](https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrelayout)はレイアウトオブジェクト、[update](https://plotly.com/javascript/plotlyjs-function-reference/#plotlyupdate)はその両方。
react以外はトレースの一つに(または複数、全部に共通)で変更を加える。
ので、今回はreactが適当。

<mark>**重要**</mark>
> Important Note: In order to use this method to plot new items in arrays under `data` such as `x` or `marker.color` etc, these items must either have been added immutably (i.e. the identity of the parent array must have changed) or the value of [`layout.datarevision`](https://plotly.com/javascript/reference/layout/#layout-datarevision) must have changed.

実行にあたっては毎回配列を生成するか`layout.datarevision`を変更しなければならない。
明らかに簡単そうな後者を選択。→[layout \| JavaScript \| Plotly](https://plotly.com/javascript/reference/layout/#layout-datarevision)

### Options
- グラフタイトル
	- [layout \| JavaScript \| Plotly](https://plotly.com/javascript/reference/layout/#layout-title-text)
- Y軸範囲固定
	- [layout\.yaxis \| JavaScript \| Plotly](https://plotly.com/javascript/reference/layout/yaxis/#layout-yaxis-range)
- Y軸タイトル
	- [layout\.yaxis \| JavaScript \| Plotly](https://plotly.com/javascript/reference/layout/yaxis/#layout-yaxis-title-text)
- 点非表示
	- [scatter Traces \| JavaScript \| Plotly](https://plotly.com/javascript/reference/scatter/#scatter-mode)
	- デフォルトの方がパフォーマンス良さげ。
- サイズ
	-  [layout \| JavaScript \| Plotly](https://plotly.com/javascript/reference/layout/#layout-width)
- 凡例の場所(並び)
	- [layout \| JavaScript \| Plotly](https://plotly.com/javascript/reference/layout/#layout-legend-orientation)