Configure multilevel hierarchies

Mapping configuration

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to configure multilevel hierarchies</h2>
  <p>
    This example demonstrates how to create multilevel hierarchies when
    connecting to JSON or CSV.
  </p>
  <p>
    In Flexmonster, you can configure multilevel hierarchies from
    non-hierarchical data using the mapping. In this example, we created the
    <code>Geography</code> hierarchy with three levels: <code>Region</code>,
    <code>State</code>, and <code>City</code> (lines 8-20 in the JavaScript
    box).
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/mapping/#!multilevel-hierarchies"
      target="_blank"
    >Visit our docs to learn more about creating multilevel hierarchies</a>.
  </p>
</div>

<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: {
      filename: "data/sales_data_without_types.csv",
      mapping: {
        "Region": {
          hierarchy: "Geography"
        },
        "State": {
          parent: "Region",
          hierarchy: "Geography"
        },
        "City": {
          parent: "State",
          hierarchy: "Geography"
        }
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Geography"
        }
      ],
      columns: [
        {
          uniqueName: "Category"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Revenue",
          aggregation: "sum"
        }
      ],
      drills: {
      	rows: [
        	{
          	tuple: ['geography.[midwest]']
          }
        ]
      }
    }
  }
});