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 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 give a highlight to 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: "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">
<strong>Top Countries by Revenue</strong>
</div>
<ReactFC {...this.state.mapChartConfigs} />
</div>
<div className="demo-box">
<div className="demo-title">
<strong>Top Traffic Sources</strong>
</div>
<ReactFC {...this.state.doughnutChartConfigs} />
</div>
<div className="demo-box">
<div className="demo-title">
<strong>Revenue per Month</strong>
</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: 100000,
code: "#8acfc3",
},
{
minvalue: 100000,
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<br>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<br>Month: $label<br>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 Flexmonster Pivot Table and FusionCharts and add it to your React app with minimum effort.
The integration process is based on usage of the Сonnector for FusionCharts that enables to establish real-time communication between the components. The principle of the dashboard’s work is simple: Flexmonster takes raw data, summarizes it, and sends for further visualization to the charts.