Hello Team,
I would like to create a matrix kind of visualization wherein certain areas of the table (background color) is hardcoded. How can that be achieved. I am using Helical Insight 3.1 Enterprise Edition.
Thank You
Harika
1 Like
Hello Harika,
When you create a tabular report using Adhoc interface then via CSS it is possible to color code any specific cell. Create the adhoc report, go to the CSS Editor portion of Editor.
Insert the below code. You can look at the code, we can hard code specific cells by passing the row no and column no in the tr (row component) and td(column component).
By applying the entire below code the entire look and feel will change like this
tr:nth-child(1)>td:nth-child(9),tr:nth-child(1)>td:nth-child(10),tr:nth-child(1)>td:nth-child(11),
tr:nth-child(2)>td:nth-child(10),tr:nth-child(2)>td:nth-child(11),
tr:nth-child(3)>td:nth-child(11) {
background: red;
}
tr:nth-child(1)>td:nth-child(4), tr:nth-child(1)>td:nth-child(5), tr:nth-child(1)>td:nth-child(6), tr:nth-child(1)>td:nth-child(7), tr:nth-child(1)>td:nth-child(8),
tr:nth-child(2)>td:nth-child(5), tr:nth-child(2)>td:nth-child(6), tr:nth-child(2)>td:nth-child(7), tr:nth-child(2)>td:nth-child(8), tr:nth-child(2)>td:nth-child(9),
tr:nth-child(3)>td:nth-child(6), tr:nth-child(3)>td:nth-child(7), tr:nth-child(3)>td:nth-child(8), tr:nth-child(3)>td:nth-child(9), tr:nth-child(3)>td:nth-child(10),
tr:nth-child(4)>td:nth-child(7), tr:nth-child(4)>td:nth-child(8), tr:nth-child(4)>td:nth-child(9), tr:nth-child(4)>td:nth-child(10), tr:nth-child(4)>td:nth-child(11),
tr:nth-child(5)>td:nth-child(8), tr:nth-child(5)>td:nth-child(9), tr:nth-child(5)>td:nth-child(10), tr:nth-child(5)>td:nth-child(11),
tr:nth-child(6)>td:nth-child(9), tr:nth-child(6)>td:nth-child(10), tr:nth-child(6)>td:nth-child(11),
tr:nth-child(7)>td:nth-child(10), tr:nth-child(7)>td:nth-child(11),
tr:nth-child(8)>td:nth-child(11)
{
background: yellow;
}
tr:nth-child(1)>td:nth-child(2), tr:nth-child(1)>td:nth-child(3),
tr:nth-child(2)>td:nth-child(2), tr:nth-child(2)>td:nth-child(3), tr:nth-child(2)>td:nth-child(4),
tr:nth-child(3)>td:nth-child(2), tr:nth-child(3)>td:nth-child(3), tr:nth-child(3)>td:nth-child(4), tr:nth-child(3)>td:nth-child(5),
tr:nth-child(4)>td:nth-child(2), tr:nth-child(4)>td:nth-child(3), tr:nth-child(4)>td:nth-child(4), tr:nth-child(4)>td:nth-child(5), tr:nth-child(4)>td:nth-child(6),
tr:nth-child(5)>td:nth-child(2), tr:nth-child(5)>td:nth-child(3), tr:nth-child(5)>td:nth-child(4), tr:nth-child(5)>td:nth-child(5), tr:nth-child(5)>td:nth-child(6), tr:nth-child(5)>td:nth-child(7),
tr:nth-child(6)>td:nth-child(2), tr:nth-child(6)>td:nth-child(3), tr:nth-child(6)>td:nth-child(4), tr:nth-child(6)>td:nth-child(5), tr:nth-child(6)>td:nth-child(6), tr:nth-child(6)>td:nth-child(7), tr:nth-child(6)>td:nth-child(8),
tr:nth-child(7)>td:nth-child(2), tr:nth-child(7)>td:nth-child(3), tr:nth-child(7)>td:nth-child(4), tr:nth-child(7)>td:nth-child(5), tr:nth-child(7)>td:nth-child(6), tr:nth-child(7)>td:nth-child(7), tr:nth-child(7)>td:nth-child(8), tr:nth-child(7)>td:nth-child(9),
tr:nth-child(8)>td:nth-child(2), tr:nth-child(8)>td:nth-child(3), tr:nth-child(8)>td:nth-child(4), tr:nth-child(8)>td:nth-child(5), tr:nth-child(8)>td:nth-child(6), tr:nth-child(8)>td:nth-child(7), tr:nth-child(8)>td:nth-child(8), tr:nth-child(8)>td:nth-child(9), tr:nth-child(8)>td:nth-child(10),
tr:nth-child(9)>td:nth-child(2), tr:nth-child(9)>td:nth-child(3), tr:nth-child(9)>td:nth-child(4), tr:nth-child(9)>td:nth-child(5), tr:nth-child(9)>td:nth-child(6), tr:nth-child(9)>td:nth-child(7), tr:nth-child(9)>td:nth-child(8), tr:nth-child(9)>td:nth-child(9), tr:nth-child(9)>td:nth-child(10), tr:nth-child(9)>td:nth-child(11),
tr:nth-child(10)>td:nth-child(2),tr:nth-child(10)>td:nth-child(3), tr:nth-child(10)>td:nth-child(4), tr:nth-child(10)>td:nth-child(5), tr:nth-child(10)>td:nth-child(6), tr:nth-child(10)>td:nth-child(7), tr:nth-child(10)>td:nth-child(8), tr:nth-child(10)>td:nth-child(9), tr:nth-child(10)>td:nth-child(10), tr:nth-child(10)>td:nth-child(11)
{
background-color: green;
}
.glyphicon
{
display: none !important;
}
.actionBar, row {
display: none !important;
}
a.button {
display: none !important;
}
Thank You
Team Helical