Flexmonster - Load JSON and CSV files

Demos

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<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>

JavaScript

/*

-- DOES NOT WORK

https://admin-beta.panelpunches.com/reports/pivot/eyJhY2Nlc3NUb2tlbiI6ImtKR0J3eEZrVWZCdWNaU1dUV3orWmZCTmQvTjJjM3BFRlZGbVAxL3F2Tzg9IiwiZmlsdGVyIjp7InJlcG9ydEZpbHRlciI6eyJjb2RlIjoiMDAxODMyIn19LCJuYW1lIjoiT3JkZXJQaXZvdFJlcG9ydCJ9?484012854

-- DOES NOT WORK TOO
https://admin-beta.panelpunches.com/reports/pivot/eyJhY2Nlc3NUb2tlbiI6ImtKR0J3eEZrVWZCdWNaU1dUV3orWmZCTmQvTjJjM3BFRlZGbVAxL3F2Tzg9IiwiZmlsdGVyIjp7InJlcG9ydEZpbHRlciI6eyJjcmVhdGVkQXQiOnsiJGd0ZSI6Ijw8U1RBUlRPRk1PTlRIPj4iLCIkbHRlIjoiPDxFTkRPRk1PTlRIPj4ifX19LCJuYW1lIjoiT3JkZXJQaXZvdFJlcG9ydCJ9?484014708


--WORKING FINE
https://admin-beta.panelpunches.com/reports/pivot/eyJhY2Nlc3NUb2tlbiI6ImtKR0J3eEZrVWZCdWNaU1dUV3orWmZCTmQvTjJjM3BFRlZGbVAxL3F2Tzg9IiwiZmlsdGVyIjp7fSwibmFtZSI6Ik9yZGVyUGl2b3RSZXBvcnQifQ==?484013321


*/


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