:::

讓使用者篩選資料!在Pentaho中建立互動式儀表板 / How to Create an Interactive Dashboard in Pentaho

11月 10, 2016 0 Comments Edit Post

image

繼我在前一篇介紹在Pentaho製作簡易儀表版之後,這篇要製作的是可供使用者自己篩選資料的可互動儀表板。除了原本在儀表板中使用的Layout、Component (Chart)、Datasource概念之外,在這裡還會用到Component中的Select跟Parameter。這個概念有點複雜,請仔細觀看怎麼操作喔。


繼續編輯之前製作的儀表板 / Edit Exist Dashboard

我們這篇所有的操作都是繼承前一篇「商業智慧入門!在Pentaho中建立簡單的儀表板」最後的進度,這篇會連結的練習資料庫同前一篇一樣。如果你沒經過前一篇的步驟建立儀表板的話,那我建議你先回頭去看前一篇怎麼操作。

接下來我先說明如何開啟前一篇建立的儀表板:

image

在Home 主畫面中進入「Browse Files」。

image

根據之前儲存的路徑,依序 1. 在Folders 開啟資料夾; 2. 在中間Files選擇之前建立的、有(CDE)圖示的儀表板檔案;3. 在右邊File Actions選擇「Edit」。

image

ok,讓我們繼續編輯儀表板吧。


互動式儀表板架構 / Interactive Dashboard Architecture

本篇建立可互動的儀表板分成兩大部分。

image

第一部分基於前一篇的儀表板運作模式之上,我們這次再加入右上角Component中的Simple Parameter,命名為component_p_user_id,而datasource_db的SQL查詢中就會以這個component_p_user_id搭配where指令過濾查詢結果。

image

第二部分再加上Component的Select下拉式選單,以這個下拉式選單來設定Parameter。在這之中我們還需要用到Listener機制,讓Parameter更新的時候儀表板可以立即重新繪製長條圖。

雖然看起來好像有點複雜,但只要掌握這兩個技巧,我們就可以作出任何互動式的儀表板了。以下就一一介紹如何操作吧。


第一階段:加入參數 / Stage 1. Component: Simple Parameter

以下我們就先從新增Parameter開始吧。

1. 在Components Panel設定Parameter / Create Parameter in Components Panel

image

參考上圖進行以下操作:

  1. 切換到Component Panel
  2. 在左邊的Generic中找到Simple Parameter,點選新增物件
  3. 在中間的Components中點選剛剛新增的物件Simple Paramter
  4. 在右邊Properties設定 Name 為「component_p_user_id
  5. 設定Property value 為「1」,這代表這個參數的預設值

image

接下來我們要把component_p_user_id傳到長條圖中。請參考上圖進行以下操作:

  1. 在中間的Components找到之前設定的CCC Bar Chart長條圖物件,點選它
  2. 在右邊的Properties裡面設定 Listeners 為「component_p_user_id」,表示該變數有變動時,就立即更新圖表
  3. 點選Parameters 參數設定,開啟以下對話視窗:

image

在Arg跟Value中都輸入Parameter的名稱「component_p_user_id」,然後按下上面的「Ok」,回到編輯畫面。

2. 在Datasources Panel設定Parameter / Setup Parameter in Datasources Panel

接下來我們要把component_p_user_id傳到datasource_db中。

image

請參考上圖,進行以下操作:

  1. 切換到Datasources Panel
  2. 在中間的Datasources找到之前建立的sql over sqljndi,點選它
  3. 在右邊的Properties 設定 Parameter參數,點選的時候會跳出以下對話視窗:

image

把Name跟Value都設定為Parameter的名稱「component_p_user_id」,然後資料形態Type選擇Integer。資料形態的設定會影響到待會的SQL查詢。按下Ok回到Datasources Panel。

image

4. 再到Query點選右邊的「…」開啟SQL語法編輯對話視窗。

image

這次我們的SQL語法加入Parameter參數,跟SQL的Where指令一起搭配使用,以此達到資料篩選的目的。在SQL語法中要使用Parameter參數「component_p_user_id」的時候,要改寫成「${component_p_user_id}」。因此SQL語法變更如下:

select user_id, score from grade where user_id = ${component_p_user_id}

按下「Ok」按鈕完成設定,回到Datasources Panel。

3. 預覽結果 / Preview Dashboard

2016-11-10_015659

這時候會發現長條圖只顯示user_id編號1的成績資料,表示Parameter的確傳送到SQL指令上了。

image

接著我們在Components Panel修改component_p_user_id的Property value為「2」。

image

再次預覽儀表板,會發現這次長條圖改顯示user_id為2的成績資料。

至此為止,第一階段就算是完成了。


第二階段:加入下拉式選單 / Stage 2. Select Component

前一個階段我們知道可以藉由設定Parameter的預設值來變更SQL查詢的結果,這個階段我們就以下拉式選單來設定Parameter吧。

1. 在Components Panel新增下拉式選單 / Add Select Component in Components Panel

image

請參考上圖進行以下操作:

  1. 切換到Component Panel
  2. 在左邊的Selects找到Select Component,點選新增物件
  3. 在中間的Components點選剛剛新增的Select Component
  4. 在右邊的Properties設定各項屬性,Name 設定為「component_select」
  5. Parameter設定為「component_p_user_id」,這就是指定下拉式選單會影響的Parameter
  6. Listeners 選擇 「component_p_user_id」,這樣就能夠綁定component_p_user_id跟這個下拉式選單,確保兩者資料一致
  7. HtmlObject設定為「layout_row

image

再點選Values array設定,開啟Parameters對話視窗。

2016-11-10_020405

這就是下拉式選單的選單資料設定。Arg表示要設定到component_p_user_id的值,Value則是顯示在下拉式選單的文字。在此我們先簡單設定,Arg跟Value都先設定一樣的資料吧。先使用上面的「Add」按鈕將資料列增加到三列,然後如上圖一樣輸入1、2、3的三個選項資料。確定之後按下Ok回到Components Panel編輯畫面。

2. 預覽儀表板 / Preview Dashboard

接下來預覽儀表板看看。

image

儀表板左下角出現了下拉式選單,裡面有三個選項,就是剛剛在Values array的設定。因為component_p_user_id預設值為2,所以下拉式選單一開始是選擇2。

image

讓我們在下拉式選單選擇選項「1」看看,會發現長條圖也跟著變更為查詢user_id=1的資料了。

確認操作正常之後,關閉預覽,按下「Save」儲存你儀表板吧。至此互動式儀表板就算大功告成了。


結語 / Conclusion

這邊介紹了如何使用Parameter跟Select下拉式選單來製作互動式的儀表板。雖然最後製作出來的儀表板看起來很簡陋,但是眼尖的讀者應該已經發現到Pentaho有著大量的選單元件,除了本篇介紹的下拉式選單之外,還有文字輸入(Textinput)、勾選表單(Check)、單選表單(Radiobutton)、日期輸入(Date input)、日期範圍選擇(Date range input)等等相當多種的輸入元件。

image

此外,我們也可以使用Component中 Others / Table Component來快速建立像上面這樣的查詢表格。這個功能令人驚訝的強大!

再搭配Layout Panel裡可以Add Resource / Css (Javascript) / Code Snippet這項操作讓我們加入需要的CSS或JavaScript,這就已經跟製作一般網頁沒什麼不同了。至此為止,我想聰明的您已經可以想到要怎麼組合千變萬化的儀表板了吧。快發揮你的創意,一起來用Pentaho作出漂亮的儀表板吧!

0 意見:

留言工具: