Flexmonster Pivot Table & Charts integrates with Highcharts — the rock-solid and flexible charting library — in a few steps.
Smart business analytics has never been as engaging and straightforward as reporting with Flexmonster pivot grid for React and Highcharts. Add a data dashboard to your report and see how an essential tool for monitoring business objectives and performance will boost your analytics.
All the vital metrics and KPIs can be seen at a glance when displayed on a dashboard. To have another view of your data, slice & dice it on the grid and reveal the insights via the charts.
import React, { Component } from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/lib/flexmonster.highcharts.js";
import Highcharts from "highcharts";
class PivotTableDemo extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return (
<div className="App">
<FlexmonsterReact.Pivot
ref={this.myRef}
componentFolder="https://cdn.flexmonster.com/"
height={300}
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
report={{
dataSource: {
type: "json",
filename: "data/demos/highcharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Requests",
aggregation: "sum",
},
{
uniqueName: "Answered Calls",
aggregation: "sum",
},
{
uniqueName: "Revenue",
aggregation: "sum",
format: "currency",
active: false,
},
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: {
uniqueName: "Answered Calls",
aggregation: "sum",
},
},
},
},
formats: [
{
name: "",
thousandsSeparator: ",",
},
{
name: "currency",
decimalSeparator: ".",
decimalPlaces: 2,
currencySymbol: "$",
},
],
options: {
showHeaders: false,
},
}}
reportcomplete={this.reportComplete}
/>
<div class="demo-box">
<div class="demo-title">
<strong>Requests vs Answered Calls</strong>
</div>
<div id="highcharts-container"></div>
</div>
<div class="demo-box">
<div class="demo-title">
<strong>Revenue vs Support Cost</strong>
</div>
<div id="highcharts-column-container"></div>
</div>
<div class="demo-box">
<div class="demo-title">
<strong>Customer Satisfaction</strong>
</div>
<div id="highcharts-pie-container"></div>
</div>
</div>
);
}
reportComplete = () => {
this.myRef.current.flexmonster.off(this.reportComplete);
this.setGlobalChartsOptions();
this.createLineChart();
this.createColumnChart();
this.createPieChart();
};
setGlobalChartsOptions() {
Highcharts.setOptions({
colors: [
"#4cbf8b",
"#e8734c",
"#ffcd4c",
"#9875e3",
"#4c9eff",
"#8acfc3",
"#cd97e6",
"#f1d34c",
"#65d2e7",
],
lang: {
thousandsSep: ",",
},
chart: {
plotBackgroundColor: "#fafafa",
backgroundColor: "#fafafa",
style: {
fontFamily: "Serif Typeface",
},
},
});
}
createLineChart() {
this.myRef.current.flexmonster.highcharts.getData(
{
type: "line",
},
this.drawLineChart,
this.updateLineChart,
);
}
drawLineChart(chartData) {
chartData.xAxis.title.enabled = false;
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-container", chartData);
}
updateLineChart(chartData) {
this.drawLineChart(chartData);
}
createColumnChart() {
this.myRef.current.flexmonster.highcharts.getData(
{
type: "column",
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Revenue",
aggregation: "sum",
},
{
uniqueName: "Support Cost",
aggregation: "sum",
},
],
},
},
this.drawColumnChart,
this.updateColumnChart,
);
}
drawColumnChart(chartData) {
let currencyFormat = rawData.meta.formats.find(
(format) => format.name == "currency",
);
chartData.xAxis.title.enabled = false;
chartData.legend = {
enabled: false,
};
if (chartData.yAxis == undefined) chartData.yAxis = {};
for (let i = 0; i < chartData.yAxis.length; i++) {
chartData.yAxis[i].labels = {
format: pivot.highcharts.getAxisFormat(currencyFormat),
};
}
for (let i = 0; i < chartData.series.length; i++) {
chartData.series[i].tooltip = {
pointFormat:
"{series.name}: <b>" +
pivot.highcharts.getPointYFormat(currencyFormat) +
"</b><br/>",
};
}
chartData.xAxis.title.enabled = false;
chartData.legend = {
enabled: false,
};
chartData.xAxis.type = "datetime";
Highcharts.chart("highcharts-column-container", chartData);
}
updateColumnChart(chartData) {
// Here you can add your own logic for updating the chart
}
createPieChart() {
this.myRef.current.flexmonster.highcharts.getData(
{
type: "pie",
slice: {
rows: [
{
uniqueName: "Customer Satisfaction",
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Answered Calls",
aggregation: "sum",
},
],
},
},
this.drawPieChart,
this.updatePieChart,
);
}
drawPieChart(chartData) {
Highcharts.chart("highcharts-pie-container", chartData);
}
updatePieChart(chartData) {
// Here you can add your own logic for updating the chart
}
}
export default PivotTableDemo;
.demo-box {
background-color: #fafafa;
position: relative;
padding: 40px 30px 30px 30px;
border: 1px solid #e9e9e9;
margin-bottom: 20px;
margin-top: 40px;
}
.demo-title {
font-size: 18px;
margin-bottom: 30px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #555;
}
Learn how to create a ready-to-use React dashboard equipped with interactive features of the pivot table and charts by following the step-by-step integration with Highcharts guide.