React Pivot Table with FusionCharts

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.

Top Countries by Revenue

Top Traffic Sources

Revenue per Month

Edit in JSfiddle Get Free Trial

import { useRef, useState } from "react";

import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";
import "flexmonster/lib/flexmonster.fusioncharts.js";

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);

function PivotTableDemo() {
  const pivotRef = useRef(null);

  const [mapChartConfigs, setMapChartConfigs] = useState({});
  const [doughnutChartConfigs, setDoughnutChartConfigs] = useState({});
  const [columnChartConfigs, setColumnChartConfigs] = useState({});

  const 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"
        }
      ],
      sorting: {
        column: {
          type: "desc",
          tuple: ["Traffic.[Referral]"],
          measure: {
            uniqueName: "Revenue",
            aggregation: "none"
          }
        }
      },
      expands: {
        columns: [
          {
            tuple: ["Traffic.[Organic]"]
          },
          {
            tuple: ["Traffic.[Paid]"]
          }
        ]
      }
    },
    options: {
      grid: {
        showHeaders: false
      }
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2
      },
      {
        name: "currency",
        currencySymbol: "$"
      }
    ]
  };

  const chartOptions = {
    backgroundColor: "#fafafa",
    baseFontSize: "15",
    baseFontColor: "#888",
    chartPalette: "4cbf8b, ffcd4c, e8734c, 9875e3, 4c9eff, 8acfc3, cd97e6, f1d34c, 65d2e7",
    mapType: "maps/worldwithcountries",
    doughnutType: "doughnut2d",
    columnType: "mscolumn2d"
  };

  const reportComplete = () => {
    pivotRef.current.flexmonster.off("reportcomplete");
    createMapChart();
    createDoughnutChart();
    createColumnChart();
  };

  const createMapChart = () => {
    pivotRef.current.flexmonster.fusioncharts.getData(
      {
        type: chartOptions.mapType
      },
      drawMapChart,
      drawMapChart
    );
  };

  const drawMapChart = (chartConfig) => {
    chartConfig.chart.theme = "fusion";
    chartConfig.chart.showLabels = "0";

    chartConfig.chart.bgColor = chartOptions.backgroundColor;

    chartConfig.chart.entityBorderColor = chartOptions.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: chartOptions.mapType,
      width: "100%",
      height: 400,
      dataFormat: "json",
      dataSource: chartConfig
    };

    setMapChartConfigs(mapChartConfigs);
  };

  const createDoughnutChart = () => {
    pivotRef.current.flexmonster.fusioncharts.getData(
      {
        type: chartOptions.doughnutType,
        slice: {
          rows: [
            {
              uniqueName: "Source",
              filter: {
                exclude: ["LinkedIn", "Medium", "Bing"]
              }
            }
          ],
          columns: [
            {
              uniqueName: "[Measures]"
            }
          ],
          measures: [
            {
              uniqueName: "Users",
              aggregation: "sum"
            }
          ]
        }
      },
      drawDoughnutChart,
      drawDoughnutChart
    );
  };

  const drawDoughnutChart = (chartConfig) => {
    chartConfig.chart.theme = "fusion";
    chartConfig.chart.baseFontSize = chartOptions.baseFontSize;
    chartConfig.chart.baseFontColor = chartOptions.baseFontColor;
    chartConfig.chart.bgColor = chartOptions.backgroundColor;
    chartConfig.chart.palettecolors = chartOptions.chartPalette;

    chartConfig.chart.startingAngle = "-110";

    chartConfig.chart.showLegend = "0";

    chartConfig.chart.smartLineColor = chartOptions.baseFontColor;
    chartConfig.chart.smartLineAlpha = "60";

    chartConfig.chart.labelFontColor = chartOptions.baseFontColor;
    chartConfig.chart.labelFontSize = chartOptions.baseFontSize;

    chartConfig.chart.plotToolText = "Source: $label
Users: $dataValue";

    chartConfig.data[2].isSliced = "1";
    chartConfig.chart.enableMultiSlicing = "0";

    const doughnutChartConfigs = {
      type: chartOptions.doughnutType,
      width: "100%",
      height: 450,
      dataFormat: "json",
      dataSource: chartConfig
    };

    setDoughnutChartConfigs(doughnutChartConfigs);
  };

  const createColumnChart = () => {
    pivotRef.current.flexmonster.fusioncharts.getData(
      {
        type: chartOptions.columnType,
        slice: {
          rows: [
            {
              uniqueName: "Date.Month"
            }
          ],
          columns: [
            {
              uniqueName: "Traffic"
            }
          ],
          measures: [
            {
              uniqueName: "Sales",
              aggregation: "sum",
              format: "currency"
            }
          ]
        }
      },
      drawColumnChart,
      drawColumnChart
    );
  };

  const drawColumnChart = (chartConfig, rawData) => {
    chartConfig.chart.theme = "fusion";
    chartConfig.chart.baseFontSize = chartOptions.baseFontSize;
    chartConfig.chart.baseFontColor = chartOptions.baseFontColor;
    chartConfig.chart.bgColor = chartOptions.backgroundColor;
    chartConfig.chart.palettecolors = chartOptions.chartPalette;

    chartConfig.chart.xAxisName = undefined;
    chartConfig.chart.yAxisName = undefined;

    chartConfig.chart.plotFillHoverAlpha = "90";
    chartConfig.chart.plotToolText = "$seriesname traffic, $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 = chartOptions.baseFontColor;

    chartConfig.chart.legendIconScale = "1.2";
    chartConfig.chart.legendIconSides = "500";
    chartConfig.chart.legendItemFontSize = chartOptions.baseFontSize;
    chartConfig.chart.legendItemFontColor = chartOptions.baseFontColor;

    chartConfig.chart.adjustDiv = "0";
    chartConfig.chart.yAxisMaxvalue = "35000";
    chartConfig.chart.yAxisMinValue = "0";
    chartConfig.chart.numDivLines = "4";

    chartConfig.chart.formatNumberScale = "0";

    const format = pivotRef.current.flexmonster.fusioncharts.getNumberFormat(
      rawData.meta.formats[0]
    );
    for (let prop in format) {
      chartConfig.chart[prop] = format[prop];
    }

    const columnChartConfigs = {
      type: chartOptions.columnType,
      width: "100%",
      height: 450,
      dataFormat: "json",
      dataSource: chartConfig
    };

    setColumnChartConfigs(columnChartConfigs);
  };

  return (
    <>
      <FlexmonsterReact.Pivot
        ref={pivotRef}
        height={400}
        report={report}
        reportcomplete={reportComplete}
        licenseFilePath="https://cdn.flexmonster.com/jsfiddle.charts.key"
      />

      <div className="demo-box">
        <div className="demo-title">Top Countries by Revenue</div>
        <ReactFC {...mapChartConfigs} />
      </div>

      <div className="demo-box">
        <div className="demo-title">Top Traffic Sources</div>
        <ReactFC {...doughnutChartConfigs} />
      </div>

      <div className="demo-box">
        <div className="demo-title">Revenue per Month</div>
        <ReactFC {...columnChartConfigs} />
      </div>
    </>
  );
}

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.

With Highcharts With Google Charts

React Pivot Table with FusionCharts

For the best experience

See our live examples