Connecting to a local JSON or CSV file

Data source

by Flexmonster Pivot Table

HTML

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

<div>
  <h2>Connecting to a local JSON/CSV file</h2>

  <p>This example shows how to connect to local JSON/CSV data.</p>
  <p>
    To load a local JSON/CSV file, set the
    <a
      href="https://www.flexmonster.com/api/data-source-object/#browseforfile"
      target="_blank"
    >browseForFile</a> property to <code>true</code> (line 9 in the JavaScript box). 
    Also, notice that the <code>type</code> must be defined explicitly (line 7 in the
    JavaScript box).
  </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>

<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: {
    dataSource: {
      type: "json", 
      /* type: "csv", */ 
      browseForFile: true
    }
  }
});