はじめに

気軽にグラフを作成できる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するか

example

{
  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関数で使用する場合

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と書かれたボタンを押すと
1. JSON文字列を作成
2. Power Automateを実行 - Image URLを取得、画像に反映

上記を実行します。

JSON文字列の作成

一次元配列(Array)の表現が難しく、非常にダサいです。

OnSelect(JSONボタン)

// 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の戻り値を設定します。

ImageコントロールのImageproperty

result.result

円グラフが作成されました📊

しかしながら今回は力業方式…。
全然スマートではない…。

ということで次回URLにグラフのパラメーターを設定してグラフを作成していこうと思います。
面白いので、ぜひ試してみてください！

超かっこいい活用事例はコチラ📊

https://www.linkedin.com/feed/update/urnactivity:7171103196625534976/