Drill down or drill up a specific hierarchy level

Configuring the slice

by Flexmonster Pivot Table

HTML

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

<button onclick="drillDownCell('rows', ['blue'], null, 'USA')">Drill down USA</button>
<button onclick="drillUpCell('rows', ['blue'], null, 'USA')">Drill up USA</button>
<button onclick="drillDownCell('columns', [], null, '2021')">Drill down year 2021</button>
<button onclick="drillUpCell('columns', [], null, '2021')">Drill up year 2021</button>

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

CSS

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      data: getData(),
      mapping: {
        "Country": {
        	hierarchy: "Geography",
        },
        "State": {
        	hierarchy: "Geography",
          parent: "Country"
        },
        "City": {
        	hierarchy: "Geography",
          parent: "State"
        },
        "Date": {
        	type: "year/month/day"
        }
      }
    },
    slice: {
      rows: [
      	{
        	uniqueName: "Color"
        },
        {
        	uniqueName: "[Geography]"
        }
      ],
      columns: [
      	{
        	uniqueName: "Date"
        },
        {
        	uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Price"
        }
      ],
      expands: {
      	rows: [
        	{
          	tuple: [ "color.[blue]" ]
          }
        ]
      }
    }
  }
});

function drillDownCell(axis, tuple, measure, member) {
	pivot.drillDownCell(axis, tuple, measure, member);
}

function drillUpCell(axis, tuple, measure, member) {
	pivot.drillUpCell(axis, tuple, measure, member);
}

function getData() {
	return [{
  	"Color": "red",
    "Country": "Canada",
    "State": "Ontario",
    "City": "Toronto",
    "Price": 174,
    "Quantity": 50,
    "Date": "2021-08-30"
  },
  {
    "Color": "blue",
    "Country": "USA",
    "State": "California",
    "City": "Los Angeles",
    "Price": 166,
    "Quantity": 65,
    "Date": "2021-05-12"
  }];
}