A high-performance web pivot table and charts component designed for processing and analyzing large datasets. Built for enterprise environments, this data visualization library offers seamless integration for complex analytical workflows.
Play with the demo on a larger screen: save this link for later or watch the video review now.
new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 550,
toolbar: true,
report: {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/retail-data-2024.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: "currency",
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Price",
aggregation: "sum",
},
},
},
expands: {
rows: [
{
tuple: ["country.[japan]"],
},
],
},
drills: {
columns: [
{
tuple: ["order date.[2024]"],
},
],
},
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: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
nullValue: "-"
},
{
name: "currency",
currencySymbol: "$"
}
]
},
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;
}
Flexmonster is built to visualize large data (1 GB+) and millions of rows fast. By optimizing memory handling, Flexmonster keeps your workspace lag-free, even when processing massive volumes of data. It supports a wide variety of data sources, enabling seamless integration and rapid data processing for any tech stack:
Flexmonster provides a comprehensive suite of Excel-like analytical tools that allow end-users to perform complex data operations directly in the browser:
The results of data analysis and reporting can be either printed or exported to files of the most common formats: PDF, CSV, Excel, HTML, or PNG. Developers can choose to download save files locally or send them directly to a server. To resume work later, save the report as JSON or share it via a link.
Effortlessly add the pivot grid library to your web project by following our comprehensive how-to guide or watching our pivot table integration video tutorial.
Flexmonster pivot grid seamlessly integrates with all popular client-side frameworks (Angular, React, Vue, Blazor, etc.), server-side technologies, and programming languages. Check out the full list of available pivot table integrations.
Flexmonster is a professional JavaScript pivot table component engineered for web-based data visualization. It embeds seamlessly into any website, CRM, ERP, or BI platform, providing end-users with interactive, real-time data analysis and reporting capabilities. With a fully customizable UI and extensive API, you can control everything from component styling to localization, ensuring it aligns perfectly with your application’s requirements.