Flexmonster Pivot Table & Charts seamlessly integrates with FusionCharts — a data visualization library that offers up-to-date interactive charts.
A web-based dashboard created with the Flexmonster pivot grid for React and FusionCharts is a perfect self-service analytics tool that can help decision-makers within any company. You can build the dashboard according to your business logic and highlight all vital metrics and KPIs.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/lib/flexmonster.fusioncharts.js";
// Importing FusionCharts
import ReactFC from "react-fusioncharts";
import FusionCharts from "fusioncharts";
import Charts from "fusioncharts/fusioncharts.charts";
import Maps from "fusioncharts/fusioncharts.maps";
import WorldWithCountries from "fusionmaps/maps/fusioncharts.worldwithcountries";
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
ReactFC.fcRoot(FusionCharts, Charts, Maps, WorldWithCountries, FusionTheme);
class PivotTableDemo extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.myRef = React.createRef();
this.backgroundColor = "#fafafa";
this.baseFontSize = "15";
this.baseFontColor = "#888";
this.chartPalette =
"4cbf8b, ffcd4c, e8734c, 9875e3, 4c9eff, 8acfc3, cd97e6, f1d34c, 65d2e7";
this.mapType = "maps/worldwithcountries";
this.doughnutType = "doughnut2d";
this.columnType = "mscolumn2d";
}
render() {
return (
<>
<FlexmonsterReact.Pivot
ref={this.myRef}
componentFolder="https://cdn.flexmonster.com/"
height={440}
licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
report={{
dataSource: {
type: "json",
filename: "https://cdn.flexmonster.com/data/demos/fusioncharts-demo-data.json",
},
slice: {
rows: [
{
uniqueName: "Country",
},
],
columns: [
{
uniqueName: "Traffic",
},
{
uniqueName: "Source",
},
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Revenue",
formula: 'sum("Sales") * sum("Purchase Cost")',
individual: true,
caption: "Revenue",
format: "currency",
},
{
uniqueName: "Conversion Rate",
formula: 'sum("Leads") / sum("Clicks") ',
individual: true,
caption: "Conversion Rate",
active: false,
},
],
sorting: {
column: {
type: "desc",
tuple: ["Traffic.[Referral]"],
measure: {
uniqueName: "Revenue",
aggregation: "none",
},
},
},
expands: {
rows: [],
columns: [
{
tuple: ["Traffic.[Organic]"],
},
{
tuple: ["Traffic.[Paid]"],
},
],
},
},
options: {
grid: {
showHeaders: false,
},
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2,
},
{
name: "currency",
currencySymbol: "$",
},
],
}}
reportcomplete={this.reportComplete}
/>
<div className="demo-box">
<div className="demo-title">
Top Countries by Revenue
</div>
<ReactFC {...this.state.mapChartConfigs} />
</div>
<div className="demo-box">
<div className="demo-title">
Top Traffic Sources
</div>
<ReactFC {...this.state.doughnutChartConfigs} />
</div>
<div className="demo-box">
<div className="demo-title">
Revenue per Month
</div>
<ReactFC {...this.state.columnChartConfigs} />
</div>
</>
);
}
reportComplete = () => {
this.myRef.current.flexmonster.off(this.reportComplete);
this.createMapChart();
this.createDoughnutChart();
this.createColumnChart();
};
createMapChart = () => {
this.myRef.current.flexmonster.fusioncharts.getData(
{
type: this.mapType,
},
this.drawMapChart,
this.drawMapChart,
);
};
drawMapChart = (chartConfig) => {
chartConfig.chart.theme = "fusion";
chartConfig.chart.showLabels = "0";
chartConfig.chart.bgColor = this.backgroundColor;
chartConfig.chart.entityBorderColor = this.backgroundColor;
chartConfig.chart.entityBorderThickness = "1";
chartConfig.chart.entityFillHoverColor = "#d00000";
chartConfig.chart.nullEntityColor = "#bbbbbb";
chartConfig.chart.nullEntityAlpha = "50";
chartConfig.chart.hoverOnNull = "0";
chartConfig.chart.legendPosition = "top";
chartConfig.colorrange = {
minvalue: chartConfig.extradata.minValue,
code: "#8acfc3",
gradient: "1",
color: [
{
minvalue: chartConfig.extradata.minValue,
maxvalue: 250000,
code: "#4cbf8b",
},
{
minvalue: 250000,
maxvalue: 400000,
code: "#ffcd4c",
},
{
minvalue: 400000,
maxvalue: 550000,
code: "#faa307",
},
{
minvalue: 550000,
maxvalue: 700000,
code: "#f48c06",
},
{
minvalue: 700000,
maxvalue: chartConfig.extradata.maxValue,
code: "#e85d04",
},
],
};
delete chartConfig.extradata;
const mapChartConfigs = {
type: this.mapType,
width: "100%",
height: 400,
dataFormat: "json",
dataSource: chartConfig,
};
this.setState({ mapChartConfigs: mapChartConfigs });
};
createDoughnutChart = () => {
this.myRef.current.flexmonster.fusioncharts.getData(
{
type: this.doughnutType,
slice: {
rows: [
{
uniqueName: "Source",
filter: {
exclude: ["LinkedIn", "Medium", "Bing"],
},
},
],
columns: [
{
uniqueName: "[Measures]",
},
],
measures: [
{
uniqueName: "Users",
aggregation: "sum",
},
],
},
},
this.drawDoughnutChart,
this.drawDoughnutChart,
);
};
drawDoughnutChart = (chartConfig) => {
chartConfig.chart.theme = "fusion";
chartConfig.chart.baseFontSize = this.baseFontSize;
chartConfig.chart.baseFontColor = this.baseFontColor;
chartConfig.chart.bgColor = this.backgroundColor;
chartConfig.chart.palettecolors = this.chartPalette;
chartConfig.chart.startingAngle = "-110";
chartConfig.chart.showLegend = "0";
chartConfig.chart.smartLineColor = this.baseFontColor;
chartConfig.chart.smartLineAlpha = "60";
chartConfig.chart.labelFontColor = this.baseFontColor;
chartConfig.chart.labelFontSize = this.baseFontSize;
chartConfig.chart.plotToolText = "Source: $label
Users: $dataValue";
chartConfig.data[2].isSliced = "1";
chartConfig.chart.enableMultiSlicing = "0";
const doughnutChartConfigs = {
type: this.doughnutType,
width: "100%",
height: 450,
dataFormat: "json",
dataSource: chartConfig,
};
this.setState({ doughnutChartConfigs: doughnutChartConfigs });
};
createColumnChart = () => {
this.myRef.current.flexmonster.fusioncharts.getData(
{
type: this.columnType,
slice: {
rows: [
{
uniqueName: "Date.Month",
},
],
columns: [
{
uniqueName: "Traffic",
},
],
measures: [
{
uniqueName: "Sales",
aggregation: "sum",
format: "currency"
},
],
},
},
this.drawColumnChart,
this.drawColumnChart,
);
};
drawColumnChart = (chartConfig, rawData) => {
chartConfig.chart.theme = "fusion";
chartConfig.chart.baseFontSize = this.baseFontSize;
chartConfig.chart.baseFontColor = this.baseFontColor;
chartConfig.chart.bgColor = this.backgroundColor;
chartConfig.chart.palettecolors = this.chartPalette;
chartConfig.chart.xAxisName = undefined;
chartConfig.chart.yAxisName = undefined;
chartConfig.chart.plotFillHoverAlpha = "90";
chartConfig.chart.plotToolText =
"Traffic type: $seriesname
Month: $label
Revenue: $dataValue";
chartConfig.chart.legendPosition = "right";
chartConfig.chart.plotHighlightEffect = "fadeout|alpha=20";
chartConfig.chart.legendCaption = "Traffic type";
chartConfig.chart.legendCaptionBold = "1";
chartConfig.chart.legendCaptionFontSize = "13";
chartConfig.chart.legendCaptionFontColor = this.baseFontColor;
chartConfig.chart.legendIconScale = "1.2";
chartConfig.chart.legendIconSides = "500";
chartConfig.chart.legendItemFontSize = this.baseFontSize;
chartConfig.chart.legendItemFontColor = this.baseFontColor;
chartConfig.chart.adjustDiv = "0";
chartConfig.chart.yAxisMaxvalue = "35000";
chartConfig.chart.yAxisMinValue = "0";
chartConfig.chart.numDivLines = "4";
chartConfig.chart.formatNumberScale = "0";
let format = this.myRef.current.flexmonster.fusioncharts.getNumberFormat(
rawData.meta.formats[0],
);
for (let prop in format) {
chartConfig.chart[prop] = format[prop];
}
const columnChartConfigs = {
type: this.columnType,
width: "100%",
height: 450,
dataFormat: "json",
dataSource: chartConfig,
};
this.setState({ columnChartConfigs: columnChartConfigs });
};
}
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;
line-height: 24px;
color: #555;
}
Check our Integration with FusionCharts guide to learn how to create the dashboard with the Flexmonster pivot table and FusionCharts and add it to your React app with minimum effort.
The integration process is based on the usage of the Сonnector for FusionCharts that establishes real-time communication between the components. The principle of the dashboard’s work is simple: Flexmonster takes raw data, summarizes it, and sends it for further visualization to the charts.