Flexmonster Pivot Charts — an alternative way to visualize aggregated data and highlight specific information.
Play with the demo on a larger screen: save this link for later or watch the video review now.
const pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
report: {
dataSource: {
type: "json",
filename: "data/demos/pivot-charts-demo-data.json"
},
options: {
viewType: "charts",
chart: {
type: "column"
}
},
slice: {
rows: [
{
uniqueName: "Order Date.Month"
}
],
columns: [
{
uniqueName: "City",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum"
},
query: {
top: 5
}
}
},
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum"
}
]
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 0
}
]
}
});
function switchChart(type) {
const pivotReport = pivot.getReport();
pivotReport.options = {
viewType: "charts",
chart: {
type: type
}
};
switch (type) {
case "column":
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Month"
}
],
columns: [
{
uniqueName: "City",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum"
},
query: {
top: 5
}
}
},
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum"
}
]
};
break;
case "bar_h":
pivotReport.slice = {
rows: [
{
uniqueName: "Referring Site",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum"
},
query: {
top: 6
}
}
}
],
columns: [
{
uniqueName: "[Measures]"
},
{
uniqueName: "Payment Type",
filter: {
members: ["payment type.[debit card]", "payment type.[invoice]"]
}
}
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum"
}
]
};
break;
case "line":
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Year"
}
],
columns: [
{
uniqueName: "[Measures]"
},
{
uniqueName: "Referring Site",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum"
},
query: {
top: 2
}
}
}
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum"
}
],
sorting: {
row: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Orders",
aggregation: "sum"
}
}
}
};
break;
case "scatter":
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Year"
}
],
columns: [
{
uniqueName: "City",
filter: {
measure: {
uniqueName: "Orders",
aggregation: "sum"
},
query: {
top: 3
}
}
},
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum"
}
]
};
break;
case "pie":
pivotReport.slice = {
rows: [
{
uniqueName: "City",
filter: {
measure: {
uniqueName: "Revenue"
},
query: {
top: 5
}
}
}
],
columns: [
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Revenue",
formula: "sum('Amount') * sum('Price')",
individual: true,
format: "currency"
}
]
};
pivotReport.formats.push({
name: "currency",
currencySymbol: "$",
decimalPlaces: 2
});
break;
case "column_line":
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Year"
}
],
columns: [
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum"
},
{
uniqueName: "Revenue",
formula: "sum('Amount') * sum('Price')",
individual: true,
format: "currency"
}
]
};
pivotReport.formats.push({
name: "currency",
currencySymbol: "$",
decimalPlaces: 2
});
break;
case "stacked_column":
pivotReport.slice = {
rows: [
{
uniqueName: "Payment Type",
filter: {
measure: {
uniqueName: "Orders"
},
query: {
top: 3
}
}
}
],
columns: [
{
uniqueName: "Referring Site",
filter: {
measure: {
uniqueName: "Orders"
},
query: {
top: 3
}
}
},
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum"
}
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Orders",
aggregation: "sum"
}
}
}
};
break;
default:
break;
}
pivot.setReport(pivotReport);
}
function showGrid() {
const pivotReport = pivot.getReport();
pivotReport.slice = {
reportFilters: [
{
uniqueName: "Order Date.Year"
},
{
uniqueName: "Order Date.Month"
},
{
uniqueName: "Order Date.Day"
}
],
rows: [
{
uniqueName: "Payment Type"
}
],
columns: [
{
uniqueName: "[Measures]"
},
{
uniqueName: "Referring Site"
}
],
measures: [
{
uniqueName: "Revenue",
formula: "sum('Amount') * sum('Price')",
individual: true,
format: "currency"
}
]
};
pivotReport.conditions = [
{
formula: "#value < 45000",
measure: "Revenue",
format: {
backgroundColor: "#df3800",
color: "#fff",
fontFamily: "Arial",
fontSize: "12px"
}
},
{
formula: "#value > 400000",
measure: "Revenue",
format: {
backgroundColor: "#00a45a",
color: "#fff",
fontFamily: "Arial",
fontSize: "12px"
}
}
];
pivotReport.options = {
viewType: "grid"
};
pivotReport.formats.push({
name: "currency",
currencySymbol: "$",
decimalPlaces: 2
});
pivot.setReport(pivotReport);
}
<button onclick="showGrid()">Grid</button>
<button onclick="switchChart('column')">Column</button>
<button onclick="switchChart('bar_h')">Bar</button>
<button onclick="switchChart('line')">Line</button>
<button onclick="switchChart('scatter')">Scatter</button>
<button onclick="switchChart('pie')">Pie</button>
<button onclick="switchChart('column_line')">Combo</button>
<button onclick="switchChart('stacked_column')">Stacked</button>
<div id="pivot-container"></div>
#fm-pivot-view .fm-chart .fm-circle {
r: 8;
}
/* Chart style */
.fm-charts-color-1 {
fill: rgb(0, 164, 90) !important;
}
.fm-charts-color-2 {
fill: rgb(223, 56, 0) !important;
}
.fm-charts-color-3 {
fill: rgb(255, 184, 0) !important;
}
.fm-charts-color-4 {
fill: rgb(109, 59, 216) !important;
}
.fm-charts-color-5 {
fill: rgb(0, 117, 255) !important;
}
#fm-pivot-view .fm-bar,
#fm-pivot-view .fm-charts-view .fm-chart-legend ul li .fm-icon-display,
#fm-pivot-view .fm-line,
#fm-pivot-view .fm-arc path,
#fm-pivot-view .fm-bar-stack,
#fm-pivot-view .fm-scatter-point {
opacity: 70% !important;
}
#fm-yAxis-label,
#fm-xAxis > text,
#fm-yAxis > text {
display: none;
}
Their core feature is interactivity: end-users can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart segments, and control the legend's elements.
The web pivot charts are easily understood with convenient tooltips and legend information.
Our web component supports the following chart types: column chart, bar chart, line chart, scatter chart, pie chart, stacked column chart, and a combination of column and line chart.
Moreover, our drillable pivot charts are built-in — end-users can toggle between chart and grid views via UI or using API calls.