Set conditional formatting for a specific measure
Conditional formatting
HTML
<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/2.9.21/flexmonster.js"></script>
<div id="pivot-container"></div>
CSS
h2 {
text-align: center;
}
p {
font-size: 15px;
line-height: 1.5;
padding-right: 10px;
padding-left: 10px;
}
a {
color: #00a45a;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
code {
font-size: 105%;
color: #DF3800;
background-color: #f5f5f5;
padding: 1px 4px;
font-family: monospace !important;
border-radius: 4px;
}
.icon {
display: inline-block;
padding: 0 11px 0 11px;
border: 1px solid #d5d5d5;
border-radius: 4px;
font-size: 20px;
background: #fbfbfb;
color: #999;
}
JavaScript
let pivot = new Flexmonster({
container: "pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
toolbar: true,
report: {
conditions: [
{
format: {
color: '#FFFFFF',
fontSize: '12px',
fontFamily: 'Arial',
backgroundColor: '#D32F2F',
},
formula: '#value < -0.01',
},
{
format: {
color: '#FFFFFF',
fontSize: '12px',
fontFamily: 'Arial',
backgroundColor: '#689F38',
},
formula: '#value > 0.01',
measure: 'calc_field_growth',
},
],
dataSource: {
data: [
{
day: '1',
sales: 10.1000000000001,
calc_field: 288.879999999997,
},
{
day: '2',
sales: 737.7,
calc_field: 123.59,
},
{
day: '3',
sales: null,
calc_field: null,
},
{
day: '4',
sales: 115.795000000000002,
calc_field: 315.41,
},
{
day: '5r',
sales: 526.463333333334,
calc_field: 303.14,
},
{
day: '6',
sales: 1081.1733180318,
calc_field: 1210.97,
},
{
day: '7',
sales: 1453.48644185858,
calc_field: 1516.68,
},
{
day: '8',
sales: 1758.9,
calc_field: 488.12,
},
{
day: '9',
sales: 381.29903377297,
calc_field: -309.550000000003,
},
{
day: '10',
sales: 315.4057,
calc_field: 488.9572,
},
{
day: '11',
sales: 19.1934430361644,
calc_field: 13.87,
},
{
day: '12',
sales: 33.203340710884,
calc_field: -151.47,
},
{
day: '13',
sales:...