Using the stream loader for JSON

Data source

by Flexmonster Pivot Table

HTML

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

<div id="pivotContainer"></div>

CSS

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

JavaScript

const pivot = new Flexmonster({
  container: "pivotContainer",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/coffee-shop-sales.json", // 50MB sized file
      useStreamLoader: true, // Toggle this option to see the data loading speed,
      mapping: {
        "product_category": {
          caption: "Product category"
        },
        "product_detail": {
          caption: "Product details"
        },
        "product_id": {
          caption: "Product ID",
          type: "number",
          aggregations: ["count", "distinct count"]
        },
        "product_type": {
          caption: "Product type"
        },
        "Revenue": {
          type: "number"
        },
        "store_id": {
          caption: "Store ID",
          type: "number",
          aggregations: ["count", "distinct count"]
        },
        "store_location": {
          caption: "Store location"
        },
        "transaction_date": {
          caption: "Transaction date",
          type: "date string"
        },
        "transaction_time": {
          caption: "Transaction time"
        },
        "transaction_id": {
          caption: "Transaction ID",
          type: "number",
          aggregations: ["count", "distinct count"]
        },
        "transaction_qty": {
          caption: "Quantity",
          type: "number"
        },
        "unit_price": {
          caption: "Unit price",
          type: "number"
        },
        "Weekday.1": {
          caption: "Weekday",
          type: "weekday"
        },
        "Hour" : {
          visible: false
        },
        "Month" : {
          visible: false
        },
        "Month.1" : {
          visible: false
        },
        "Weekday" : {
          visible: false
        }
      }
    }
  }
});