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.