Load JSON and CSV files

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

const pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      type: "csv",
      filename: "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/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 mapping. The Mapping Object 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 1GB or more, we recommend using Flexmonster Data Server — the server-side solution for data pre-processing 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

Load JSON and CSV files

See our live examples