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<br />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;
  font-weight: 600;
  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

Prev Next

Frequently asked questions

Can't find your answer here?
Visit the FAQ page

What is Flexmonster Pivot Table & Charts?

Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.

Which frameworks does Flexmonster work with?

Which data sources can Flexmonster connect to?

How is Flexmonster licensed?

Can I try Flexmonster before buying?

Changes to Flexmonster Software License Agreement

React Pivot Table with FusionCharts

For the best experience

See our live examples

Frequently asked questions