--- title: 【Sisense Plugin】Accordionで他ダッシュボードのチャートを表示 description: 今回はプラグインAccordionを紹介します。他ダッシュボードの情報を読み込むことができ、省スペースが可能になります。 image: https://knowledge.insight-lab.co.jp/hubfs/%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202020-09-01%20114909.png --- ![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png) ![INSIGHT LAB_文字のみ](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png?width=400&height=110&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF.png) [![お問い合わせ](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/a4a0266e-14ad-4388-b83f-681a6f35b8a7) - [Sisenseとは](https://service.insight-lab.co.jp/sisense) - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [トレーニング](https://service.insight-lab.co.jp/data-analytics-dojo/training_course) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) ###### 2 分で読むことができます。 # [【Sisense Plugin】Accordionで他ダッシュボードのチャートを表示](https://knowledge.insight-lab.co.jp/sisense/plug-in/accordion) 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 更新日時 2020年10月16日 ###### Topics: [Plugin](https://knowledge.insight-lab.co.jp/sisense/tag/plugin) ![【Plug-in】Accordionで他ダッシュボードのチャートを表示](https://knowledge.insight-lab.co.jp/hubfs/%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202020-09-01%20114909.png) 目次 こんにちは！Michaelです。 本日はAccordionというプラグインを紹介しようと思います。ダッシュボード内に他のダッシュボードを表示させることができる便利なプラグインです。 ## プラグインでできること Accordionはインディケータをクリックすることで、他のダッシュボードに配置した全チャートを表示します。 使用用途としては、例として「全体を網羅するダッシュボード」と「より詳細を見るダッシュボード」の２つがあったとします。 本来は別々の２つのダッシュボードを開けて見る必要があるものも、Accordionを使えば、「詳細ダッシュボード」の方を「全体ダッシュボード」に包括して、１つのダッシュボード上に全ての情報を表現できるわけです！ 省スペース可できるところが魅力ですね！ 百聞は一見にしかずということで言葉だけでもイメージが沸きづらいと思うので、まずはこの動画を見てください。   インジケータをクリックすることで、そのインディケータに関わるチャートが表示される仕様になっています。これは実は、他にダッシュボードを作り、呼び込んでいるわけです。 ## インストール方法 ①SisenseのマーケットプレイスからAccordionのプラグインにアクセスして、プラグインをダウンロードします。 ![accordtion_download](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/accordtion_download.png?width=820&name=accordtion_download.png)  ②ダウンロードしたものを、Sisenseがダウンロードしてあるサーバーの以下のパスに置きます。 プラグインの配置場所：C:\\Program Files\\Sisense\\app\\plugins ③サーバーをリスタートします。 次にプラグインのセットアップをしていきましょう。   ## インジケータの作成 トリガーさせるインジケータのダッシュボードとAccordionで呼び出すダッシュボードを作成する必要があります。 今回はいつもの通り、Foodmartのデモデータを使いました。「売上金額」、「売上数量」、「粗利」の3つのインディケータを作成、それぞれのインディケータをクリックするとそのKPIに対する詳細を見れるという仕様にしましょう。4枚分のダッシュボードを１つにまとめるわけです！   ## 表示させるサブダッシュボードの準備 次に、上記のダッシュボード側で表示させる別ダッシュボードを作成します。「売上金額」、「売上数量」、「粗利」の各KPIの詳細が見れるダッシュボードをぞれぞれ1つずつ、 合計3つのダッシュボードを作成していきます。 **ダッシュボードの名前は「\_accrd\_」で始まるように設定する必要があります。** 各ダッシュボードには以下のチャートを作成しました。 ``` ・時系列トレンド ・売上都道府県内訳 ・商品分類内訳 ``` 完成したダッシュボードがこちら。写真は売上金額のものですが、他のKPIについても同様に作成していきます。 ![コメント 2020-09-01 115337](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202020-09-01%20115337.png?width=820&name=%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202020-09-01%20115337.png) **サブダッシュボードの名前を\_accrd\_で始まるようにするのをお忘れなく！** ![コメント 2020-09-01 115317](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202020-09-01%20115317.png?width=222&name=%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202020-09-01%20115317.png)   ## トリガーの設定 次にAccordionのプラグインを設定していきます。 クリックで詳細を表示させたいKPIのウィジェット編集画面に入ります。 （「インディケータの作成」の項で作成したインディケータのこと）スクリプト編集画面に行き、以下のコードを貼り付けます。 ``` widget.on('ready', function(se, ev){ Accordion({ element: element, widget: widget, dashboard: dashboard, //filters: ['[Table_Name.Column_Name]'], default: false, dashboardUrl: 'https:〇〇〇', widgetFiltersInheritance: true }); }) ``` 必要項目を説明していきます。 ``` //filters:　デフォルトではオフ。「//」のコメントアウトを外し、テーブル名とカラム名を指定することにより、 　　　　　　 サブダッシュボードに適用されるフィルターを指定できます。 例）example: filters: [“[Dates.Date (Calendar)]”, ”[Product.Name]”,”[Employee.Name]”], default: 初期表示をON(true)かOFF(false)にする設定 dashboardUrl:「クリックをして実際に表示させたいサブダッシュボード」のURLをここに入力します。 ``` 必要箇所を入力してセーブします。ウィジェット編集画面で\[ctrl\] + \[R\]を押して、Google Chromeの画面をリフレッシュするとJavascriptがウィジェットに反映されます。 ダッシュボード画面に戻ります。同様に、他のインジケータにも設定を行います。   ## 出来上がったもの こちらが最終的に完成したものです。 ４つのダッシュボードの情報を1つダッシュボード内で切り替え表示できるので省スペース！ TabberやSwitchable Dimensionと組み合わせたら、よりさらに流動的なダッシュボードが作れますね！ なお、Accordionは**インジケータにのみに実装可能。**クリック時に他ダッシュボードを読み込みに行く仕組みなので、親ダッシュボードの初期読み込み時間には大きな影響はありません（⇔Tabberでは全て最初に読み込み、表示を切り替えています） ## まとめ 今回は、Accordionでインジケータをクリックして、他のダッシュボードを表示しました。 ぜひトライしてみてください！ それではまた！Viva, Sisense!! Sisenseを体験してみませんか？ INSIGHT LABではSisense紹介セミナーを定期開催しています。Sisenseの製品紹介や他BI製品との比較だけでなく、デモンストレーションを通してSisenseのシンプルな操作性やプレゼンテーション機能を体感いただけます。 [![詳細はこちら](https://hubspot-no-cache-na2-prod.s3.amazonaws.com/cta/default/5935783/ff8d86bf-1184-4d92-8926-6a31a20de4b0.png)](https://hubspot-cta-redirect-na2-prod.s3.amazonaws.com/cta/redirect/5935783/ff8d86bf-1184-4d92-8926-6a31a20de4b0) - [Tweet](https://twitter.com/share) ![Turtle](https://knowledge.insight-lab.co.jp/hubfs/Sunflower.jpg) #### 執筆者 [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle) 可視化領域を中心とした業務に従事しています。 ###### [前の投稿](https://knowledge.insight-lab.co.jp/sisense/widget/widget_introduction5) [![【Widget】Sisense 標準ウィジェットを一挙大紹介 - その5](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/6e54101390cddb2bdff052c8f04c60a3-2.png)](https://knowledge.insight-lab.co.jp/sisense/widget/widget_introduction5) ###### [【Sisense Widget】標準ウィジェットを一挙大紹介 - その5](https://knowledge.insight-lab.co.jp/sisense/widget/widget_introduction5) ###### [次の投稿](https://knowledge.insight-lab.co.jp/sisense/data-modeling/connector/zoom_cdata_api) [![【Connector】Zoom APIを使ってSisenseからCData API Driverで接続してみた](https://knowledge.insight-lab.co.jp/hubfs/Imported_Blog_Media/07_zoom_marketplace-1024x306-2.png)](https://knowledge.insight-lab.co.jp/sisense/data-modeling/connector/zoom_cdata_api) ###### [【Sisense Connector】Zoom APIを使ってSisenseからCData API Driverで接続してみた](https://knowledge.insight-lab.co.jp/sisense/data-modeling/connector/zoom_cdata_api) RECOMMEND こちらの記事も人気です。 ###### 4 分で読むことができます。 #### [【Sisense Administaration】無料のSSL証明書"Let's Encrypt"でSSL化してみる](https://knowledge.insight-lab.co.jp/sisense/administration/ssl_lets_encrypt) ###### 2020年 10月 16日 ###### 8 分で読むことができます。 #### [【API連携】Spotify音楽データの分析①【Sisense】](https://knowledge.insight-lab.co.jp/sisense/information/spotify_music_data_1) ###### 2020年 10月 16日 ###### 2 分で読むことができます。 #### [【Sisense Widget】折れ線グラフを階段状に表示する](https://knowledge.insight-lab.co.jp/sisense/widget/step_line_chart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】Radar Chartを使ってポケモンの種族値を表示してみた](https://knowledge.insight-lab.co.jp/sisense/widget/radarchart) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Formula】CASE関数を使って条件分岐する](https://knowledge.insight-lab.co.jp/sisense/formula/case) ###### 2020年 10月 16日 ###### 3 分で読むことができます。 #### [【Sisense Widget】折れ線グラフにおける欠落値の対処法](https://knowledge.insight-lab.co.jp/sisense/widget/line-graph) ###### 2020年 10月 16日 ##### 運営会社 運営会社 - [会社概要](https://www.insight-lab.co.jp/about/company.html) - [お問い合わせ](https://contact.insight-lab.co.jp/main) ##### メニュー メニュー - Sisenseとは - [Sisenseナレッジ](https://knowledge.insight-lab.co.jp/sisense) - [セミナー](https://event.insight-lab.co.jp/sisense-seminar) - [お役立ち資料](https://download.insight-lab.co.jp/sisense/download) [![INSIGHT LAB_文字のみ_WHT-1](https://knowledge.insight-lab.co.jp/hs-fs/hubfs/INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png?width=200&height=55&name=INSIGHT%20LAB_%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF_WHT-1.png "INSIGHT LAB_文字のみ_WHT-1")](https://www.insight-lab.co.jp/) - [プライバシーポリシー](https://www.insight-lab.co.jp/privacy.html) Copyright © 2020 INSIGHT LAB, Inc. ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://5935783.fs1.hubspotusercontent-na2.net/hubfs/5935783/SISENSE/MP4/ezgif.com-gif-maker.mp4", "dateModified" : "2022-05-26T20:34:22.650Z", "duration" : "PT17S", "height" : 758, "name" : "ezgif.com-gif-maker", "thumbnailUrl" : "https://api-na2.hubspot.com/filemanager/api/v3/files/thumbnail-redirect/35824026866?portalId=5935783&size=medium", "uploadDate" : "2020-10-08T08:15:02.847Z", "width" : 1350 } ```