Connecting to JSON or CSV data at runtime with clearing the report

Data source

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>Connecting to JSON/CSV data at runtime with clearing the report</h2>
  <p>
    This example shows how to connect to remote JSON/CSV data (from a file or a
    server-side script), to a local JSON/CSV file, and to inline JSON data using
    the
    <a href="https://www.flexmonster.com/api/connectto/" target="_blank"
    >connectTo()</a> API call. Note that invoking this API call clears the report.
  </p>
  <p>
    To update the data source without clearing the report, use the
    <a href="https://www.flexmonster.com/api/updatedata/" target="_blank"
    >updateData()</a> API call.
  </p>
  <p>
    Learn more about connecting to
    <a href="https://www.flexmonster.com/doc/json-data-source/" target="_blank"
    >JSON</a> and
    <a href="https://www.flexmonster.com/doc/csv-data-source/" target="_blank"
    >CSV</a> data.
  </p>
</div>

<button onclick="connectToRemoteJSON()">Connect to remote data</button>
<button onclick="connectToLocalJSON()">Connect to local data</button>
<button onclick="connectToInlineJSON()">Connect to inline JSON</button>

<div id="pivot-container"></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: {
    conditions: [{
      format: {
        backgroundColor: "#8BC34A",
        color: "#FFFFFF",
        fontFamily: "Arial",
        fontSize: "16px"
      },
      formula: "#value > 50000"
    }],
    formats: [{
      currencySymbol: "$ ",
      name: "currency"
    }],
    slice: {
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        aggregation: "sum",
        format: "currency",
        uniqueName: "Price"
      }],
      rows: [{
        uniqueName: "Country"
      }]
    },
  }
});

function connectToRemoteJSON() {
  pivot.connectTo({
    filename: "https://cdn.flexmonster.com/data/retail-data.json"
    /* filename: "https://cdn.flexmonster.com/data/data.csv" */
  });
}

function connectToLocalJSON() {
  pivot.connectTo({
    type: "json",
    /* type: "csv", */
    browseForFile: true
  });
}

function connectToInlineJSON() {
  pivot.connectTo({
    data: getData()
  });
}

function getData() {
  return [{
    "Country": "Canada",
    "Product": "Bike",
    "Price": 68450
  }]
}