チャート設定

概要

SQLブロック内でチャートを定義する時や、ドキュメントページ内でチャートブロックを定義する時は、以下に示すチャート設定が必要になります
チャート設定は、データソースに指定したクエリの実行結果をどのように加工して、どのように描画するかを指定するための設定です
- 設定可能なオプションはチャートの種類によって異なります

基本動作

チャートは次の流れで描画されます

データソースとして指定されたクエリの実行結果を取得します
チャート設定で指定されたデータモデリングと、クエリ実行結果を元に、データ加工用のSQLを生成します
- クエリ実行結果のカラムのデータ型によって生成されるSQLが変わる場合があります
2のSQLを実行、もしくはインメモリで加工して、チャート描画用のデータを生成します
- 以下の条件を満たす場合、SQLを実行せずに、同等の加工処理をブラウザ上で実行します
  - データソースのクエリ実行結果が1000件以下
  - カスタムSQLの指定がない
  - インメモリ処理が無効化されていない
- 描画用のデータは最大1000件までに制限されます
チャート設定と、3のチャート描画用データを元にチャートを描画します

チャートのデータモデリング

チャートは、データソースのクエリ実行結果をディメンション(グルーピング軸)やメトリクス(集計値)、フィルタといった要素で構造化して、データ加工用のSQLを生成します。

構成要素	SQLでの対応	役割
ディメンション	`GROUP BY` 句	データを切り分ける軸
メトリクス	`SUM()` などの集計関数	集計対象となる数値
フィルタ	`WHERE` 句	集計対象とするデータを絞り込む条件

「カテゴリ別の売上合計を棒グラフで表示する」場合、category カラムをディメンション、sales カラムをメトリクス(集計関数 SUM)として指定し、次のようなSQLが生成されます。

sql

SELECT category, SUM(sales) AS sales_sum
FROM ...
GROUP BY category

各要素は、チャートの種類によって指定可能な数や、役割(X軸・凡例・サイズ)などが異なりますが、例を挙げると以下のようになります。

ディメンション: 棒グラフのX軸、円グラフのラベル、地図チャートの緯度経度など
メトリクス: 棒グラフの棒の高さ、円グラフの値、ビッグナンバーの主要指標など
フィルタ: 棒グラフで特定のカテゴリのみを表示するための条件など

チャート設定の構造

チャート設定は、次の ChartSettings 型で表現されます
- 通常はコードブロック内にYAML形式で記述します
- template_type により、チャートの種類を指定します
- component_settings には、データモデリングの設定や、チャートの描画に関する設定を指定します
  - WhereFilter にはデータの絞り込みの条件を指定します
  - TemplateComponentSettings は、チャートの種類により異なります
- display_settings は省略可能な、チャートの表示に関する詳細設定を指定します
  - TemplateDisplaySettings は、チャートの種類により異なります

type ComponentSettingsCommon = {
  name?: string;  // チャートの名前を指定
  filter?: WhereFilter;
  disable_inmemory_processing?: boolean;  // インメモリ処理を無効化する場合は true を指定
  enable_auto_dispatch?: boolean;  // チャートの編集画面で自動的にクエリを実行しても良い場合は true を指定
};

type ChartSettings = {
  template_type: TemplateType;
  component_settings: ComponentSettingsCommon & TemplateComponentSettings;
  display_settings?: TemplateDisplaySettings;
};

チャートの種類

以下のチャートが template_type により指定できます。

ビッグナンバー

単一指標の表示に利用
- 主要指標（必須メトリクス）と補助指標（任意メトリクス）が指定可能
ゲージチャートの表示も可能
- ゲージチャートは、主要指標を分子、補助指標を分母に描画

XYチャート

次の単体もしくは複合チャートを描画
- 折れ線
- 棒
- 積み上げ棒
- 面
- 積み上げ面
- 100%積み上げ棒
- 散布図
- バブル
- 100%積み上げ面
X軸に指定したディメンションに対して、Y軸に指定したメトリクスを集計して描画

円形チャート

円グラフ、ドーナツ、レーダーのいずれかを描画
ラベルのディメンションに対して、値のメトリクスを集計して描画

XYZチャート

散布図、バブル、ヒートマップのいずれかを描画
X軸とY軸にディメンションを指定し、Z軸にメトリクスを指定して描画
- Y軸がディメンションである点が XY_CHART_V2 との違い

階層チャート

ツリー、ツリーマップ、サンバースト、棒グラフ（ドリルダウン）のいずれかを描画
階層（1つ以上のディメンション）に対して、値のメトリクスを集計して描画

グラフ

グラフ（ネットワーク図）とサンキーのいずれかを描画
ソース・ターゲット（いずれもディメンション）に対して、重み（メトリクス）を集計して描画

ファネルチャート

ラベル（ディメンション）に対して、値（メトリクス）を集計して描画

ウォーターフォールチャート

ラベル（ディメンション）に対して、値（メトリクス）の増減を積み上げて描画

テーブル

データを表形式で描画
データ加工の有無により、以下の2種類があります
- ローデータ（ローテーブル）: データソースのクエリ実行結果をそのまま描画
- 集計データ（集計テーブル）: データソースをグループ化の集計をして描画

ピボットテーブル

行・列（いずれもディメンション）に対して、値（メトリクス）を集計して描画
行・列のいずれも指定し、インメモリ加工ではない場合、行と列はそれぞれ最大30個までに制限されます
- 30個に含まれない項目は Others として集計される（1000 > 31 ✕ 31 = 961 の制限）

テキストパネル

データ加工は行わず、指定したカラムの最初の値をテキスト（文章）として表示
- 生成AI等と併用して、サマリ文章の表示等への利用を想定
テキストをマークダウンとして解釈して描画するか、そのまま表示するか選択可能

地図チャート

データ形式に応じて、以下のいずれかの地図チャートを描画
- 緯度・経度
  - ピンマップ
  - バブル
  - ヒートマップ
  - フロー（ソースとターゲットの2組が必要）
- ジオハッシュ
  - ピンマップ
  - バブル
  - ヒートマップ
  - フロー（ソースとターゲットの2組が必要）
- ジオコード
  - エリア（コロプレスマップ）
- GeoJSON
  - ポリゴン
  - ポリライン

ワードクラウド

ワード（ディメンション）に対して、値（メトリクス）を集計して描画

チャート設定 ​

概要 ​

基本動作 ​

チャートのデータモデリング ​

チャート設定の構造 ​

チャートの種類 ​

チャート設定

概要

基本動作

チャートのデータモデリング

チャート設定の構造

チャートの種類