% of Column and % of Parent Row Total aggregations

Slice configuration

by Flexmonster Pivot Table

HTML

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

<div>
  <p>
    In this example, the <code>"percentofcolumn"</code> and
    <code>"percentofparentrowtotal"</code> aggregations are used to calculate a
    % of Column and a % of Parent Row Total of prices depending on a country,
    category and color.
  </p>
  <p>
    Each cell shows how much an individual value contributes either to the
    entire column total (<code>"percentofcolumn"</code>) or to the parent row
    total (<code>"percentofparentrowtotal"</code>), expressed as a
    percentage.<br />
    Since the top level cells do not have parents, they contain the same values
    for both aggregations.
  </p>
  <p>
    Read more about the
    <a
      target="_blank"
      href="https://www.flexmonster.com/doc/aggregation-functions/#percent-of-column"
      >"percentofcolumn"</a
    >
    and
    <a
      target="_blank"
      href="https://www.flexmonster.com/doc/aggregation-functions/#percent-of-parent-row-total"
      >"percentofparentrowtotal"</a
    >
    aggregations in Flexmonster docs.
  </p>
</div>

<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/",
  report: {
    dataSource: {
      filename: "data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Country"
      }, {
        uniqueName: "Category"
      }],
      columns: [{
        uniqueName: "Color"
      }, {
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
        aggregation: "percentofcolumn"
      }, {
        uniqueName: "Price",
        aggregation: "percentofparentrowtotal"
      }],
      expands: {
        expandAll: true
      }
    },
    formats: [{
      name: "",
      decimalSeparator: ".",
      decimalPlaces: 2,
      nullValue: "-"
    }]
  }
});