Flexmonster - Load JSON and CSV files

Demos

by Flexmonster Pivot Table

HTML

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

<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>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

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({
     ...