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.
Play with the demo on a larger screen: save this link for later or watch the video review now.
Dashboard analytics is a comprehensive instrument for 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 { useRef, useState, useEffect } from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";
import "flexmonster/lib/flexmonster.googlecharts.js";
function PivotTableDemo() {
let didInit = false;
const pivotRef = useRef();
const [googleChartsLoaded, setGoogleChartsLoaded] = useState(false);
const [fmReportComplete, setFMReportComplete] = useState(false);
const colors = [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7"
];
const report = {
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/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: "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
}
};
useEffect(() => {
if (!didInit) {
google.charts.load("current", {
packages: ["corechart", "bar"]
});
google.charts.setOnLoadCallback(() => setGoogleChartsLoaded(true));
}
if (googleChartsLoaded && fmReportComplete) {
createColumnChart();
createPieChart();
}
}, [googleChartsLoaded, fmReportComplete]);
const onReportComplete = () => {
setFMReportComplete(true);
pivotRef.current.flexmonster.off("reportcomplete");
};
const createColumnChart = () => {
pivotRef.current.flexmonster.googlecharts.getData(
{
type: "column"
},
drawColumnChart,
drawColumnChart
);
};
const drawColumnChart = (chartConfig, rawData) => {
const data = google.visualization.arrayToDataTable(chartConfig.data);
const formatter = new google.visualization.NumberFormat(
pivotRef.current.flexmonster.googlecharts.getNumberFormat(rawData.meta.formats[0])
);
for (let i = 0; i < data.getNumberOfColumns(); i++) {
if (data.getColumnType(i) === "number") {
formatter.format(data, i);
}
}
const options = {
fontName: "SERIF TYPEFACE",
chartArea: {
height: "90%"
},
height: 300,
colors: colors
};
const columnChartContainer = document.getElementById("googlechart-column-container");
const chart = new google.charts.Bar(columnChartContainer);
chart.draw(data, options);
};
const createPieChart = () => {
pivotRef.current.flexmonster.googlecharts.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Country",
filter: {
measure: {
uniqueName: "Sales"
},
query: {
top: 5
}
}
}
],
columns: [
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Sales",
format: "currency"
}
]
}
},
drawPieChart,
drawPieChart
);
};
function drawPieChart(chartConfig, rawData) {
const data = google.visualization.arrayToDataTable(chartConfig.data);
const formatter = new google.visualization.NumberFormat(
pivotRef.current.flexmonster.googlecharts.getNumberFormat(rawData.meta.formats[0])
);
for (let i = 0; i < data.getNumberOfColumns(); i++) {
if (data.getColumnType(i) === "number") {
formatter.format(data, i);
}
}
const options = {
legend: {
position: "bottom"
},
height: 300,
pieSliceText: "none", // Remove text from pie slices
pieHole: 0.35,
chartArea: {
height: "85%",
top: 0
},
pieSliceBorderColor: "none",
colors: colors
};
const pieChartContainer = document.getElementById("googlechart-pie-container");
const chart = new google.visualization.PieChart(pieChartContainer);
chart.draw(data, options);
}
return (
<>
<FlexmonsterReact.Pivot
ref={pivotRef}
height={400}
report={report}
reportcomplete={onReportComplete}
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
/>
<div className="demo-box">
<div className="demo-title">Income, Expenses, and Profit</div>
<div id="googlechart-column-container"></div>
</div>
<div className="demo-box">
<div className="demo-title">Top 5 Countries by Sales</div>
<div id="googlechart-pie-container"></div>
</div>
</>
);
}
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 > svg > g > rect:nth-child(1) {
fill: #fafafa !important;
}
#googlechart-pie-container > div > div > div > svg > rect {
fill: #fafafa !important;
}
/* For the bottom line on the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(3) > line:nth-child(1) {
stroke: #e0e0e0;
}
/* For text on xAxis of the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(6) > text {
color: #555;
fill: rgb(117, 117, 117);
font-family: Roboto;
font-size: 12px;
}
/* For text on the legend of the pie chart */
#googlechart-pie-container > 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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flexmonster & Google Charts Demo</title>
<!-- Adding Google Charts -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
With our Integration with Google Charts guide, you can learn how to configure a dashboard with Flexmonster and Google Charts in just 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.