Set conditional formatting for a specific field member

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 field member</h2>
  <p>
    To set conditional formatting for a specific field member, specify the
    <code>hierarchy</code> and <code>member</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 46, 47 in the JavaScript box).
  </p>
  <p>
    In this example, we've set conditional formatting for the
    <code>Cars</code> member of the <code>Category</code> field.
  </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);

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" },
        { uniqueName: "Color" },
      ],
      columns: [
        { uniqueName: "[Measures]" }
      ],
      measures: [
      	{
          uniqueName: "Price",
          aggregation: "sum"
        },
        {
          uniqueName: "Discount",
          aggregation: "sum"
        },
        {
          uniqueName: "Quantity",
          aggregation: "sum"
        }
      ],
      expands: {
        rows:[
      	  {
        	  tuple: ["category.[cars]"]
          }
        ]
      }
    }
  }
});

function setCondition() {
  pivot.addCondition({
    id: "1",
    formula: "AND(#value > 3000, #value < 1700000)",
    hierarchy: "Category",
    member: "Cars",
    format: {
      backgroundColor: "#EF5350", // Red
      color: "#FFFFFF"
    }
  });
  pivot.refresh();
}

function removeCondition() {
	pivot.removeCondition("1");
  pivot.refresh();
}