Flexmonster Pivot Table & Charts for React seamlessly integrates with Google Charts — a web service for data visualization. Using these tools together, you can create a well-designed interactive dashboard and embed it into any React application.
Dashboard analytics is a comprehensive instrument to assist in making data-driven decisions. With its help, end-users can highlight particular insights, find complex business solutions, and present the results.
Dashboards with React Flexmonster Pivot and Google Charts are very interactive: changes applied to the pivot grid configuration are reflected in charts in an instant. Because of this real-time behavior, end-users can look at the data from different points right away.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/lib/flexmonster.googlecharts.js";
import { Chart } from "react-google-charts";
class PivotTableDemo extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {};
this.colors = [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7",
];
}
render() {
return (
<>
<FlexmonsterReact.Pivot
ref={this.myRef}
height={350}
componentFolder="https://cdn.flexmonster.com/"
report={{
dataSource: {
type: "json",
filename: "data/demos/googlecharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Income",
formula: 'sum("Sales") * sum("Unit Price")',
individual: true,
caption: "Income",
format: "currency",
},
{
uniqueName: "Sales",
active: false,
format: "currency",
},
{
uniqueName: "Expenses",
format: "currency",
},
{
uniqueName: "Profit",
formula: 'sum("Income") - sum("Expenses")',
individual: true,
caption: "Profit",
format: "currency",
},
],
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
},
{
name: "currency",
currencySymbol: "$",
},
],
options: {
grid: {
showHeaders: false,
},
showAggregationLabels: false,
},
}}
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
reportcomplete={this.onReportComplete}
/>
<div class="demo-box">
<div class="demo-title">
Income, Expenses, and Profit
</div>
<div id="googlechart-column-container">
<Chart
chartType="ColumnChart"
data={this.state.googlechartsdataColumn}
options={{
fontName: "SERIF TYPEFACE",
chartArea: {
height: "90%",
},
height: 300,
colors: this.colors,
}}
legendToggle
/>
</div>
</div>
<div class="demo-box">
<div class="demo-title">
Top 5 Countries by Sales
</div>
<div id="googlechart-pie-container">
<Chart
chartType="PieChart"
data={this.state.googlechartsdataPie}
options={{
legend: {
position: "bottom",
},
height: 300,
pieSliceText: "none", // Remove text from pie slices
pieHole: 0.35,
chartArea: {
height: "85%",
top: 0,
},
pieSliceBorderColor: "none",
colors: this.colors,
}}
legendToggle
/>
</div>
</div>
</>
);
}
onReportComplete = () => {
this.myRef.current.flexmonster.off(this.reportComplete);
this.createColumnChart();
this.createPieChart();
};
createColumnChart = () => {
this.myRef.current.flexmonster.googlecharts.getData(
{
type: "column",
},
(chartConfig) =>
this.setState({ googlechartsdataColumn: chartConfig.data }),
(chartConfig) =>
this.setState({ googlechartsdataColumn: chartConfig.data }),
);
};
createPieChart = () => {
this.myRef.current.flexmonster.googlecharts.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Country",
filter: {
measure: {
uniqueName: "Sales",
},
query: {
top: 5,
},
},
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Sales",
},
],
},
},
(chartConfig) => this.setState({ googlechartsdataPie: chartConfig.data }),
(chartConfig) => this.setState({ googlechartsdataPie: chartConfig.data }),
);
};
}
export default PivotTableDemo;
.demo-box {
background-color: #fafafa;
position: relative;
padding: 20px 20px 20px 20px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
color: #555;
}
#pivot-container {
margin-bottom: 20px;
}
/** For the background color of Google Charts
* (for material design charts, it can't be changed via options, only via CSS)
*/
#googlechart-column-container > div > div > div > div > div > svg > rect {
fill: #fafafa !important;
}
#googlechart-pie-container > div > div > div > div > div > svg > rect {
fill: #fafafa !important;
}
/* For text on xAxis of the column chart */
#googlechart-column-container > div > div > div > div > div > svg > g:nth-child(n) > g:nth-child(n) > g > text {
color: #555;
fill: rgb(117, 117, 117);
font-family: Roboto;
font-size: 12px;
}
#googlechart-pie-container > div > div > div > div > div > svg > g:nth-child(n) > g:nth-child(n) > g > text {
color: #555;
fill: rgb(117, 117, 117);
font-family: Roboto;
font-size: 12px;
}
With our Integration with Google Charts guide, you can learn how to configure a dashboard with Flexmonster and Google Charts just in a few steps.
The process is straightforward: add the pivot table and charts to the web page and make both components communicate via the specially prepared charting connector.