【Adalo】グラフ作成にQuick Chart APIが結構便利だった話

（なぜこれを書いたか）
私はAdaloのマーケットプレイスに入っているグラフコンポーネントが使いづらいと感じていたので何か別のツールでグラフが作れないかずっと探していました。（Adalo標準のグラフはマイナスの数値が表示できないという致命的な弱点もありました。）

今回、偶然知ったQuick Chart というAPIを使って、簡単にグラフを作成するやり方を紹介をします。APIと言ってもURLにデータをパラメータとして追加すると画像としてリターンされるという代物で超お手軽です。

Adaloにデータとして取り込むのはWebViewで行いました。グラフのURLをWebViewで読み込むわけですが、このURLに変数を設定するとAdaloの画面上から任意のデータのグラフを作成することが出来ます。（固定画像ではなく動的なグラフが作成できます）

１．Adaloのグラフはここがダメ

Adaloではマーケットプレイスに棒グラフや折れ線グラフなどの各種グラフのコンポーネントが入っていますが、マイナスの値が表示できないところがどうしても我慢できませんでした。

（許せない例）
例えば各月の最低気温を折れ線グラフで表示する例を示します。以下のようなデータがあって、それをAdaloでグラフ化した場合と今回紹介するQuick Chartで作成した場合の2種類を紹介します。

上記例では1月と2月の最低気温がマイナスになっています。これをAdaloで折れ線グラフにすると1月と2月のデータが表示されません。

２．Quick Chartでグラフ化した

Quick Chartで上記データをグラフ化すると以下のようになります。グラフの画像データがリターンとして返ってきます。
（サイトのアドレス）　　https://quickchart.io/

これをAdaloのWebViewで取り込むと以下のようなイメージになります。「ちょっと線が太いかなあ～」等、思う所はありますがきちんとマイナス値も表示されており仕様上問題は無いです。

(追記)2022.4.13
折れ線グラフの線の太さはパラメータで変更できることが分かりました。下記はborderWidth : 2とした時の太さです。（標準太さ＝３）

３．Quick ChartのAPI仕様

Quick ChartのAPIを使うにはサイトのアドレス「https://quickchart.io/」にデータをパラメータとして追加して、クリックすればグラフデータが画像として返ってきます。API Keyや認証等が無いので非常に使いやすいです。

（上記グラフの作り方）
それでは上記の折れ線グラフはどうやって作ったか説明します。
サイトのBase URLに今回必要なパラメータを追加すると以下のような形になります。（※ 最初と最後の「」は表記上のためのもので実際は必要ありません）

～今回の折れ線グラフのURL～
「https://quickchart.io/chart?w=175&h=150&c={type:'line',data:{labels:['1月','2月', '3月','4月', '5月'], datasets:[{label:'最低気温', data: [-5,-2,1,7,9], fill:false,borderColor:'blue'}]}}」

うわ～！！何か、すごく難しそう。自分にはとても理解できない！と思った方もいるかも知れませんが、そんなこと無いです。とても分かり易い構造になっています。

（URLの構成）
～? 以降がその都度変わるパラメータになります～
「https://quickchart.io/chart　　　　　　→サイトのBase URLになります
?w=175&h=150　　　　→Adaloの画面に収まるように縦横サイズを指定
c={type:'line',　　  →グラフ（chart）のタイプにline(折れ線グラフ)を選択
data:　　　　　　　　　→これ以降がグラフを作成するデータになります
{labels:['1月','2月', '3月','4月', '5月'],　　　→ここはX軸の表示ラベルの設定
 datasets:　　　　　　　→X軸のラベルと対になるデータセットの値です
[{label:'最低気温',　　　　　　　→Y軸の表示ラベルを「最低気温」に設定
 data: [-5,-2,1,7,9],　　　→X軸のラベル値に対応するY軸の各データ値です
fill:false　→折れ線の下部分を色で染めるか：「染めない」（false）を選択
,borderColor:'blue'　　　　　　　　　　　　　　→線の色：「青」に設定
}]}}」

要はサイトのBase URLにグラフのデータ設定をJSONで表示してそれを?以下にパラメータとして追加するという構造になっています。

JSONなので波括弧（{ }）と角括弧（[ ]）の2種類が混在しているので、紛らわしいです。やるんだったら上記のURLをそのままコピーして、データ値や設定の違う部分だけ変更したほうが間違いが無いです。

今回は折れ線グラフを作りましたが、棒グラフにしたい場合はtype:の部分を
'line'→'bar'と変えてやれば表示の仕方が変わります。

４．動的なグラフを作ってみる

上記で示した折れ線グラフはQuick Chart APIで作成されたURLをもとにして作成されています。URLにグラフを作るためのデータをパラメータとして追加しましたが、データを固定値ではなく、変数として入れておけばグラフがその都度形が変わる動的なグラフにすることも可能です。

今回、Adaloでグラフを読み込んだ時のWebView設定は以下のようになっています。

Y軸の温度データを今度は固定値ではなく、変数にして自由に数値を変えられるようにしてみます。Adaloの画面にインプットを5個配置し、インプット値を変数とします。WebViewのURLの温度データの部分にインプットを変数として入れ込んだのが下記です。（変数：input3～input7）

今迄は最低気温のグラフを作ってきましたが、温度データを大きな数字に入れ替えて今度は「最高気温のグラフ」にしてみました。

これでQuick Chartの使い方概要の説明は終わります。グラフの種類も折れ線、棒グラフだけでなくいろいろな種類が用意されていますので用途に合わせて使ってみて下さい。

ご興味を持たれた方がいらっしゃれば是非Quick Chartのサイトにある説明書をご一読されることをお勧めします。

（あとがき）
私はQuick Chartを触って2，3日しか経っていないので内容を全部把握しているわけではありませんが、必要十分な機能は持っていると思います。何しろAPIと言いながらも「URL+パラメータ追加」の使い方が簡単なのはとてもいいです。

もう一つ素晴らしいと思ったのはWebView経由でグラフを表示しているのに反映するのに時間がかからないという事です。私は以前はGoogleスプレッドシートでグラフを作ってそれをWebView経由でAdaloに持ってくるという事をやっていました。

しかしこのやり方には大きな問題がありました。固定のグラフを作るのはいいのですが、データをその都度入力して動的なグラフを表示するのに全く向いていないのです。グラフがAdaloに反映されるのに時間がかかり過ぎるのです。（一旦、別画面に遷移したり、再読み込みしないとグラフが切り替わらないのです。もう待ちきれないのです。）

スプレッドシートのグラフの問題やAdaloのマーケットプレイスのグラフの問題等もこれで解決できるので当面はこれを使っていこうと思っています。

（関連ブログ）

（過去の投稿はこちら）
https://note.com/mucho3/n/n632515d056d1