はじめに
気軽にグラフを作成できるCoolなAPI、
QuickChartをLinkedInのFeedで拝見したので、
Power Apps・Power Automateで試してみたいと思います。
QuickChart
QuickChartは、JSONやクエリ文字列パラメーターでチャート画像を生成できるAPIです。
Chart.jsライブラリに基づいて構築されているとのこと。
折れ線グラフ、棒グラフをはじめ、様々なグラフを描画できます📊
作成できるグラフの種類
主に作成することができるグラフは8種類です。
| 種類 | 英語 | パラメーター |
|---|---|---|
| 折れ線 | Line | line |
| 棒 | Bar | bar |
| レーダー | Radar | radar |
| 円・ドーナツグラフ | Doughnut & Pie | doughnut and pie |
| 鶏頭図 | Polar Area | polar area |
| バブルチャート | Bubble | bubble |
| 散布図 | Scatter | scatter |
カタカタ調べていたら日本語の丁寧な説明サイトがありました…。
公式ではないとのことですが、大変参考になります
今回実践すること
APIを見つけたら、まず試そう！
QuickChartは認証も不要、気軽に使えます。
下記のようなJSONをPOSTするか
{
type: 'bar', // Show a bar chart
data: {
labels: [2012, 2013, 2014, 2015, 2016], // Set X-axis labels
datasets: [{
label: 'Users', // Create the 'Users' dataset
data: [120, 60, 50, 180, 120] // Add data to the chart
}]
}
}
| プロパティ | 内容 | データ型 |
|---|---|---|
| type | グラフの種類 | String（文字列） |
| data | グラフの中身 | オブジェクト |
| labels | x軸のラベル | array（配列） |
| datasets | y軸 | array（配列）に格納されたオブジェクト |
| label | 凡例 | String（文字列） |
| data | 値 | array（配列） |
Array（一次元配列）の処理は、Power Appsで実現することが面倒です。
URLに含めて使うこともできるとのこと
https://quickchart.io/chart?c={type:'bar',data:{labels:[2012,2013,2014,2015, 2016],datasets:[{label:'Users',data:[120,60,50,180,120]}]}}
From 公式ドキュメント
- Power AppsでPOSTするJSONを
ムリヤリ作る - Power AutomateにJSON文字列を渡す
- 戻り値のURLを画像コントロールで表示する
上記の手順で進めてみます。
作ってみる
サンプルデータ
ChatGPTに作ってもらいました。
| Date | Category A | Category B | Category C |
|---|---|---|---|
| 2023-01-01 | 45 | 48 | 65 |
| 2023-01-02 | 68 | 68 | 10 |
| 2023-01-03 | 84 | 22 | 37 |
| 2023-01-04 | 88 | 71 | 89 |
| 2023-01-05 | 89 | 13 | 59 |
Table(
{Date: "2023-01-01", CategoryA: 45, CategoryB: 48, CategoryC: 65},
{Date: "2023-01-02", CategoryA: 68, CategoryB: 68, CategoryC: 10},
{Date: "2023-01-03", CategoryA: 84, CategoryB: 22, CategoryC: 37},
{Date: "2023-01-04", CategoryA: 88, CategoryB: 71, CategoryC: 89},
{Date: "2023-01-05", CategoryA: 89, CategoryB: 13, CategoryC: 59}
)
Power Apps
下記の図で説明をすると
-
JSONと書かれたボタンを押すと- JSON文字列を作成
- Power Automateを実行 - Image URLを取得、画像に反映
上記を実行します。
JSON文字列の作成
一次元配列(Array)の表現が難しく、非常にダサいです。
// 1-1. データ用のコレクションをクリアする
Clear(colDataArray);
// 1-2. サンプルデータからCategoryA列を抜き出す
Collect(colDataArray, ShowColumns(Sample, "CategoryA"));
// 1-3. CategoryAの値をConcatして、Arrayっぽく整形する
Set(DataArrayString,
"[" & Concat(colDataArray, CategoryA & ",") & "]"
);
// 1-4. 字余りを消す
Set(DataArrayString,
Left(DataArrayString, Len(DataArrayString) - 2) & "]"
);
// 2-1. ラベル用のコレクションをクリアする
Clear(colDataArray);
// 2-2. X軸のラベルデータをDate列から設定する
Collect(colDataArray, ShowColumns(Sample, "Date"));
// 2-3. Dateの値をConcatして、Arrayっぽく整形する
Set(LabelsArrayString,
"[" & """" & Concat(colDataArray, Date & """" & "," & """") & "]"
);
// 2-4. 字余りを消す
Set(LabelsArrayString,
Left(LabelsArrayString, Len(LabelsArrayString) - 3) & "]"
);
// 3-1. JSONとして関数で宣言する
Set(JSONString,
JSON(
First(
Table(
{chart:
{
type: ComboboxCanvas1.Selected.Value,
data: {
labels: "{label}",
datasets: [
{
label:TextInputCanvas1.Value,
data: "{data}"
}
]
}
}
}
)
),
JSONFormat.IndentFour
)
);
// 4. 配列が、文字列で"[]"となってしまうので、無理やり[]に置き換える
Set(JSONString,
Substitute(
Substitute(
JSONString,
"""{label}""",LabelsArrayString
),
"""{data}""",DataArrayString
)
);
Set(result,QuickChartCreate.Run(JSONString));
しこたまダサい！
推奨しません(´;ω;｀)
まさかり🪓どうぞ
単純なグラフでも、このような汚い関数になってしまいます…。
実力不足を悔やみますが、一次元配列をPower Appsで表現するいい方法はないものなのか…。
せっかく作ったので、このJSON文字列をPower Automateに渡します。
Power Automate
Power Automateは単純にHTTP要求を実行するだけです。
-
Power AppsからJSON文字列を受け取る - 受け取った
JSON文字列をパースする - HTTP要求を送る
- Power Appsに結果を戻す
2. 受け取ったJSON文字列をパースする
自分で無理やり関数を用いて作った文字列を解析します。
{
"type": "object",
"properties": {
"chart": {
"type": "object",
"properties": {
"data": {
"type": "object",
"properties": {
"datasets": {
"type": "array",
"items": {
"type": "object",
"properties": {
"data": {
"type": "array",
"items": {
"type": "integer"
}
},
"label": {
"type": "string"
}
},
"required": [
"data",
"label"
]
}
},
"labels": {
"type": "array",
"items": {
"type": "string"
}
}
}
},
"type": {
"type": "string"
}
}
}
}
}
複合グラフを含めて、JSONの型をこちらのステップで固めてしまうと対応できないグラフが存在します。
3. HTTP要求 QuickChart APIを実行する
設定値は下記のとおりです。
| 項目 | 値 | 備考 |
|---|---|---|
| URI | https://quickchart.io/chart/create | |
| Method | Post | |
| Headers - Content-Type | application/json | |
| 本文 | @body('JSON_の解析') | |
| 戻り値 | @body('HTTP')?['url'] | こちらが作成されたグラフのURLです |
非常に単純なやつですね。
カスタムコネクタにしたほうが楽かもしれません。
Power Appsで結果を見てみる
ImageコントロールにPower Automateの戻り値を設定します。
result.result
円グラフが作成されました📊
しかしながら今回は力業方式…。
全然スマートではない…。
ということで次回URLにグラフのパラメーターを設定してグラフを作成していこうと思います。
面白いので、ぜひ試してみてください！
超かっこいい活用事例はコチラ📊
https://www.linkedin.com/feed/update/urn
activity:7171103196625534976/