Fast and powerful JavaScript pivot grid for data visualization and reporting.
new Flexmonster({ container: "#pivot-container", componentFolder: "https://cdn.flexmonster.com/", height: 550, toolbar: true, report: { dataSource: { type: "json", filename: "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, }, ], }, customizeCell: customizeCell, shareReportConnection: { url: "https://olap.flexmonster.com:9500", }, beforetoolbarcreated: function (toolbar) { toolbar.showShareReportTab = true; }, }); function customizeCell(cell, data) { if (data.type === "header" && data.hierarchy?.caption === "Country" && data.member?.properties) { const name = data.member.properties.CurrencyID; cell.addClass("fm-custom-cell"); let flag; if (data.expanded) { 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 { 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:
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.