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