Wijmo OLAPモジュールを導入すると、Webベースのアプリケーションに高速なHTML5ピボットチャートとピボットテーブルを実装できます。Excelに似た組み込みUIと強力なデータエンジンを使用して、生データを簡単かつ有意義に分析したり集計することができます。

Wijmo OLAP製品解説シリーズ

ここでは、Wijmo OLAPのさまざまな要素を紹介します。今日は次の項目について説明します。

  • 基本的なアーキテクチャ要素
  • 生データを表示する基本的なビューの構築
  • ライブデータの操作

Wijmo OLAPを選ぶ理由

大量のデータがある場合、情報を単純な項目リストとして見ても、すべての情報の分析は通常困難です。そのような場合は、さまざまな方法でデータを集計したり操作することができるピボットテーブルが役立ちます。Excelには、これを簡単に行える「ピボットテーブル」が用意されています。生データを選択し、[ピボットテーブルの挿入]をクリックし、作成先を選択すると、パネルが表示されます。ここでフィールドをドラッグして、さまざまな方法でデータを集計し、即座に結果を確認できます。これは、Excelの最も強力でよく使用される機能の1つです。

Wijmo OLAPは、HTML5アプリケーション内で同じ機能を提供します。ページにPivotPanelコントロールを追加し、そのdataSourceプロパティを設定することで生データを提供し、PivotGridコントロールやPivotChartコントロールに接続して結果を表示します。

Wijmo OLAPのアーキテクチャ

次の図は、Wijmo OLAPのアーキテクチャを示します。

Wijmo OLAPのアーキテクチャ

Wijmo OLAPのアーキテクチャ

PivotEngineオブジェクト

PivotEngineオブジェクトはWijmo OLAPモジュールの中核です。(itemsSourceプロパティを介して)生データを取り込み、コードで定義されたパラメータ(集計するフィールドとフィールドプロパティのリストを含む)に従ってデータを集計します。PivotEngineオブジェクトはコントロールではなく、ビジュアル表現を持ちません。

PivotPanelコントロール

PivotPanelコントロールは、PivotEngineオブジェクトの設定に使用されるドラッグアンドドロップUIを提供します。ユーザーは、メインフィールドリストにあるフィールドを、行、列、値、およびフィルタを表す4つの「ビュー」リストにドラッグできます。「行」リストと「列」リストのフィールドは、「ディメンション」とも呼ばれます。「値」リストのフィールドは、「メジャー」とも呼ばれます。デフォルトでは、開発者が明示的にエンジンを作成する必要がないように、PivotPanelコントロールが、使用するPivotEngineオブジェクトを内部的に作成します。このコントロールは、engineプロパティを介してエンジンを公開します。

PivotGridコントロール

PivotGridコントロールは、集計データ(ビュー)をグリッドとして表示します。折りたたみ可能な行グループと列グループ、各セルで表されるデータをドリルダウンしてビューを設定するためのカスタムコンテキストメニューを備えています。PivotGridコントロールはFlexGridを拡張しており、グリッドをXLSXファイルにエクスポートする機能やカスタムセルなどの重要な機能を継承します。

PivotChartコントロール

最後に、PivotChartコントロールは、集計データ(ビュー)をチャートとして表示します。ビュー構造の把握に役立つ階層的な軸や、縦棒、横棒、面、折れ線、散布図、円などの多数のチャートタイプを提供します。PivotChartコントロールには、FlexChartFlexPieの2つのコントロールが含まれます。この内部コントロールは、flexChartプロパティとflexPieプロパティを介して公開されます。

生データの取得

次のような質問に回答するためのダッシュボードを構築するとします。

・ 販売した製品の数はどのくらいか。 ・ 最も多くの製品を購入した国はどこか。

データは、次の典型的なデータベース形式でサーバーから取得されるとします。

基本のデータベース構造

基本のデータベース構造

このような質問への回答には、すべてのデータをスキャンして集計するルーチンが必要です。それぞれの製品や国が複数の行にあり、それらの注文のすべてを個別に集計する必要があります。これは比較的容易ですが、何らかのコードを書く必要があります。

もちろん、アプリケーションが完成するとすぐに、ユーザーは次のような別の質問を考えます。

・ 各製品の平均販売数または平均ダウンロード数はどのくらいか。 ・ 各製品の四半期ごとの販売にどのような傾向があるか。 ・ ほかにも思いつく限りの質問…

PivotPanelとPivotGridを使用した例

ここでは、データの集計に必要なコードやユーザーが必要な情報を選択するためのUIを記述する代わりに、Wijmo PivotPanelPivotGridの2つのコントロールを追加するだけです。

次にコードを示します。

<!– PivotPanelコントロールとPivotGridコントロールをホストする要素を追加します –> <div class=”mdl-grid”></div> // PivotPanelコントロールとPivotGridコントロールを作成します var pivotPanel = new wijmo.olap.PivotPanel(‘#pivotPanel’ { itemsSource: myRawData }); var pivotGrid
  = new wijmo.olap.PivotGrid(‘#pivotGrid’, { itemsSource: pivotPanel }); 

ユーザーは、Excelと同様にドラッグアンドドロップを使用して、必要なビューを構築できます。前に挙げた質問に基づいて、以下にいくつかの例を示します。

課題:販売した製品の数はどのくらいか

解決策:[Product]フィールドを[行]パネルにドラッグし、[Sales]フィールドを[値]パネルにドラッグします。

販売した製品の数

販売した製品の数

データがランダムに生成されているため、ここでははっきりした傾向がわかりません。この場合は、すべての製品の販売数が酷似しています。

課題:最も多くの製品を購入した国はどこか

解決策:[Country]フィールドを[行]パネルにドラッグし、[Sales]フィールドを[値]パネルにドラッグし、グリッドヘッダーをクリックして結果を降順にソートします。

国別にグループ化された販売数

国別にグループ化された販売数

データのソートが極めて容易であることに注目してください。通常のフラットデータグリッドと同様に、グリッドヘッダーをクリックするだけです。

課題:各国の平均販売数または平均ダウンロード数はどのくらいか

解決策:[Country]フィールドを[行]パネルにドラッグし、[Sales]フィールドと[Downloads]フィールドを[値]パネルにドラッグしてから、[Sales]フィールドと[Downloads]フィールドを右クリックし、[集計]プロパティを[平均]に設定します。

国別の平均ダウンロード数または販売数

国別の平均ダウンロード数または販売数

Excelと同様に、すべてのフィールドをビューリストにドラッグする必要はありません。フィールド名の横にあるチェックボックスを使用すると、一度のクリックでビューにフィールドを追加または削除できます。

PivotPanelで、各フィールドの横に使用されている集計のタイプが表示されていることに注目してください(この場合は「Avg」)。

課題:各製品の四半期ごとの販売にどのような傾向があるか

解決策:[Product]フィールドを[列]にドラッグし、[Date]フィールドを[行]パネルにドラッグし、[Sales]フィールドを[値]パネルにドラッグします。次に、[Date]フィールドを右クリックし、[書式設定]プロパティを[四半期(yyyy “Q”q)]に設定し、[Sales]フィールドの[表示方法]プロパティを[前の行との差の割合]に設定します。

製品別の四半期販売傾向

製品別の四半期販売傾向

[Date]フィールドの表示に使用される書式設定がグループ化と集計の処理にどのように影響しているかに注目してください。この場合、データは四半期ごとに集計されています。

データがランダムに生成されているため、この例にははっきりした傾向が見られません。

ライブデータの使用

Wijmo OLAPコントロールによって作成されるビューは動的です。PivotPanelitemsSourceプロパティは、いつでもフィルタ処理、ソート、変更、リフレッシュが可能なCollectionViewです。変更があるたびに、ビューが自動的に再生成されます。

これにより、動的なダッシュボードを簡単に作成できます。itemsSourceとして使用されているCollectionViewに最新のデータをロードするだけで、すべてのPivotGridコントロールとPivotChartコントロールが自動的に更新されます。