Set conditional formatting for a specific measure

Conditional formatting

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>How to set conditional formatting for a specific measure</h2>
  <p>
    You can apply conditional formatting to a specific measure in two ways: via
    UI and programmatically.
  </p>
  <p>
    To set conditional formatting for a measure via UI, select
    <strong>Format</strong> > <strong>Conditional formatting</strong> >
    <span class="icon">+</span> on the Toolbar and choose the needed measure
    from the <strong>Value</strong> list.
  </p>
  <p>
    To set conditional formatting for a measure programmatically, specify the
    <code>measure</code> and <code>aggregation</code> properties of the
    <a
      href="https://www.flexmonster.com/api/conditional-format-object/"
      target="_blank"
    >Conditional Format Object</a> when creating a formatting rule 
    (lines 33, 34 in the JavaScript box).
  </p>
  <p>
    In this example, we've set conditional formatting for the
    <code>Quantity</code> measure.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/conditional-formatting/"
      target="_blank"
    >Learn more about conditional formatting in our documentation</a>.
  </p>
</div>

<button onclick="setCondition()">Set condition</button>
<button onclick="removeCondition()">Remove condition</button>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.icon {
  display: inline-block;
  padding: 0 11px 2px 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: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{ uniqueName: "Category" }],
      columns: [{ uniqueName: "[Measures]" }],
      measures: [
      	{
          uniqueName: "Price",
          aggregation: "sum"
        },
        {
          uniqueName: "Discount",
          aggregation: "sum"
        },
        {
          uniqueName: "Quantity",
          aggregation: "sum"
        }
      ]
    }
  }
});

function setCondition() {
  pivot.addCondition({
    formula: "#value < 10000",
    measure: "Quantity",
    aggregation: "sum",
    format: {
      backgroundColor: "#FB8C00", // Orange
      color: "#FFFFFF"
    }
  });
  pivot.refresh();
}

function removeCondition() {
	pivot.removeAllConditions();
  pivot.refresh();
}