Set report filter at runtime

Slice configuration

by Flexmonster Pivot Table

HTML

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

<div>
  <p>
    Click the <b>Set Report Filter</b> button to add the <code>Color</code> field
    to the report filters and apply the selection filter to the field.
  </p>
  <p>
    Click the <b>Get Report Filter</b> button to output info about the fields
    selected for the report filters under the component.
  </p>
  <p>
    Click the <b>Clear Report Filter</b> button to remove all fields from the
    report filters.
  </p>
</div>

<button onclick="setReportFilter()">Set report filter</button>
<button onclick="printReportFilter()">Get report filter</button>
<button onclick="clearFilter()">Clear Report Filter</button>

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

<div class="output" id="output">Output will appear here</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: "https://cdn.flexmonster.com/data/data.csv"
    },
    slice: {
      rows: [{
        uniqueName: "Category"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }]
    }
  }
});

function setReportFilter() {
	let slice = pivot.getReport().slice;
  slice.reportFilters = [{
    uniqueName: "Color",
    filter: { members: ["color.[green]"] }
  }];
	pivot.runQuery(slice);
}

function printReportFilter() {
	const reportFilters = pivot.getReportFilters();
	showOutput(JSON.stringify(reportFilters, null, 2));
}

function clearFilter() {
  let slice = pivot.getReport().slice;
  slice.reportFilters = [];
	pivot.runQuery(slice);
}

function showOutput(content) {
  document.getElementById("output").innerText = content;
}