Pentaho Tools :

Pentaho C-Tools(CDE,CDF,CDA),Pentaho CE & EE Server,OLAP-Cubes,Analysis using Pivot4J, Saiku Analytics, Saiku Reporting, Ad-hoc Reporting using Interactive Reporting Tool,Dashboards,Reports using PRD, PDD,Data Integration using Kettle ETL,Data Mining usign WEKA,Integration of Servers with Databases,Mobile/iPad compatible Dashboards using Bootstrap Css,Drilldown dashboards,Interactive Dashboards

Thursday, 5 June 2014

Popup Component Example in pentaho CDE - Popup on Pie & in the popup showing bar chart or any other CDE component

Popup Component Example in pentaho CDE

Hi Guys,

This post will talk about the popup component usage, tips & tricks included in it to make it work properly.

As a developer point of view this popup component is suitable on line charts or area charts  or dot/bubble charts but can also implement on any component like button, pie chart, bar chart and etc.

This post is a replica of already available example in CDE reference in the BA server. Just worked out with a pie chart pop up component, with parameters and would like to share the procedure.

Software Set up :
BA Server 5.0.1 stable, C-Tools of Trunk version & foodmart database of postgresql(formally jasper server postgresql).

Who can benefit using this functionality ?

The end user may not want vertical scroll down for detailed chart report /information report  & also doesn't want drill down. In that case we can make use of this popup component to meet your client requirement.

Thank you Pentaho & web details for the awesome feature in Pentaho .....


Few points from Pedro's blog post & material

Popup Component Reference

1. You can create standard layout element & place it inside a popup.
2. All the generic interaction rules can be applied on popup component.
3. Any html component(button) & any component(charts, images, table cell)  from CDE can be used for binding the popup.

Following Pedro's 3 steps Rules the example is explained below.
3 steps are
Defining the content that will appear on the popup
Configure popup component
Call the popup

Example Taken in this post:
1) Button Component popup (not explained - Edit the file and observe once you deploy the example given )

2) Chart components popup

Main Chart : Pie Chart
Popup Chart : bar chart

Functionality : On clicking any slice of the pie chart the related information should come in the    bar chart ( like ICC(Inter Chart Communication) & like drill down functionality)
Defining the content that will appear on the popup

1. Define the lay out as you'd normally.
2. When you configure the popup component , the component will be responsible for detaching teh selected elements from the dom and only showing it when the popup is called.

Step 1 & Step 2  in Simple terms :
Develop pie chart & bar chart as you normally do.. Remember as bar chart will come in popup it should have row name ,also bar chart should take parameter in it's sql query ( No need for pie chart sql query b'z on clicking of slice the category name will become the parameter input and that parameter you have to pass for bar chart & before to bar chart you have to pass the same parameter to popup component )

Step 1: Develop Main Chart where you are going to perform click for popup ( pie chart)
a) Take a row and name it as : PieChartDemo
b) Under this row take a column & name it as : PieChart
c) Define a query for populate pie chart ( for example :
i.e., define data source with name : query2_forPieChart

SELECT distinct state_province,sum(store_sales) FROM customer c INNER JOIN region r ON c.customer_region_id=r.region_id
INNER JOIN sales_fact_1997 sf7 ON c.customer_id=sf7.customer_id
group by state_province
order by sum desc

d) Define the pie chart(make it dough nut chart using extension point)
Html object for this is : PieChart ( column name from step b)
Data source : query2_forPieChart
& set height & width and other properties.

Step 2: Develop popup Chart which will appear on clicking of slices of pie chart( formally this is a bar chart in popup)
a) Take a row and name it as : PopUpContent2
b) Under this row take a column & name it as : ChartForPopup2
c) Define a query for populate pie chart ( for example :
i.e., define data source with name : query1_forPopUp

SELECT distinct sales_city,sum(store_sales) FROM customer c INNER JOIN region r ON c.customer_region_id=r.region_id
INNER JOIN sales_fact_1997 sf7 ON c.customer_id=sf7.customer_id
where sales_state_province=${Param1_state}
group by sales_city
order by sum desc
limit 5

d) Define the bar chart
Html object for this is : ChartForPopup2 ( column name from step b)
Data source : query1_forPopUp
& set height & width and other properties.

Step 3: Defining parameters :
Create a parameters :
1) For state selection on click of pie chart slice : Param1_state
2) For color selection of slice : param3_color

Step 4: Define the popup component :
a) Click on components Panel
b) Click on others then click on Popup component & name it as PopUpComp2
c) Html Object :
This plays the main role in popup .
PopUpContent2 is the htmlObject for this popupcomponent( Row name of bar chart)
d) Add parameters & listeners to this component (Param1_state)


Step 5 : Let's back to the chart properties :
Pie Chart:
a) Make pie chart clickable=ture
b) In the click action write below code

function f(e){
  var color = this.pvMark.fillStyle();
  Dashboards.fireChange('Param1_state', e.vars.category.value);
  Dashboards.fireChange('param3_color',color.color);
  alert("you have clicked on"+" "+Param1_state); 
  render_PopUpComp2.popup($(this.event.target));
}

c) No need of adding parameters to the chart component in the properties.

In the above code :
Line 1: slice color will store in color variable
Line 2 : Picking the state name ( category name ) into Param1_state parameter.
Line 3: storing the color code of line one in param3_color parameter.
Line 4 : Testing of state clicked
Line 5 : Popup rendering. PopUpComp2 is the row name(htmlObject name) which you want to show on the popup .

IMP NOTE :
The rendering of popups for CCC2 version charts is slightly changed from the normal behavior in terms of code. It'll take event target.

Bar Chart:
a) set parameters & listeners ( Param1_state & param3_color).
b) In the postFetch area write below code for color filling of bars

 function fun(){
 var selectedColor = Dashboards.getParameterValue("param3_color");
    if(selectedColor) {
        this.chartDefinition.colors = [selectedColor];
    }
 }


Save your dashboard and test it..

Sample output will looks like below images. 






Download Example here :
Click here 
OR
https://drive.google.com/file/d/0BymV_QP4TGBEVGN1d1BGOGtlSXM/edit?usp=sharing


meet me at sadakar.1988@gmail.com for any queries / other workouts / suggestions and any thing related to BI in pentaho & jasper ..


Thank you for reading this post.

Sadakar Pochampalli
BI developer - Pentaho/Jasper/Talend
Hyderabad, Telangana.