Adding inline JSON data using the data property

Data source

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js" integrity="sha512-9Sxlz9DC2Z4SewnMV2jzeYr/N0psEmZRQAUk5cUpE3fLY2Ml32VsprA9PsKj+kT7OGUn+VZRstS+Z0bbtpH46g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<button id="button">setReport</button>

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

JavaScript

const CSV_WITH_DATA = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTAeNUbXJd4rM8PxAn44soB1B_HuuzRVr7ckWMueBVv9qf5UAmMk-JSQQ9d-yTfwP_vT-7IjZ3RO0Le/pub?output=csv';
const CSV_WITHOUT_DATA = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQttYRtfSBA2_wPVig0EJF_DBdCieq2O6Pbnoy6yx8JXTh4dEJ9GjUpA7p66pdue_b9X7vhzhKvsbP9/pub?output=csv';

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

function getReport(filename) {
  return {
    dataSource: {
      filename,
    },
    slice: {
      rows: [
        {
          uniqueName: "Country"
        },
        {
          uniqueName: "Color",
          filter: {
            measure: {
              uniqueName: "Price",
              aggregation: "sum"
            },
            query: {
              top: 20
            }
          }
        }
      ],
      columns: [
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum"
        },
      ]
    },
  };
}

document.getElementById('button').addEventListener('click', () => {
  const report = getReport(CSV_WITHOUT_DATA);
  pivot.setReport(report);  
});