Update conditional formatting at runtime

Conditional formatting

by Flexmonster Pivot Table

HTML

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

<button onclick="updateFormatting()">Update conditional formatting</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: "Color"
      }],
      columns: [
        {
          uniqueName: "Country"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price"
      }]
    },
    conditions: [{
      id: "1",
      formula: '#value > 50000',
      format: {
        color: "#FFF",
        backgroundColor: "#00897B", // Teal
        fontFamily: "Arial",
        fontSize: "12px"
      }
    }]
  }
});

function updateFormatting() {
	const id = "1";
  const condition = pivot.getCondition(id);
  condition.format.backgroundColor = "#F57C00"; // Orange
  pivot.addCondition(condition);
  pivot.refresh();
}