複数のピボットテーブルを備えたダッシュボード。ハウツーチュートリアル

要約データと生データを同時に表示するパフォーマンスダッシュボードを作成するタスクがあるとします。

この種の目標を達成するための最良の時間節約方法は何かと疑問に思われるかもしれません。

考えられるアプローチの1つは、集約データでピボットテーブルを配置し、単一ページに生データでグリッドを配置することです。これらの2つのWebコンポーネントは、同じデータとレポートを共有する必要がありますが、詳細レベルは異なります。

Flexmonster API呼び出しのおかげで、信じられないほど簡単に行えます。

このチュートリアルでは、複数のピボットテーブルインスタンスを備えた完全にインタラクティブなダッシュボードを作成するプロセスについて詳しく説明します。データが集約されていないフラットテーブルは、コンパクトピボットテーブルの変更に反応します。

その結果、集約、並べ替え、フィルタリング、ドラッグアンドドロップ、ドリルスルーなどのすぐに使用できる機能を提供する、データの視覚化とWebレポート用のすぐに使用できるツールを入手できます。

始めましょう!

メソッドとイベントについて

次のAPI呼び出しを使用する必要があります。

  • setReport()—このメソッドにより、レポートを動的に、つまり実行時に変更できます。また、以前に保存したレポートをピボットテーブルに読み込むこともできます。
  • reportcomplete —このイベントは、レポートのデータ、ローカライズファイルがピボットテーブルにロードされ、グリッド/チャートがレンダリングされたときにトリガーされます。つまり、ピボットテーブルコンポーネントで作業を開始できることを示しています。
  • reportchange —このイベントは、レポートで何らかの変更が発生すると発生します(フィルタリング、並べ替え、フォーマット、計算メジャーの追加、クエリの実行など)。

ステップ1:Flexmonsterスクリプトを使用したセットアップ

Webページに必要なスクリプトを追加します。

両方のテーブルがレンダリングされるコンテナを追加することを忘れないでください:

ステップ2:コンパクトピボットテーブルを初期化する

このJavaScriptコードを追加して、最初のコンポーネントをインスタンス化します。

ご覧のとおり、データソースへのパスを設定し、スライスを指定しました。これは、グリッドに表示する階層を説明するレポートの一部です。

値に基づいて色でセルを強調表示するために、条件付き書式オブジェクトを定義しました。

ステップ3:フラットグリッドを作成する

フラットテーブルのコード全体は上記のものと似ていますが、ピボットテーブルのフラットビューをオンにするには、オプションで指定する必要があります。

ステップ4:ピボットを相互作用させる

コンパクトテーブルのreportcompleteイベントにイベントハンドラーを接続します。関数定義で、データがロードされたら、コンパクトテーブルから現在のレポートを取得し、そのスライスをフラットテーブルに設定します。

同様に、イベントハンドラーをコンパクトテーブルインスタンスのreportchangeイベントに追加して、レポートの変更をリッスンできるようにします。

ここでは同じロジックが実装されています:

  • コンパクトテーブルからレポートを取得する
  • スライスをフラットテーブルのレポートに設定します。

最終ステップ:結果を楽しんで共有する

CodePenのFlexmonster(@flexmonster)によるペンFlexmonsterピボットテーブル&チャートダッシュボードを参照してください。

概要

今日、Flexmonster API呼び出しの助けを借りて2つのピボットテーブルインスタンスをバインドしてJavaScriptダッシュボードを構築する方法を実際に学びました。

Flexmonsterを使用すると、レポート作成プロセスで洞察力と効果を高めるチャンスがすべて得られます。組織の指標の追跡に自由に使用してください!

便利なリンク

  • ライブデモ
  • Flexmonsterピボットテーブルとチャート
  • その他のFlexmonsterデモ

もともとhttps://codepen.ioで公開されました。