Customize the pivot charts

Embedding Flexmonster

by Dongor7

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>

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

JavaScript

var pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 500,
  toolbar: true,
  customizeChartElement: customizeChartElementFunction,
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      columns: [{
          uniqueName: "Country"
        },
        {
          uniqueName: "Color"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [{
        uniqueName: "Price"
      }]
    },
    options: {
      viewType: "charts",
      chart: {
        type: "column"
      }
    }
  }
});

function customizeChartElementFunction(element, data) {
  let newColor = tinycolor("#1a0019");
  if (contains(data, "country.[united states]")) {
    if (data.chartType == "pie") {
      if (element.querySelector('path')) {
        element.querySelector('path').style.fill = applyShade(newColor, 
        element.querySelector('path').style.fill).toRgbString();
      }
    } else {
      element.style.fill = applyShade(newColor, element.style.fill).toRgbString();
    }
  }
  if (data && data.type == 'legend') {
    if (data.member && data.member.uniqueName == "country.[united states]" &&
      !data.isExpanded) {
      element.querySelector(".fm-icon-display").style
        .backgroundColor = applyShade(newColor, data.color).toHexString();
    }
    if (data.tuple && isChild(data.tuple, data.member.uniqueName,
        "country.[united states]") && !data.isExpanded) {
      element.querySelector(".fm-icon-display").style
        .backgroundColor = applyShade(newColor, data.color).toHexString();
    }
  }
}

function contains(data, memberName) {
  if (data && data.rows) {
    for (let i = 0; i < data.rows.length; i++) {
      if (data.rows[i].uniqueName == memberName) {
        return true;
      }
    }
  }
  if (data && data.columns) {
    for (let i = 0; i < data.columns.length; i++) {
      if (data.columns[i].uniqueName ==...