Highlighting Country Canada on any place in rows or columns
Customize cells
by jesperra
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<div id="pivot-container"></div>
CSS
#fm-pivot-view #fm-grid-view div[hierarchy="Country"][member="Canada"] {
background-color: #CCCCCC;
}
JavaScript
var pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 500,
toolbar: true,
customizeCell: customizeCellFunction,
report: {
"dataSource": {
"data": getData()
},
"slice": {
"rows": [{
"uniqueName": "Country"
}, {
"uniqueName": "Color"
}, {
"uniqueName": "Category"
}, {
"uniqueName": "[Measures]"
}],
"columns": [{
"uniqueName": "Business Type"
}],
"measures": [{
"uniqueName": "Price"
}]
},
"options": {
"grid": {
"type": "flat"
}
}
}
});
function customizeCellFunction(cell, data) {
if (data.rows) {
for (var i = 0; i < data.rows.length; i++) {
if (data.rows[i]["hierarchyCaption"] == "Country" && data.rows[i]["caption"] == "Canada") {
cell.attr["hierarchy"] = data.rows[i]["hierarchyCaption"];
cell.attr["member"] = data.rows[i]["caption"];
}
}
}
if (data.columns) {
for (var i = 0; i < data.columns.length; i++) {
if (data.columns[i]["hierarchyCaption"] == "Country" && data.columns[i]["caption"] == "Canada") {
cell.attr["hierarchy"] = data.columns[i]["hierarchyCaption"];
cell.attr["member"] = data.columns[i]["caption"];
}
}
}
}
function getData() {
return [{
"Category": "Accessories",
"Size": "262 oz",
"Color": "red",
"Destination": "Australia",
"Business Type": "Specialty Bike Shop",
"Country": "Australia",
"Price": 174,
"Quantity": 225,
"Discount": 23
}, {
"Category": "Accessories",
"Size": "214 oz",
"Color": "yellow",
"Destination": "Canada",
"Business Type": "Specialty Bike Shop",
"Country": "Canada",
"Price": 502,
"Quantity": 90,
"Discount": 17
}, {
"Category": "Components",
"Size": "235 oz",
"Color": "green",
"Destination": "Australia",
"Business...