はじめに

MotionBoardでのチャートとデータソース定義

「データソース定義」とは、チャートや明細表アイテムに、どのようにデータを表示するのかを定義した設定のことです。

データソース定義は、基本的にチャートに対して1対1で作成を行う必要があります。
※MotionBoardの機能を使いこなすと1対1で作成しなくてもよいケースもあります。それについては「応用編」にて解説します。

それでは、データソース定義の役割について、チャートの作成シーンと交えながら紹介します。

データソース定義を作成してチャートを配置してみる

ある企業における「売上分析のデータ」を可視化するダッシュボードの作成シーンを想定して、実際の画面を操作しながらデータソース定義を作成し、チャートを配置していきます。

[チャート]アイコンをクリックして画面上が赤くなっていることを確認して選択、[チャート設定]にて名称を「年度-大分類金額」とし、[新規作成]をクリックします。

データソース定義名は「売上データDS」としましょう。
今回は売上実績のダミーデータ1万件の「売上実績_1万件.csv」を読み込んで、データソース定義を作成します。

[データソースエディタ]で、行項目に「年度」、列項目に「大分類名称」、集計項目に「売上金額」を配置します。
チャートは[縦棒]を選択し、[OK]をクリックの後、[チャート新規作成]画面でも[OK]をクリックします。

当設定にて年度、大分類ごとの売上金額の棒チャートが配置されました。

これまでの操作をおさらいすると、データソース定義とチャートは以下のとおり1対1となっています。

同じデータソースを使って別チャートを配置してみる

同じ画面の右側に、同様の「売上実績_1万件.csv」をデータソースとして読み込んだ円チャートを配置します。ここで、やってしまいがちな操作を行います。

[チャート]アイコンをクリックし、チャート名は「中分類内訳」とします。

データソースは同じcsvデータを使うため、データソース定義名は「売上データDS」 を利用します。チャートは[円]を選択して、[OK]をクリックします。

画面上に円チャートが表示されましたが、同心円上に何層にも円が生成され、思ったような形で表現されていないかと思います。

当操作ではデータソース定義を変更していないので、この影響かもしれません。改めて円チャートをクリックして、[データソース編集]を選択します。

[編集]ボタンをクリックします。

行項目を空、列項目を「中分類名称」、集計項目は「売上金額」となるように設定します。チャートは[円]を選択します。設定したら[OK]をクリックします。

画面上に、設定した円チャートが表示されました。
一方で、画面左へ配置した縦棒チャートを見ると、年度ごとに表示されていたはずが、少し変わってしまっています。

今度は最初に配置したチャート設定を変えてしまったようです。

この操作における問題は、データソース定義として「売上データDS」を選択していたことです。棒チャート用のデータソース定義「売上データDS」を利用し、円チャートの表示や[編集]ボタンからデータソース定義の項目設定を変更しています。

冒頭のデータソース定義をおさらいすると、データソース定義は基本的にチャートに対して1対1で作成する必要があります。
今回は1つのデータソース定義に対して、2つのチャートを表現しているので、この前提とは異なる設定を行ったことになります。

データソース定義を別にして作成してみる

では、どうすればこの問題を解決できるでしょうか。

結論としては、最初に棒チャートを作成した際のデータソース定義とは別に、もう1つデータソース定義を作成し、各チャートごとに、今回であれば2チャートに対して計2つのデータソース定義を作成する必要があります。

現在の状況では、後から配置した円チャートは望んだ表現となっているため、棒チャートを再度作成します。

棒チャートをクリックし、アイテムを削除します。
※この操作で、棒チャートは削除されても、データソース定義は削除されません

では、改めて棒チャートを配置しましょう。
[チャート]アイコンをクリックし、空いた領域を選択します。

チャートの名称を「年度-大分類金額」と入力します。
[新規作成]のボタンをクリックし、データソース定義の名称は「年度-大分類金額DS」とします。

後は先ほどと同様です。データソースエディタで行項目に「年度」、列項目に「大分類名称」、集計項目に「売上金額」を配置します。チャートは[縦棒]を選択します。設定したら[OK]をクリックします。

データソースを分けて棒チャートを配置すると、今回は棒チャートと折れ線チャートでそれぞれ望んだ表現になりました。

このように「データソース定義」は、「チャートや明細表アイテム等に、どのようにデータを表示するのかを定義した設定」となるため、アイテムごとに作成する必要があります。

応用編

逆に、どのようにデータを表現するか(=データソースエディタ画面の設定)が同一で、別表現のチャートを作成したいのであれば、データソース定義は1つのまま、複数の表現を行うことができます。

たとえば以下の例では、1つのデータソース定義から、売上分析のチャートを縦棒と集計表でそれぞれ表示しています。同じ項目を利用したデータを、MotionBoardの多彩な表現で複数のチャートを作成できます。

またMotionBoardでは、1つのデータソース定義の中に、チャート、明細表、ガントの3つの定義を設定することができます。
以下のような、製造業様における設備の稼働状況を可視化したダッシュボードは、1つのデータソース定義のみで作成が可能です。

このテクニックを使う主なメリットは、データソースに対してのアクセスを必要最小限に抑えることですが、慣れるまでは1アイテム1データソース定義で設定するのが望ましいです。

データソースの読み込みを最小限にして、表示速度を改善したい場合は、以下の記事を参考にしてみてください。

作成済みデータセットを活用してMotionBoardの表示速度を改善しよう

🕒️2025/7/3

MotionBoardを利用していると、データソースの読み込み速度がボードの表示速度に大きく影響することがあります。特にたくさんのアイテムを配置する場合、ボードのパフォーマンスを最適化することは非常に重要です。本記事では、作成済みデータセットを活用することで、ボードの表示速度を向上させる方法について解説します。作成済みデータセットとは作成済みデータセットは、事前に定義されたデータセットを利用することで、データソースへのアクセス回数を減らし、ボード表示時の負荷を軽減する仕組みです。通常のデータソース定義と...

WingArc TECH BLOG

まとめ

今回はデータソース定義をチャートに対して、1対1で作成する理由について具体例を交えながら記載していきました。
ボード作成の際には、各アイテムがどのデータソース定義と紐づいているか意識しながら作成すると、望んだ形のボードがより簡単に作成できます。
ぜひご活用ください。