API call customizeCell()

Customizing the grid

by Flexmonster Pivot Table

HTML

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

<button onclick="changeOffset()">Change colors</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/",
  customizeCell: customizeCellFunction,
  report: {
    dataSource: {
      filename: "data/data.json",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country"
        }
      ],
      columns: [
        {
          uniqueName: "Color"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Price"
        },
      ]
    },
  }
});

let offset = 1E+6;

function changeOffset() {
	offset += 1E+6;
  if (offset >= 10E+6) {
  	offset = 1E+6;
  }
	pivot.customizeCell(customizeCellFunction);
}

function customizeCellFunction(cell, data) {
  if(data.type === "value") {
  	cell.style["background-color"] = "#" + getColor(data.value);
  	cell.style["color"] = "#FFFFFF";
  }
}

function getColor(val) {
  return (val + offset).toString(16).padStart(6, "0");
}