Adding a condition for a specific row or column

Conditional formatting

by Flexmonster Pivot Table

HTML

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

<button onclick="formatValues('row', 4)">Format row 5</button>
<button onclick="formatValues('column', 2)">Format column 3</button>
<button onclick="removeCondition()">Remove formatting</button>

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

CSS

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

JavaScript

const 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: "Color" }, 
        { uniqueName: "[Measures]" }
      ],
      measures: [
        { uniqueName: "Price" }
      ],
    },
  },
});

function formatValues(rowOrColumn, idx) {
  const id = 1;
  let condition = pivot.getCondition(id);

  if (!condition) {
    condition = {
      id: 1,
      formula: "AND(#value > 3000, #value < 2000000)",
      format: {
        backgroundColor: "#FBC02D", // Dark yellow
      },
    };
  }

  switch (rowOrColumn) {
    case "row":
      condition.row = idx;
      break;
    case "column":
      condition.column = idx;
      break;
  }

  pivot.addCondition(condition);
  pivot.refresh();
}

function removeCondition() {
  let id = 1;
  pivot.removeCondition(id);
  pivot.refresh();
}