2
Dynamical displaying of cells on the grid layout
source link: https://blogs.sap.com/2022/06/30/dynamical-displaying-of-cells-on-the-grid-layout/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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. 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.
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.
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 arrayCSS 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;
}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK