【ThoughtSpotチャートシリーズ】MuzeStudioでConsole.logを使って項目名を確認する

2025年9月2日 2025年9月1日 6分

AkimasaKajitani

ThoughtSpotのMuzeStudioでConsole.logを使って項目名を確認する

AkimasaKajitaniです。

Muze Studio内のフィールド名と検索トークンの名称とを一致させる時に、「あれ？うまくいかない」ということはないでしょうか？UIを英語にしていると、合計をTotalなどと書いてくれるので少し改善するのですが、それでも日付とかの書き方はMuze Studioで呼び出すときと異なるので困ることがあります。

例えば、以下のように検索しているとします。

これを「グラフを編集」オプションで確認すると、以下のようになっています。

日本語のUIだと、すでに検索トークンと項目名が一致しないですよね・・・。UIを英語版にしていても以下のようになります。

さて、これをMuze Studioのコードに落としていく時に、「月単位オーダー日」をどのように入れていけばよいのでしょうか？デフォルトだと以下のようなコードになっていて、「合計利益」はおそらく「Total 利益」と類推できますが、「月単位オーダー日」などがよくわかりません。

const { muze, getDataFromSearchQuery } = viz;
  
const data = getDataFromSearchQuery();

muze.canvas()
.rows(["Total 売上"])
.columns(["カテゴリ"])
.data(data)
.mount("#chart")

Console.log

このような時にConsole.logが使えます！

Muze Studioの初期コードは、データを「data」としているので、これを使います。つまり、以下のようなコードを追加します。

console.log('data', data.getData());

これを追加すると、以下のようなコードになります（const data のところでdataという変数に検索結果が入るようになっているため、このdataの変数の名前が変わっている場合は、その変数の名前に合わせてください）。

const { muze, getDataFromSearchQuery } = viz;
  
const data = getDataFromSearchQuery();

muze.canvas()
.rows(["Total 売上"])
.columns(["カテゴリ"])
.data(data)
.mount("#chart")

console.log('data', data.getData());

ただ、これでRunしても何も起きません。この結果を見るには、ブラウザの開発者ツール（Developer Tool）を使います。たいていのブラウザには装備されていますが、Chromeの場合右上の三点メニューから「その他のツール」、「デベロッパーツール」の順にクリックしましょう。

右の方にデベロッパーツールの画面が出てくるので、ここの「コンソール（Console）」タブをクリックします。

この状態でMuze StudioのRunボタンを押して実行しましょう。すると、「data」というのがリストの中に流れてくるのがわかると思います。

これをクリックしてみましょう。

中にdataとschemaがあるので、さらにschemaを開いてみます。

すると、項目名を見ることができます。

あとはここに出てきている項目名の通りMuze Studioに記載すればオッケーです。例えば、以下のように積み上げ棒グラフで推移グラフを書いてみましょう。

const { muze, getDataFromSearchQuery } = viz;
  
const data = getDataFromSearchQuery();

muze.canvas()
.rows(["Total 売上"])
.columns(["Month(オーダー日)"])
.data(data)
.layers([{
    mark :"bar",
    encoding :{
        color:"カテゴリ"
    } 
}])
.mount("#chart")

console.log('data', data.getData());