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.
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.
No comments:
Post a Comment