Example with showHierarchies property

Options

by Flexmonster Pivot Table

HTML

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

<button onclick="toggleShowHierarchies(false)">Show hierarchies with icon</button>
<button onclick="toggleShowHierarchies(true)">Show hierarchies with link</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/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      rows: [
        {
          uniqueName: "Geography"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Price"
        }
      ]
    }
  }
});

function toggleShowHierarchies(state) {
  pivot.setOptions({
    grid: {
      showHierarchies: state
    }
  });
  pivot.refresh();
}

function getData() {
  return [{
    "Color": {
      type: "string"
    },
    "Country": {
      type: "level",
      hierarchy: "Geography",
      level: "Country"
    },
    "State": {
      type: "level",
      hierarchy: "Geography",
      level: "State",
      parent: "Country"
    },
    "City": {
      type: "level",
      hierarchy: "Geography",
      parent: "State"
    },
    "Price": {
      type: "number"
    },
    "Quantity": {
      type: "number"
    }
  }, 
  {
    "Color": "green",
    "Country": "Canada",
    "State": "Ontario",
    "City": "Toronto",
    "Price": 174,
    "Quantity": 22
  }, 
  {
    "Color": "red",
    "Country": "USA",
    "State": "California",
    "City": "Los Angeles",
    "Price": 166,
    "Quantity": 19
  }]
}