Get Free Trial
List of all demos

JavaScript Pivot Table demo

Fast and powerful JavaScript pivot grid for data visualization and reporting.


    new Flexmonster({
      container: "#pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      width: "100%",
      height: 550,
      customizeCell: customizeCell,
      shareReportConnection: {
        url: "https://olap.flexmonster.com:9500"
      },
      beforetoolbarcreated: function(toolbar) {
        toolbar.showShareReportTab = true;
        toolbar.shareReportHandler = function() {
          toolbar.pivot.shareReport({
            url: "https://olap.flexmonster.com:9500"
          })
        }
      },
      toolbar: true,
      report: {
        "dataSource": {
          "type": "json",
          "filename": "https://cdn.flexmonster.com/data/retail-data.json",
          "mapping": {
            "Quantity": {
              "type": "number"
            },
            "Price": {
              "type": "number"
            },
            "Retail Category": {
              "type": "string"
            },
            "Sales": {
              "type": "number"
            },
            "Order Date": {
              "type": "year/quarter/month/day"
            },
            "Date": {
              "type": "date"
            },
            "Status": {
              "type": "string"
            },
            "Product Code": {
              "type": "string"
            },
            "Phone": {
              "type": "string"
            },
            "Country": {
              "type": "string",
              "folder": "Location"
            },
            "City": {
              "type": "string",
              "folder": "Location"
            },
            "CurrencyID": {
              "type": "property",
              "hierarchy": "Country"
            },
            "Contact Last Name": {
              "type": "string"
            },
            "Contact First Name": {
              "type": "string"
            },
            "Deal Size": {
              "type": "string"
            }
          }
        },
        "slice": {
          "rows": [{
              "uniqueName": "Country",
              "filter": {
                "members": [
                  "country.[australia]",
                  "country.[usa]",
                  "country.[japan]"
                ]
              }
            },
            {
              "uniqueName": "Status",
            }
          ],
          "columns": [{
              "uniqueName": "Order Date"
            },
            {
              "uniqueName": "[Measures]"
            }
          ],
          "measures": [{
            "uniqueName": "Price",
            "aggregation": "sum",
            "format": "-13w0a1w1c23j00"
          }],
          "sorting": {
            "column": {
              "type": "desc",
              "tuple": [],
              "measure": {
                "uniqueName": "Price",
                "aggregation": "sum"
              }
            }
          },
          "expands": {
            "rows": [{
              "tuple": [
                "country.[japan]"
              ]
            }]
          },
          "drills": {
            "columns": [{
              "tuple": [
                "order date.[2019]"
              ]
            }]
          },
          "flatSort": [{
            "uniqueName": "Price",
            "sort": "desc"
          }]
        },
    
        "conditions": [{
            "formula": "#value > 35000",
            "measure": "Price",
            "aggregation": "sum",
            "format": {
              "backgroundColor": "#00A45A",
              "color": "#FFFFFF",
              "fontFamily": "Arial",
              "fontSize": "12px"
            }
          },
          {
            "formula": "#value < 2000",
            "measure": "Price",
            "aggregation": "sum",
            "format": {
              "backgroundColor": "#df3800",
              "color": "#FFFFFF",
              "fontFamily": "Arial",
              "fontSize": "12px"
            }
          }
        ],
        "formats": [{
          "name": "-13w0a1w1c23j00",
          "thousandsSeparator": " ",
          "decimalSeparator": ".",
          "decimalPlaces": 0,
          "currencySymbol": "$",
          "positiveCurrencyFormat": "$1",
          "nullValue": "-",
          "textAlign": "right",
          "isPercent": false
        }]
      }
    });
    
    function customizeCell(cell, data) {
      if (data.hierarchy) {
        if (data.type == "header") {
          if (data.hierarchy.caption == "Country") {
            if (data.member) {
              if (data.member.properties) {
                var name = data.member.properties.CurrencyID;
                cell.addClass('fm-custom-cell');
                if (data.expanded) {
                  var flag = '<i class="fm-icon fm-expanded-icon" title="Click to collapse">' +
                    "<" + "/i>" + '<img class="flag-icon" src="https://cdn.flexmonster.com/flags/'
                    + name.toLowerCase() + '.svg">';
                } else {
                  var flag = '<i class="fm-icon fm-collapsed-icon" title="Click to expand">' +
                    "<" + "/i>" + '<img class="flag-icon" src="https://cdn.flexmonster.com/flags/' 
                    + name.toLowerCase() + '.svg">';
                }
                cell.text = `<div style="display:flex; align-items:center; 
                            font-size:12px; position:relative;">` +
                  flag + '<span style="margin-left: 2px; line-height: 16px;">'
                  + data.member.caption + "<" + "/span>" + "<" + "/div>";
              }
            }
          }
        }
      }
    }
    
    <div id="pivot-container"></div>
    
    .fm-custom-cell {
      display: flex !important;
      align-items: center !important;
      font-size: 12px !important;
    }
    
    .fm-custom-cell .flag-icon {
      width: 21px !important;
      height: 16px !important;
      margin-left: 0 !important;
      margin-right: 2px !important;
    }
    
    #fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-expanded .fm-expanded-icon::before,
    #fm-pivot-view .fm-grid-layout .fm-custom-cell.fm-collapsed .fm-collapsed-icon::before {
      top: -2px;
      height: 16px;
    }
    

    With Flexmonster as a reporting tool, you can display the data to your end-users and let them create interactive reports based on the underlying data source: CSV, JSON, Elasticsearch, Microsoft Analysis Services, MongoDB, SQL databases (MySQL, PostgreSQL, Oracle, etc) or other custom data sources.

    Flexmonster seamlessly integrates with all popular client-side frameworks, server-side technologies, and programming languages. Check out the full list of available pivot table integrations.

    Our web pivot control offers a lot of advanced reporting features out of the box:

    • Data summarization
    • Filtering
    • Sorting
    • Grouping

    You and your end-users can control how the data records are arranged on the grid using the pivot table layouts: classic, compact, or flat.

    Moreover, the results of data analysis and reporting can be printed or exported to the files of the most common formats: PDF, CSV, Excel, HTML, or PNG. As a developer, you can define how an end-user can export their reports: to the local file system or a server.