How do I load a JSON file into a JavaScript pivot table?

Pass the file path to the dataSource object in your Flexmonster report configuration: dataSource: { type: 'json', filename: 'https://example.com/data.json' }. Flexmonster will fetch, parse, and display the data automatically. You can load files from a local disk, a remote URL, or a server-side script.

How do I load a CSV file into a JavaScript pivot table?

Use the same dataSource pattern with type 'csv': dataSource: { type: 'csv', filename: 'https://example.com/data.csv' }. You can also specify a mapping object to control how each field is interpreted (string, number, date, etc.).

What is the maximum CSV or JSON file size Flexmonster can handle?

Flexmonster handles files up to approximately 100 MB client-side, depending on the user's browser and device. For datasets larger than 100 MB or up to 1 GB+, use Flexmonster Data Server — a server-side aggregation tool that preprocesses data and streams it to the pivot table in a ready-to-display format.

Load JSON and CSV files

Build an interactive report based on the JSON or CSV data source.

Edit in JSfiddle Get Free Trial

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/happiness.csv",
      mapping: {
        "Year": {
          type: "string"
        }
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Region",
        },
        {
          uniqueName: "Country or region",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
        {
          uniqueName: "Year",
        },
      ],
      measures: [
        {
          uniqueName: "Score",
          aggregation: "median",
          grandTotalCaption: "Average Happiness",
        },
      ],
    },
    conditions: [
      {
        formula: "AND(#value > 7.3, #value < 10)",
        format: {
          backgroundColor: "#f0c63e",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
      {
        formula: "AND(#value > 0, #value < 4.5)",
        format: {
          backgroundColor: "#f29c8d",
          color: "#000000",
          fontFamily: "Arial",
          fontSize: "12px",
        },
      },
    ],
    formats: [
      {
        name: "",
        decimalPlaces: 2,
      },
    ],
  },
  customizeCell: customizeCell,
});

function onOpenLocalCSV() {
  pivot.connectTo({
    type: "csv",
    browseForFile: true,
  });
}

function onLoadRemoteCSV() {
  const filename = prompt("Open remote CSV", "https://cdn.flexmonster.com/data/data.csv");
  if (filename != null) {
    pivot.connectTo({
      type: "csv",
      filename: filename,
    });
  }
}

function onOpenLocalJSON() {
  pivot.connectTo({
    type: "json",
    browseForFile: true,
  });
}

function onLoadRemoteJSON() {
  const filename = prompt("Open remote JSON", "https://cdn.flexmonster.com/data/data.json");
  if (filename != null) {
    pivot.connectTo({
      type: "json",
      filename: filename,
    });
  }
}

function customizeCell(cell, data) {
  if (data.isGrandTotalColumn) {
    if (data.value < 5 && data.value >= 0) {
      cell.text = data.value.toPrecision(3) + " ☹️";
    } else if (data.value >= 5 && data.value < 7) {
      cell.text = data.value.toPrecision(3) + " 🙂";
    } else if (data.value >= 7 && data.value < 10) {
      cell.text = data.value.toPrecision(3) + " 😃";
    }
  }
}

<button onclick="onOpenLocalCSV()">Open local CSV</button>
<button onclick="onLoadRemoteCSV()">Load remote CSV</button>
<button onclick="onOpenLocalJSON()">Open local JSON</button>
<button onclick="onLoadRemoteJSON()">Load remote JSON</button>

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

Connect Flexmonster Pivot to your local, remote, or server-side generated JSON data. Once the data is loaded, you are ready to set up a new report on the web pivot table.

Also, you can connect to local or remote static CSV files or CSV data generated by a server-side script. After connecting to CSV, create a new analytical report.

Moreover, you can control how the fields are displayed on the grid using the mapping. It also gives the power to control how the fields are interpreted by the reporting tool.

Flexmonster is optimized to load and process your data extremely fast on the client side. But if the size of your data set reaches 100 MB or more, we recommend using Flexmonster Data Server — a server-side solution for data aggregation that will boost your reporting in times. It takes minimum time to set it up and to kick-start pivot table reporting.

Elasticsearch One million rows

Prev Next

Frequently asked questions

Can't find your answer here?
Visit the FAQ page

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Changes to Flexmonster Software License Agreement

Load JSON and CSV files

For the best experience

See our live examples

Frequently asked questions