Drill down or drill up the second hierarchy level

Configuring the slice

by Flexmonster Pivot Table

HTML

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

<button onclick="drillDownCell('rows', [], null, 'geography.[usa].[california]')">Drill down California</button>
<button onclick="drillUpCell('rows', [], null, 'geography.[usa].[california]')">Drill up California</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"
        }
      }
    },
    slice: {
      rows: [
        {
        	uniqueName: "[Geography]"
        }
      ],
      columns: [
      	{
        	uniqueName: "Color"
        },
        {
        	uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Price"
        }
      ],
      "drills": {
            "rows": [
                {
                    "tuple": [
                        "geography.[usa]"
                    ]
                }
            ]
        }
    }
  }
});

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
  },
  {
    "Color": "blue",
    "Country": "USA",
    "State": "California",
    "City": "Los Angeles",
    "Price": 166,
    "Quantity": 65
  }];
}