Adding inline JSON data using the data property

Data source

HTML

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

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

JavaScript

let isExpanded = false;

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: getReport(),
});



function getReport() {
  const report = {
    dataSource: {
      data: [
        {
          FirstLeveCategory: "02 First Level Category B",
          SecondLevelCategory: "Second Level Category B",
          FinanceCategory: "Finance Category 2",
          Sales: 700,
          Date: "2025-07-01"
        },
        
      ],
      mapping: {
        FirstLeveCategory: {
          hierarchy: "Category"
        },
        SecondLevelCategory: {
          parent: "FirstLeveCategory",
          hierarchy: "Category"
        },
        FinanceCategory: {
          type: "string",
        },
        Sales: {
          type: "number"
        },
        Date: [
          {
            type: "date string",
            format: "MMM/yyyy",
            uniqueName: "Month",
            interval: "M",
            hierarchy: null
          },
        ],
      },
    },
    slice: {
      rows: [
        {
          uniqueName: "Category"
        },
        {
          uniqueName: "FinanceCategory"
        }
      ],
      columns: [
        {
          uniqueName: "Month"
        },
        {
          uniqueName: "[Measures]"
        },
      ],
      measures: [{
        aggregation: "sum",
        uniqueName: "Sales"
      }],
      expands: {
        expandAll: true,
      },
    },
    options: {
      grid: {
        showGrandTotals: "rows",
        showHierarchies: false,
      },
    },
  };

  return report;
}