Flexmonster Pivot Charts — an alternative way to visualize aggregated data and highlight specific information.
const pivot = new Flexmonster({
container: "#pivot-container",
componentFolder: "https://cdn.flexmonster.com/",
height: 500,
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,
}, {
name: "currency",
currencySymbol: "$",
decimalPlaces: 2,
}]
},
});
function showGrid() {
let 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,
caption: "Revenue",
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 = [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 0,
}, {
name: "currency",
currencySymbol: "$",
decimalPlaces: 2,
}];
pivot.setReport(pivotReport);
}
function showColumnChart(type) {
let pivotReport = pivot.getReport();
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",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: "column",
},
};
pivot.setReport(pivotReport);
}
function showLineChart(type) {
let pivotReport = pivot.getReport();
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",
},
},
},
};
pivotReport.options = {
viewType: "charts",
chart: {
type: "line",
},
};
pivot.setReport(pivotReport);
}
function showStackedColumn(type) {
let pivotReport = pivot.getReport();
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",
},
},
},
};
pivotReport.options = {
viewType: "charts",
chart: {
type: "stacked_column",
},
};
pivot.setReport(pivotReport);
}
function showBarChart(type) {
let pivotReport = pivot.getReport();
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",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: "bar_h",
},
};
pivot.setReport(pivotReport);
}
function showPieChart(type) {
let pivotReport = pivot.getReport();
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",
caption: "Revenue",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: "pie",
},
};
pivot.setReport(pivotReport);
}
function showScatterChart(type) {
let pivotReport = pivot.getReport();
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",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: "scatter",
},
};
pivot.setReport(pivotReport);
}
function showColumnLineChart(type) {
let pivotReport = pivot.getReport();
pivotReport.slice = {
rows: [
{
uniqueName: "Order Date.Year",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Orders",
aggregation: "sum",
},
{
uniqueName: "Revenue",
formula: 'sum("Amount") * sum("Price")',
individual: true,
caption: "Revenue",
format: "currency",
},
],
};
pivotReport.options = {
viewType: "charts",
chart: {
type: "column_line",
},
};
pivotReport.formats = [{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 0,
}, {
name: "currency",
currencySymbol: "$",
decimalPlaces: 2,
}]
pivot.setReport(pivotReport);
}
<button onclick="showGrid()">Grid</button>
<button onclick="showColumnChart('column')">Column</button>
<button onclick="showBarChart('bar_h')">Bar</button>
<button onclick="showLineChart('line')">Line</button>
<button onclick="showScatterChart('scatter')">Scatter</button>
<button onclick="showPieChart('pie')">Pie</button>
<button onclick="showColumnLineChart('column_line')">Combo</button>
<button onclick="showStackedColumn('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's 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 charts 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 charts and grid views via UI or API calls.