Adding inline JSON data using the data property

Data source

by Flexmonster Pivot Table

HTML

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

<br><br>

<h1>Report filtering "Product A"</h1>
<p>When clicking on "August" the filter is maintained, however when clicking on "September" the filter is removed and when returning to "August" the filter no longer exists.</p>

<button onclick="setData('august')">August data (with "Product A")</button>
<button onclick="setData('september')">September data (without "Product A")</button>

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

CSS

body {
  padding: 15px;
}

h1 {
  margin: 0 0 15px;  
}

button {
  text-transform: none;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    options: {
      filter: {
        allowEmptyMembersFilter: true
      }
    },
    dataSource: {
      data: [{
          "Product": "Product A",
          "Price": 30,
        },
        {
          "Product": "Product B",
          "Price": 55,
        },
      ],
    },
    slice: {
      rows: [{
        uniqueName: "Product",
        filter: {
          members: [
            "product.[product a]"
          ]
        }
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price",
        aggregation: "sum"
      }]
    },
  }
});

const dataByMonth = {
  august: [{
      "Product": "Product A",
      "Price": 174,
    },
    {
      "Product": "Product B",
      "Price": 166,
    },
    {
      "Product": "Product C",
      "Price": 215,
    },
    {
      "Product": "Product D",
      "Price": 194,
    }
  ],
  september: [{
      "Product": "Product B",
      "Price": 96,
    },
    {
      "Product": "Product C",
      "Price": 35,
    },
    {
      "Product": "Product D",
      "Price": 50,
    }
  ]
};

function setData(month) {
  const data = dataByMonth[month];

  pivot.updateData({
    data: data,
  });
}