Use OLAP formatting

Options

by Karthickc

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

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

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      type: 'json',
      data: [
      {
        field: 'data1',
        category: 'category1',
        amount: 10,
      },
      {
        field: 'data1',
        category: 'category2',
        amount: 780,
      },
      {
        field: 'data1',
        category: 'category3',
        amount: 240,
      },
      {
        field: 'data1',
        category: 'category4',
        amount: 300,
      },
      {
        field: 'data1',
        category: 'category5',
        amount: -80,
      },
      {
        field: 'data1',
        category: 'category6',
        amount: 100,
      }],
      mapping: {
        field: {
          type: 'string',
          caption: 'Field',
        },
        category: {
          type: 'string',
          caption: 'Category',
        },
        amount: {
          type: 'number',
          caption: 'Amount ($)',
        },
      },
    },
    slice: {
      rows: [
        {
          uniqueName: 'field',
        },
        {
          uniqueName: 'category',
        },
      ],
      columns: [
        {
          uniqueName: '[Measures]',
        },
      ],
      measures: [
        {
          uniqueName: 'amount',
          aggregation: 'sum',
          grandTotalCaption: 'Amount ($)',
          format: 'amount',
        },
        {
          uniqueName: 'amount_%',
          formula: 'percentofparentrowtotal("amount")',
          caption: 'Amount %',
          format: 'amount_%',
        },
      ],
      sorting: {
        column: {
          type: 'desc',
          tuple: [],
          measure: {
            uniqueName: 'amount',
            aggregation: 'percentofparentrowtotal',
          },
        },
      },
      expands: {
        expandAll: true,
      },
    },
    options: {
      grid: {
        type: 'classic',
        showHeaders: false,
       ...