Update the data at runtime without clearing the report

Data source

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>How to update the data at runtime without clearing the report</h2>
  <p>
  The <a href="https://www.flexmonster.com/api/updatedata/" target="_blank">updateData()</a> method allows updating the data whereas other report configurations are not changed. 
  </p>
  <p>
  In this example, the initial report contains a slice, options, number formatting, and conditional formatting. These configurations won't be changed after updating the data. Click the buttons below to try!
  </p>
  <p>
  To update the data and clear other report configurations, use the <a href="https://www.flexmonster.com/api/connectto/" target="_blank">connectTo()</a> method.
  </p>
</div>

<button onclick="updateDataCSV()">Update data from dataset 1</button>
<button onclick="updateDataJSON()">Update data from dataset 2</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,
  report: {
    dataSource: {
      filename: "data/retail-data.json"
    },
    slice: {
    	rows: [
      	{ uniqueName: "Country" }
      ],
      columns: [
        { uniqueName: "[Measures]" }
      ],
      measures: [
      	{ 
        	uniqueName: "Price",
          format: "currency"
        },
        { uniqueName: "Quantity" }
      ]
    },
    options: {
    	grid: {
      	type: "flat",
        showFilter: false,
        showHeaders: false,
        grandTotalsPosition: "bottom"
      }
    },
    formats: [
    	{
      	name: "currency",
        decimalPlaces: 2,
        currencySymbol: "$"
      }
    ],
    conditions: [
    	{
      	formula: "#value > 500",
        measure: "Price",
       	format: {
        	backgroundColor: "#F57C00",
        	color: "#FFFFFF"
        }
      },
      {
      	formula: "#value < 200",
        measure: "Quantity",
        format: {
        	backgroundColor: "#9CCC65",
          color: "#000000"
        }
      }
    ]
  }
});

function updateDataCSV() {
  pivot.updateData({
    filename: 'data/data.csv'
  });
}

function updateDataJSON() {
  pivot.updateData({
    data: jsonData
  });
}

const jsonData = [
	{
    "Category": "Accessories",
    "Size": "277 oz",
    "Color": "red",
    "Destination": "United Kingdom",
    "Business Type": "Warehouse",
    "Country": "United Kingdom",
    "Price": 1000,
    "Quantity": 730,
    "Discount": 38
  },
  {
    "Category": "Accessories",
    "Size": "47 oz",
    "Color": "white",
    "Destination": "United States",
    "Business Type": "Warehouse",
    "Country": "United States",
    "Price": 7941,
    "Quantity": 73,
    "Discount": 53
  },
  {
    "Category": "Bikes",
    "Size": "264 oz",
    "Color": "white",
    "Destination":...