API call save for saving the report

Configuring the report

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to save the report for later use</h2>
  <p>
    This example shows how to capture the report using the
    <a href="https://www.flexmonster.com/api/save/" target="_blank">save()</a>
    method. It is called when you click the <strong>Save report</strong> button.
  </p>
  <p>
    Feel free to configure the report as you wish: set options, format values,
    manage the slice. Then save the report to keep your changes.
  </p>
  <p>
    <a
      href="https://www.flexmonster.com/doc/get-report-from-the-component/"
      target="_blank"
      >See our documentation for other ways to save the report</a
    >.
  </p>
</div>

<button onclick="save()">Save report</button>

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

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  width: "100%",
  height: 500,
  report: {
    dataSource: {
    	data: getData()
    },
    slice: {
    	rows: [
      	{ uniqueName: "City" },
        { uniqueName: "Retail Category" }
      ],
      columns: [
      	{ uniqueName: "Status" },
        { uniqueName: "[Measures]" }
      ],
      measures: [
      	{
        	uniqueName: "Price",
          format: "currency"
        },
        { uniqueName: "Quantity" }
      ]
    },
    formats: [
    	{
      	name: "currency",
        decimalPlaces: 2,
        currencySymbol: "$"
      }
    ],
    options: {
    	defaultDateType: "datetime"
    }
  },
  beforetoolbarcreated: customizeToolbar
});

function save() {
  pivot.save({
    filename: 'myreport.json',
    destination: 'file'
  });
}

function customizeToolbar(toolbar) {
	let tabs = toolbar.getTabs();
  toolbar.getTabs = function() {
    tabs = tabs.filter(tab => tab.id != "fm-tab-save");
    return tabs;
  }
}


function getData() {
  return [
  {
    "Country": "Australia",
    "City": "Canberra",
    "Contact First Name": "Riki",
    "Deal Size": "Small",
    "Contact Last Name": "Carle",
    "Product Code": "OP139",
    "Quantity": 109,
    "Price": 677,
    "Status": "On Hold",
    "Phone": "473-632-1982",
    "Retail Category": "Home & kitchen",
    "Order Date": "2019-09-23",
    "CurrencyID": "AUD",
    "Date": "2019-09-23",
    "Sales": 73793
  },
  {
    "Country": "Japan",
    "City": "Tokyo",
    "Contact First Name": "Elwira",
    "Deal Size": "Small",
    "Contact Last Name": "Persent",
    "Product Code": "SR81",
    "Quantity": 98,
    "Price": 417,
    "Status": "On Hold",
    "Phone": "365-218-6144",
    "Retail Category": "Grocery & gourmet food",
    "Order Date": "2019-10-20",
    "CurrencyID": "JPY",
   ...