Flexmonster Software License Agreement (“Agreement”) has been revised and is effective as of January 8, 2025.
The following modifications were made:
The modified version of Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after January 8, 2025, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license or maintenance after the effective date of these modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
Flexmonster Pivot Charts — an approach to the visualization of aggregated data from the grid.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
class PivotTableDemo extends React.Component {
render() {
return (
<>
<button onClick={this.showGrid}>Grid</button>
<button onClick={() => this.showColumnChart("column")}>Column</button>
<button onClick={() => this.showBarChart("bar_h")}>Bar</button>
<button onClick={() => this.showLineChart("line")}>Line</button>
<button onClick={() => this.showScatterChart("scatter")}>
Scatter
</button>
<button onClick={() => this.showPieChart("pie")}>Pie</button>
<button onClick={() => this.showColumnLineChart("column_line")}>
Combo
</button>
<button onClick={() => this.showStackedColumn("stacked_column")}>
Stacked
</button>
<div className="App">
<FlexmonsterReact.Pivot
ref="pivot"
componentFolder="https://cdn.flexmonster.com/"
height={500}
report={{
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/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,
},
],
}}
/>
</div>
</>
);
}
showGrid = () => {
let pivotReport = this.refs.pivot.flexmonster.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,
},
];
this.refs.pivot.flexmonster.setReport(pivotReport);
};
showColumnChart = (type) => {
let pivotReport = this.refs.pivot.flexmonster.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: type,
},
};
this.refs.pivot.flexmonster.setReport(pivotReport);
};
showLineChart = (type) => {
let pivotReport = this.refs.pivot.flexmonster.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: type,
},
};
this.refs.pivot.flexmonster.setReport(pivotReport);
};
showStackedColumn = (type) => {
let pivotReport = this.refs.pivot.flexmonster.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: type,
},
};
this.refs.pivot.flexmonster.setReport(pivotReport);
};
showBarChart = (type) => {
let pivotReport = this.refs.pivot.flexmonster.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: type,
},
};
this.refs.pivot.flexmonster.setReport(pivotReport);
};
showPieChart = (type) => {
let pivotReport = this.refs.pivot.flexmonster.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: type,
},
};
this.refs.pivot.flexmonster.setReport(pivotReport);
};
showScatterChart = (type) => {
let pivotReport = this.refs.pivot.flexmonster.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: type,
},
};
this.refs.pivot.flexmonster.setReport(pivotReport);
};
showColumnLineChart = (type) => {
let pivotReport = this.refs.pivot.flexmonster.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: type,
},
};
pivotReport.formats = [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 0,
},
{
name: "currency",
currencySymbol: "$",
decimalPlaces: 2,
},
];
this.refs.pivot.flexmonster.setReport(pivotReport);
};
}
export default PivotTableDemo;#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;
}End-users can filter, expand, collapse, drill up, and drill down the data hierarchies, drill through the chart segments, and control the legend elements. Embedding interactive charts into your React application will just take a few simple steps with the helpful Flexmonster Pivot Charts guide.
Our Flexmonster React pivot component supports the following chart types: column chart, bar chart, line chart, scatter chart, pie chart, stacked column chart, and combined column chart.
Also, you can jump from the grid view to the built-in charts with just one click on the Toolbar. Alternatively, you can use API calls to create the needed functionality.