Display cell values in data bars

Customizing the grid

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to display cell values in data bars</h2>
  <p>This example shows how to display a cell value in a progress bar.</p>
  <p>
    The cell's appearance is customized using the
    <a href="https://www.flexmonster.com/api/customizecell/" target="_blank"
      >customizeCell()</a
    >
    method. It wraps each cell value with a custom HTML to create a progress bar
    (lines 50-60 in the JavaScript box).
  </p>
  <p>
    <a href="https://www.flexmonster.com/doc/customizing-grid/" target="_blank"
      >Visit our docs to learn more about customizing the grid</a
    >.
  </p>
</div>

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

CSS

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

.container {
  padding: 0.01em 16px;
}

.dark-grey {
  color: #fff !important;
  background-color: #616161 !important;
}

.green {
  color: #fff !important;
  background-color: #4caf50 !important;
}

.center {
  display: inline-block;
  width: auto;
  text-align: center;
}

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 350,
  report: {
    dataSource: {
      filename: "data/data.json"
    },
    slice: {
      rows: [
      	{
          uniqueName: "Category"
        }
      ],
      columns: [
      	{
          uniqueName: "Business Type"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
      	{
          uniqueName: "Price",
          aggregation: "percentofrow",
          format: "percent"
      	}
      ]
    },
    options: {
    	grid: {
      	showGrandTotals: "rows",
        showAutoCalculationBar: false
      }
    },
    formats: [
    	{
      	name: "percent",
        decimalPlaces: 2,
      	currencySymbol: "%",
      	positiveCurrencyFormat: "1$",
      	negativeCurrencyFormat: "-1$"
    	}
    ],
  },
  customizeCell: customizeCellFunction,
});

function customizeCellFunction(cell, data) {
  if (data && data.hierarchy && data.hierarchy.uniqueName == "Price" && data.type == "value") {
    if (!data.isTotal) {
      cell.text = `<div class="container">
      	<div class="dark-grey">
      		<div class="container green center" style="width:${(data.value && data.value > 100)?'100%':cell.text}">${cell.text}</div>
      	</div>
      </div>`
    }
  }
}