MIT App Inventorの新設Chart機能の利用例

　MIT App Inventorに新設されたChart機能[1]について、前報で述べました。ここでは、簡単な例で具体的にその使用例を示します。簡単にグラフを描きたい場合の参考にしていただければ幸いです。

■CSVファイルのデータからグラフを素早く描く

　x, yの組みのデータが格納されたcsvファイルからグラフを描きます。図１の左上に示したような.csvファイルです。このファイルから、その右側にあるようなグラフ描画は、下段にある２つのブロックだけで実現できます！最初のブロックでは、このファイルを読み込みます。読み込みが完了すると下のブロックが起動されます。その中では、.csvデータをリスト（リストのリスト）に変換して、それをChart.ImportFromListに与えるだけです。

■グラフを拡大して描画したい

　こんなに素早くグラフを描けたのですが、x軸, y軸とも自動で設定されており、この例では、158点のデータが一つの画面に圧縮して表示されています。そのため、グラフが太くなっています。データ全体の状況はこれでよくわかるのですが、拡大して詳しくみたい場合は、自分で工夫する必要があります。例えば、画面にはいつも15点づつのデータを表示し、グラフは自動的に左にシフトさせるようにしたのが、図２です。この実現にあたっては、[2]を参考にさせていただきました。

■Y軸のmin, maxを指定してグラフをシフトしたい

　図２では、グラフがシフトされるたびに、Y軸方向が自動的に拡大・縮小してしまい、みていると目がチラチラする場合があります。Y軸のmin, maxを指定してY軸範囲を固定できれば良いのですが、現状のChartにそれは無いようです。そこでその機能をなんとか実現させたのが図３です。図２では、グラフ描画のためのChartオプジェクトを１つ使っていましたが、ここでは、別にもう一つのChartオブジェクトを使い、そこには、右端の方に、最小値と最大値にしたい値を設定したのがミソです！

　この場合のグラフのシフトの様子は、下記のビデオをご覧ください。

　この利用例のアプリ（ソースコード）は、以下に公開していますので、詳細が必要な方はそれをご覧ください。

https://gallery.appinventor.mit.edu/?galleryid=d831024b-bd47-41a3-99f0-fc3ed2a3a076

参考資料

[1] Data Science with Charts and GoogleSheets

https://community.appinventor.mit.edu/t/data-science-with-charts-and-googlesheets/66116

[2] Charts component. Graphic shift left

https://community.appinventor.mit.edu/t/charts-component-graphic-shift-left/66169