Introduction
In this blog I want to show how to make cells on the grid that may contain chart or text appearing/disappearing by clicking on the checkboxgroup in SAP Lumira. The feature of this solution is that depending on the number of selected items on the checkboxgrup, the relevant cells are displayed and aligned with the center of the page.
VIDEO
Overview
The blog post covers the following steps:
Create the checkboxgroup.
Create grid_layout_1 with 1 row and 11 columns.
Create grid_layout_9 with 1 row and 10 columns
At the “on select” event of the checkboxgroup write the JS code
Create the checkboxgroup.
Put the checkboxgroup and fill it with values and text.
Create grid_layout_1 with 1 row and 11 columns.
Starting from the second cell (0,1) put the panels with texts of fruits. Cells (0,0) and (0,10) leave empty.
Create grid_layout_9 with 1 row and 10 columns.
In grid_layout_9 starting from the second cell(0,1) create the empty panels. Cells (0,0) and (0,9) leave empty.
Make the grid_layout_9 invisible:
Two grid_layouts we need for 2 cases: if there are odd number of selected items on the checkboxgroup, then the grid_layout_1 is visible, the grid_layout_9 is invisible. In case of even number, then the grid_layout_9 is visible, the grid_layout_1 is invisible. This solution help us to lay out the panels with text at the center of the page.
Number
ODD
1
PANEL_8
3
PANEL_7
PANEL_8
PANEL_9
5
PANEL_5
PANEL_7
PANEL_8
PANEL_9
PANEL_10
7
PANEL_4
PANEL_5
PANEL_7
PANEL_8
PANEL_9
PANEL_10
PANEL_11
9
PANEL_6
PANEL_4
PANEL_5
PANEL_7
PANEL_8
PANEL_9
PANEL_10
PANEL_11
PANEL_12
Number
EVEN
2
PANEL_7_1
PANEL_8_1
4
PANEL_5_1
PANEL_7_1
PANEL_8_1
PANEL_9_1
6
PANEL_4_1
PANEL_5_1
PANEL_7_1
PANEL_8_1
PANEL_9_1
PANEL_10_1
8
PANEL_6_1
PANEL_4_1
PANEL_5_1
PANEL_7_1
PANEL_8_1
PANEL_9_1
PANEL_10_1
PANEL_11_1
Put the JS code at the "On Select" event of the checkboxgroup.
First of all make all created panels and texts invisible.
So, if a user selects odd number of items on the checkboxgroup, then grid_layout_1 is set to visible.
When checkboxgroup item is selected, the value of the item is written to the array
arr . After the selection, the event is triggered, the array arr is read from the index 0.
In the table below, you can see the relevance of the array index and the cells with panels on the grid.
GRIDLAYOUT_1
Odd
PANEL_6
PANEL_4
PANEL_5
PANEL_7
PANEL_8
PANEL_9
PANEL_10
PANEL_11
PANEL_12
Array index
7
5
3
1
0
2
4
6
8
GRIDLAYOUT_9
Even
PANEL_6_1
PANEL_4_1
PANEL_5_1
PANEL_7_1
PANEL_8_1
PANEL_9_1
PANEL_10_1
PANEL_11_1
Array index
7
4
2
0
1
3
5
6
Depending on the index (0) the relevant (panel_8) is set to visible, depending which element was written at index 0 the relevant text is moved to that panel. For the element 1 (apple) the text_6 with text “Apple” is moved to panel_8.
For the index (1) the relevant (panel_7) is set to visible, depending which element was written at 1 index the relevant text is moved to that panel. For the element 1 (apple) the text_6 with text “Apple” is moved to panel_7.
Else, if a user selects even number of items on the checkbox, then grid_layout_9 is set to visible.
Depending on the index (0) the relevant (panel_7_1) is set to visible, depending which element was written at index 0 the relevant text is moved to that panel. For the element 1 (apple) the text_6 with text “Apple” is moved to panel_7_1.
For the index (1) the relevant (panel_8_1) is set to visible, depending which element was written at index 1 the relevant text is moved to that panel. For the element 1 (apple) the text_6 with text “Apple” is moved to panel_8_1.
Below in Appendix we can find full JS and CSS code.
Conclusion
Finaly, you can see how to create complex visualizations of dynamicaly appearing/disapearing cell panels by clicking on the checkboxgroup. By using this solution you can create attractive and modern applications. Hope it will be useful for you.
Please, share your opinion in comments and subscribe and follow my account to get similar content.
Also, please like this post.
Find more information about SAP Lumira solutions in blog posts:
SAP Lumira | SAP Blogs
Search for questions and answers :
SAP Lumira | Questions and answers
Explore another posts about SAP Lumira:
SAP Lumira | Other messages
Appendix
PANEL_6.setVisible(false);
PANEL_4.setVisible(false);
PANEL_5.setVisible(false);
PANEL_7.setVisible(false);
PANEL_8.setVisible(false);
PANEL_9.setVisible(false);
PANEL_10.setVisible(false);
PANEL_11.setVisible(false);
PANEL_12.setVisible(false);
PANEL_6_1.setVisible(false);
PANEL_4_1.setVisible(false);
PANEL_5_1.setVisible(false);
PANEL_7_1.setVisible(false);
PANEL_8_1.setVisible(false);
PANEL_9_1.setVisible(false);
PANEL_10_1.setVisible(false);
PANEL_11_1.setVisible(false);
TEXT_6.setVisible(false);
TEXT_7.setVisible(false);
TEXT_8.setVisible(false);
TEXT_9.setVisible(false);
TEXT_11.setVisible(false);
TEXT_14.setVisible(false);
TEXT_15.setVisible(false);
TEXT_16.setVisible(false);
TEXT_17.setVisible(false);
arr =this.getSelectedValues();
var arrlen=arr.length;// read the array lenth
arr.forEach(function(element, index) { //Array begin
if (arrlen ==1 || arrlen ==3 || arrlen ==5 || arrlen ==7 || arrlen ==9 ){// if the array lenth is odd
GRID_LAYOUT_1.setVisible(true);
GRID_LAYOUT_9.setVisible(false);
if (index == 0){// 0 array value
if ( element =="1"){
PANEL_8.moveComponent(TEXT_6);
PANEL_8.setVisible(true);
TEXT_6.setVisible(true);
PANEL_8.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_8.moveComponent(TEXT_7);
PANEL_8.setVisible(true);
TEXT_7.setVisible(true);
PANEL_8.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_8.moveComponent(TEXT_8);
PANEL_8.setVisible(true);
TEXT_8.setVisible(true);
PANEL_8.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_8.moveComponent(TEXT_9);
PANEL_8.setVisible(true);
TEXT_9.setVisible(true);
PANEL_8.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_8.moveComponent(TEXT_11);
PANEL_8.setVisible(true);
TEXT_11.setVisible(true);
PANEL_8.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_8.moveComponent(TEXT_14);
PANEL_8.setVisible(true);
TEXT_14.setVisible(true);
PANEL_8.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_8.moveComponent(TEXT_15);
PANEL_8.setVisible(true);
TEXT_15.setVisible(true);
PANEL_8.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_8.moveComponent(TEXT_16);
PANEL_8.setVisible(true);
TEXT_16.setVisible(true);
PANEL_8.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_8.moveComponent(TEXT_17);
PANEL_8.setVisible(true);
TEXT_17.setVisible(true);
PANEL_8.setCSSClass("CHART_9");
}
} //0 the end of array
else if (index == 1){// 1 array value
if ( element =="1"){
PANEL_7.moveComponent(TEXT_6);
PANEL_7.setVisible(true);
TEXT_6.setVisible(true);
PANEL_7.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_7.moveComponent(TEXT_7);
PANEL_7.setVisible(true);
TEXT_7.setVisible(true);
PANEL_7.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_7.moveComponent(TEXT_8);
PANEL_7.setVisible(true);
TEXT_8.setVisible(true);
PANEL_7.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_7.moveComponent(TEXT_9);
PANEL_7.setVisible(true);
TEXT_9.setVisible(true);
PANEL_7.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_7.moveComponent(TEXT_11);
PANEL_7.setVisible(true);
TEXT_11.setVisible(true);
PANEL_7.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_7.moveComponent(TEXT_14);
PANEL_7.setVisible(true);
TEXT_14.setVisible(true);
PANEL_7.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_7.moveComponent(TEXT_15);
PANEL_7.setVisible(true);
TEXT_15.setVisible(true);
PANEL_7.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_7.moveComponent(TEXT_16);
PANEL_7.setVisible(true);
TEXT_16.setVisible(true);
PANEL_7.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_7.moveComponent(TEXT_17);
PANEL_7.setVisible(true);
TEXT_17.setVisible(true);
PANEL_7.setCSSClass("CHART_9");
}
} //1 end of the array
else if (index == 2){// 2 array value
if ( element =="1"){
PANEL_9.moveComponent(TEXT_6);
PANEL_9.setVisible(true);
TEXT_6.setVisible(true);
PANEL_9.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_9.moveComponent(TEXT_7);
PANEL_9.setVisible(true);
TEXT_7.setVisible(true);
PANEL_9.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_9.moveComponent(TEXT_8);
PANEL_9.setVisible(true);
TEXT_8.setVisible(true);
PANEL_9.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_9.moveComponent(TEXT_9);
PANEL_9.setVisible(true);
TEXT_9.setVisible(true);
PANEL_9.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_9.moveComponent(TEXT_11);
PANEL_9.setVisible(true);
TEXT_11.setVisible(true);
PANEL_9.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_9.moveComponent(TEXT_14);
PANEL_9.setVisible(true);
TEXT_14.setVisible(true);
PANEL_9.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_9.moveComponent(TEXT_15);
PANEL_9.setVisible(true);
TEXT_15.setVisible(true);
PANEL_9.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_9.moveComponent(TEXT_16);
PANEL_9.setVisible(true);
TEXT_16.setVisible(true);
PANEL_9.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_9.moveComponent(TEXT_17);
PANEL_9.setVisible(true);
TEXT_17.setVisible(true);
PANEL_9.setCSSClass("CHART_9");
}
} //2 end of the array
else if (index == 3){// 3 array value
if ( element =="1"){
PANEL_5.moveComponent(TEXT_6);
PANEL_5.setVisible(true);
TEXT_6.setVisible(true);
PANEL_5.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_5.moveComponent(TEXT_7);
PANEL_5.setVisible(true);
TEXT_7.setVisible(true);
PANEL_5.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_5.moveComponent(TEXT_8);
PANEL_5.setVisible(true);
TEXT_8.setVisible(true);
PANEL_5.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_5.moveComponent(TEXT_9);
PANEL_5.setVisible(true);
TEXT_9.setVisible(true);
PANEL_5.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_5.moveComponent(TEXT_11);
PANEL_5.setVisible(true);
TEXT_11.setVisible(true);
PANEL_5.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_5.moveComponent(TEXT_14);
PANEL_5.setVisible(true);
TEXT_14.setVisible(true);
PANEL_5.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_5.moveComponent(TEXT_15);
PANEL_5.setVisible(true);
TEXT_15.setVisible(true);
PANEL_5.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_5.moveComponent(TEXT_16);
PANEL_5.setVisible(true);
TEXT_16.setVisible(true);
PANEL_5.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_5.moveComponent(TEXT_17);
PANEL_5.setVisible(true);
TEXT_17.setVisible(true);
PANEL_5.setCSSClass("CHART_9");
}
} //3 end of the array
else if (index == 4){// 4 array value
if ( element =="1"){
PANEL_10.moveComponent(TEXT_6);
PANEL_10.setVisible(true);
TEXT_6.setVisible(true);
PANEL_10.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_10.moveComponent(TEXT_7);
PANEL_10.setVisible(true);
TEXT_7.setVisible(true);
PANEL_10.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_10.moveComponent(TEXT_8);
PANEL_10.setVisible(true);
TEXT_8.setVisible(true);
PANEL_10.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_10.moveComponent(TEXT_9);
PANEL_10.setVisible(true);
TEXT_9.setVisible(true);
PANEL_10.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_10.moveComponent(TEXT_11);
PANEL_10.setVisible(true);
TEXT_11.setVisible(true);
PANEL_10.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_10.moveComponent(TEXT_14);
PANEL_10.setVisible(true);
TEXT_14.setVisible(true);
PANEL_10.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_10.moveComponent(TEXT_15);
PANEL_10.setVisible(true);
TEXT_15.setVisible(true);
PANEL_10.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_10.moveComponent(TEXT_16);
PANEL_10.setVisible(true);
TEXT_16.setVisible(true);
PANEL_10.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_10.moveComponent(TEXT_17);
PANEL_10.setVisible(true);
TEXT_17.setVisible(true);
PANEL_10.setCSSClass("CHART_9");
}
} //4 end of the array
else if (index == 5){// 5 array value
if ( element =="1"){
PANEL_4.moveComponent(TEXT_6);
PANEL_4.setVisible(true);
TEXT_6.setVisible(true);
PANEL_4.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_4.moveComponent(TEXT_7);
PANEL_4.setVisible(true);
TEXT_7.setVisible(true);
PANEL_4.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_4.moveComponent(TEXT_8);
PANEL_4.setVisible(true);
TEXT_8.setVisible(true);
PANEL_4.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_4.moveComponent(TEXT_9);
PANEL_4.setVisible(true);
TEXT_9.setVisible(true);
PANEL_4.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_4.moveComponent(TEXT_11);
PANEL_4.setVisible(true);
TEXT_11.setVisible(true);
PANEL_4.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_4.moveComponent(TEXT_14);
PANEL_4.setVisible(true);
TEXT_14.setVisible(true);
PANEL_4.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_4.moveComponent(TEXT_15);
PANEL_4.setVisible(true);
TEXT_15.setVisible(true);
PANEL_4.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_4.moveComponent(TEXT_16);
PANEL_4.setVisible(true);
TEXT_16.setVisible(true);
PANEL_4.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_4.moveComponent(TEXT_17);
PANEL_4.setVisible(true);
TEXT_17.setVisible(true);
PANEL_4.setCSSClass("CHART_9");
}
} //5 end of the array
else if (index == 6){// 6 array value
if ( element =="1"){
PANEL_11.moveComponent(TEXT_6);
PANEL_11.setVisible(true);
TEXT_6.setVisible(true);
PANEL_11.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_11.moveComponent(TEXT_7);
PANEL_11.setVisible(true);
TEXT_7.setVisible(true);
PANEL_11.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_11.moveComponent(TEXT_8);
PANEL_11.setVisible(true);
TEXT_8.setVisible(true);
PANEL_11.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_11.moveComponent(TEXT_9);
PANEL_11.setVisible(true);
TEXT_9.setVisible(true);
PANEL_11.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_11.moveComponent(TEXT_11);
PANEL_11.setVisible(true);
TEXT_11.setVisible(true);
PANEL_11.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_11.moveComponent(TEXT_14);
PANEL_11.setVisible(true);
TEXT_14.setVisible(true);
PANEL_11.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_11.moveComponent(TEXT_15);
PANEL_11.setVisible(true);
PANEL_11.setCSSClass("CHART_7");
TEXT_15.setVisible(true);
}
else if (element=="8")
{ PANEL_11.moveComponent(TEXT_16);
PANEL_11.setVisible(true);
TEXT_16.setVisible(true);
PANEL_11.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_11.moveComponent(TEXT_17);
PANEL_11.setVisible(true);
TEXT_17.setVisible(true);
PANEL_11.setCSSClass("CHART_9");
}
} //6 end of the array
else if (index == 7){// 7 array value
if ( element =="1"){
PANEL_6.moveComponent(TEXT_6);
PANEL_6.setVisible(true);
TEXT_6.setVisible(true);
PANEL_6.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_6.moveComponent(TEXT_7);
PANEL_6.setVisible(true);
TEXT_7.setVisible(true);
PANEL_6.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_6.moveComponent(TEXT_8);
PANEL_6.setVisible(true);
TEXT_8.setVisible(true);
PANEL_6.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_6.moveComponent(TEXT_9);
PANEL_6.setVisible(true);
TEXT_9.setVisible(true);
PANEL_6.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_6.moveComponent(TEXT_11);
PANEL_6.setVisible(true);
TEXT_11.setVisible(true);
PANEL_6.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_6.moveComponent(TEXT_14);
PANEL_6.setVisible(true);
TEXT_14.setVisible(true);
PANEL_6.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_6.moveComponent(TEXT_15);
PANEL_6.setVisible(true);
TEXT_15.setVisible(true);
PANEL_6.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_6.moveComponent(TEXT_16);
PANEL_6.setVisible(true);
TEXT_16.setVisible(true);
PANEL_6.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_6.moveComponent(TEXT_17);
PANEL_6.setVisible(true);
TEXT_17.setVisible(true);
PANEL_6.setCSSClass("CHART_9");
}
} //7 end of the array
else if (index == 8){// 8 array value
if ( element =="1"){
PANEL_12.moveComponent(TEXT_6);
PANEL_12.setVisible(true);
TEXT_6.setVisible(true);
PANEL_12.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_12.moveComponent(TEXT_7);
PANEL_12.setVisible(true);
TEXT_7.setVisible(true);
PANEL_12.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_12.moveComponent(TEXT_8);
PANEL_12.setVisible(true);
TEXT_8.setVisible(true);
PANEL_12.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_12.moveComponent(TEXT_9);
PANEL_12.setVisible(true);
TEXT_9.setVisible(true);
PANEL_12.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_12.moveComponent(TEXT_11);
PANEL_12.setVisible(true);
TEXT_11.setVisible(true);
PANEL_12.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_12.moveComponent(TEXT_14);
PANEL_12.setVisible(true);
TEXT_14.setVisible(true);
PANEL_12.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_12.moveComponent(TEXT_15);
PANEL_12.setVisible(true);
TEXT_15.setVisible(true);
PANEL_12.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_12.moveComponent(TEXT_16);
PANEL_12.setVisible(true);
TEXT_16.setVisible(true);
PANEL_12.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_12.moveComponent(TEXT_17);
PANEL_12.setVisible(true);
TEXT_17.setVisible(true);
PANEL_12.setCSSClass("CHART_9");
}
} //8 end of the array
}// end of the array with odd
else if (arrlen ==2 || arrlen ==4 || arrlen ==6 || arrlen ==8){// if the array lenth is even
GRID_LAYOUT_9.setVisible(true);
GRID_LAYOUT_1.setVisible(false);
if (index == 0){// 0 array value
if ( element =="1"){
PANEL_7_1.moveComponent(TEXT_6);
PANEL_7_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_7_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_7_1.moveComponent(TEXT_7);
PANEL_7_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_7_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_7_1.moveComponent(TEXT_8);
PANEL_7_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_7_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_7_1.moveComponent(TEXT_9);
PANEL_7_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_7_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_7_1.moveComponent(TEXT_11);
PANEL_7_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_7_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_7_1.moveComponent(TEXT_14);
PANEL_7_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_7_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_7_1.moveComponent(TEXT_15);
PANEL_7_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_7_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_7_1.moveComponent(TEXT_16);
PANEL_7_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_7_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_7_1.moveComponent(TEXT_17);
PANEL_7_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_7_1.setCSSClass("CHART_9");
}
} //0 end of the array
else if (index == 1){// 1 array value
if ( element =="1"){
PANEL_8_1.moveComponent(TEXT_6);
PANEL_8_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_8_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_8_1.moveComponent(TEXT_7);
PANEL_8_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_8_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_8_1.moveComponent(TEXT_8);
PANEL_8_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_8_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_8_1.moveComponent(TEXT_9);
PANEL_8_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_8_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_8_1.moveComponent(TEXT_11);
PANEL_8_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_8_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_8_1.moveComponent(TEXT_14);
PANEL_8_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_8_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_8_1.moveComponent(TEXT_15);
PANEL_8_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_8_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_8_1.moveComponent(TEXT_16);
PANEL_8_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_8_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_8_1.moveComponent(TEXT_17);
PANEL_8_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_8_1.setCSSClass("CHART_9");
}
} //1 end of the array
else if (index == 2){// 2 array value
if ( element =="1"){
PANEL_5_1.moveComponent(TEXT_6);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_1");
TEXT_6.setVisible(true);
}
else if (element=="2")
{ PANEL_5_1.moveComponent(TEXT_7);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_2");
TEXT_7.setVisible(true);
}
else if (element=="3")
{ PANEL_5_1.moveComponent(TEXT_8);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_3");
TEXT_8.setVisible(true);
}
else if (element=="4")
{ PANEL_5_1.moveComponent(TEXT_9);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_4");
TEXT_9.setVisible(true);
}
else if (element=="5")
{ PANEL_5_1.moveComponent(TEXT_11);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_5");
TEXT_11.setVisible(true);
}
else if (element=="6")
{ PANEL_5_1.moveComponent(TEXT_14);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_6");
TEXT_14.setVisible(true);
}
else if (element=="7")
{ PANEL_5_1.moveComponent(TEXT_15);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_7");
TEXT_15.setVisible(true);
}
else if (element=="8")
{ PANEL_5_1.moveComponent(TEXT_16);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_8");
TEXT_16.setVisible(true);
}
else if (element=="9")
{ PANEL_5_1.moveComponent(TEXT_17);
PANEL_5_1.setVisible(true);
PANEL_5_1.setCSSClass("CHART_9");
TEXT_17.setVisible(true);
}
} //2 end of the array
else if (index == 3){// 3 array value
if ( element =="1"){
PANEL_9_1.moveComponent(TEXT_6);
PANEL_9_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_9_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_9_1.moveComponent(TEXT_7);
PANEL_9_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_9_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_9_1.moveComponent(TEXT_8);
PANEL_9_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_9_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_9_1.moveComponent(TEXT_9);
PANEL_9_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_9_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_9_1.moveComponent(TEXT_11);
PANEL_9_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_9_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_9_1.moveComponent(TEXT_14);
PANEL_9_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_9_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_9_1.moveComponent(TEXT_15);
PANEL_9_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_9_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_9_1.moveComponent(TEXT_16);
PANEL_9_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_9_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_9_1.moveComponent(TEXT_17);
PANEL_9_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_9_1.setCSSClass("CHART_9");
}
} //3 end of the array
else if (index == 4){// 4 array value
if ( element =="1"){
PANEL_4_1.moveComponent(TEXT_6);
PANEL_4_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_4_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_4_1.moveComponent(TEXT_7);
PANEL_4_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_4_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_4_1.moveComponent(TEXT_8);
PANEL_4_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_4_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_4_1.moveComponent(TEXT_9);
PANEL_4_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_4_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_4_1.moveComponent(TEXT_11);
PANEL_4_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_4_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_4_1.moveComponent(TEXT_14);
PANEL_4_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_4_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_4_1.moveComponent(TEXT_15);
PANEL_4_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_4_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_4_1.moveComponent(TEXT_16);
PANEL_4_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_4_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_4_1.moveComponent(TEXT_17);
PANEL_4_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_4_1.setCSSClass("CHART_9");
}
} //4 end of the array
else if (index == 5){// 5 array value
if ( element =="1"){
PANEL_10_1.moveComponent(TEXT_6);
PANEL_10_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_10_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_10_1.moveComponent(TEXT_7);
PANEL_10_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_10_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_10_1.moveComponent(TEXT_8);
PANEL_10_1.setVisible(true);
PANEL_10_1.setCSSClass("CHART_3");
TEXT_8.setVisible(true);
}
else if (element=="4")
{ PANEL_10_1.moveComponent(TEXT_9);
PANEL_10_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_10_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_10_1.moveComponent(TEXT_11);
PANEL_10_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_10_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_10_1.moveComponent(TEXT_14);
PANEL_10_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_10_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_10_1.moveComponent(TEXT_15);
PANEL_10_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_10_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_10_1.moveComponent(TEXT_16);
PANEL_10_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_10_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_10_1.moveComponent(TEXT_17);
PANEL_10_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_10_1.setCSSClass("CHART_9");
}
} //5 end of the array
else if (index == 6){// 6 array value
if ( element =="1"){
PANEL_11_1.moveComponent(TEXT_6);
PANEL_11_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_11_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_11_1.moveComponent(TEXT_7);
PANEL_11_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_11_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_11_1.moveComponent(TEXT_8);
PANEL_11_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_11_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_11_1.moveComponent(TEXT_9);
PANEL_11_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_11_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_11_1.moveComponent(TEXT_11);
PANEL_11_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_11_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_11_1.moveComponent(TEXT_14);
PANEL_11_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_11_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_11_1.moveComponent(TEXT_15);
PANEL_11_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_11_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_11_1.moveComponent(TEXT_16);
PANEL_11_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_11_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_11_1.moveComponent(TEXT_17);
PANEL_11_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_11_1.setCSSClass("CHART_9");
}
} //6 end of the array
else if (index == 7){// 7 array value
if ( element =="1"){
PANEL_6_1.moveComponent(TEXT_6);
PANEL_6_1.setVisible(true);
TEXT_6.setVisible(true);
PANEL_6_1.setCSSClass("CHART_1");
}
else if (element=="2")
{ PANEL_6_1.moveComponent(TEXT_7);
PANEL_6_1.setVisible(true);
TEXT_7.setVisible(true);
PANEL_6_1.setCSSClass("CHART_2");
}
else if (element=="3")
{ PANEL_6_1.moveComponent(TEXT_8);
PANEL_6_1.setVisible(true);
TEXT_8.setVisible(true);
PANEL_6_1.setCSSClass("CHART_3");
}
else if (element=="4")
{ PANEL_6_1.moveComponent(TEXT_9);
PANEL_6_1.setVisible(true);
TEXT_9.setVisible(true);
PANEL_6_1.setCSSClass("CHART_4");
}
else if (element=="5")
{ PANEL_6_1.moveComponent(TEXT_11);
PANEL_6_1.setVisible(true);
TEXT_11.setVisible(true);
PANEL_6_1.setCSSClass("CHART_5");
}
else if (element=="6")
{ PANEL_6_1.moveComponent(TEXT_14);
PANEL_6_1.setVisible(true);
TEXT_14.setVisible(true);
PANEL_6_1.setCSSClass("CHART_6");
}
else if (element=="7")
{ PANEL_6_1.moveComponent(TEXT_15);
PANEL_6_1.setVisible(true);
TEXT_15.setVisible(true);
PANEL_6_1.setCSSClass("CHART_7");
}
else if (element=="8")
{ PANEL_6_1.moveComponent(TEXT_16);
PANEL_6_1.setVisible(true);
TEXT_16.setVisible(true);
PANEL_6_1.setCSSClass("CHART_8");
}
else if (element=="9")
{ PANEL_6_1.moveComponent(TEXT_17);
PANEL_6_1.setVisible(true);
TEXT_17.setVisible(true);
PANEL_6_1.setCSSClass("CHART_9");
}
} //7 end of the array
}// the end of array with even
});//end of the array
CSS code is below:
.CHART_1 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #CC9F03;
text-align: center !important;
}
.CHART_2 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #00877D;
text-align: center !important;
}
.CHART_3 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #FFAD72;
text-align: center !important;
}
.CHART_4 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #7C98B3;
text-align: center !important;
}
.CHART_5 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #800000;
text-align: center !important;
}
.CHART_6 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #004080;
text-align: center !important;
}
.CHART_7 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #800080;
text-align: center !important;
}
.CHART_8 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #ffff00;
text-align: center !important;
}
.CHART_9 {
background: #FFFFFF;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), 0 10px 10px
rgba(0, 0, 0, 0.22);
border-top: 1rem solid #8000ff;
text-align: center !important;
}