React Pivot Table with Google Charts

Flexmonster Pivot Table & Charts for React seamlessly integrates with Google Charts — a web service for data visualization. Using these tools together, you can create a well-designed interactive dashboard and embed it into any React application.

Dashboard analytics is a comprehensive instrument for making data-driven decisions. With its help, end-users can highlight particular insights, find complex business solutions, and present the results.

Income, Expenses, and Profit

Dashboards with React Flexmonster Pivot and Google Charts are very interactive: changes applied to the pivot grid configuration are reflected in charts in an instant. Because of this real-time behavior, end-users can look at the data from different points right away.

Top 5 Countries by Sales

Edit in JSfiddle Get Free Trial

import { useRef, useState, useEffect } from "react";

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

function PivotTableDemo() {
  let didInit = false;
  const pivotRef = useRef();
  const [googleChartsLoaded, setGoogleChartsLoaded] = useState(false);
  const [fmReportComplete, setFMReportComplete] = useState(false);
  const colors = [
    "#4cbf8b",
    "#e8734c",
    "#ffcd4c",
    "#9875e3",
    "#4c9eff",
    "#8acfc3",
    "#cd97e6",
    "#f1d34c",
    "#65d2e7"
  ];

  const report = {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/data/demos/googlecharts-demo-data.json"
    },
    slice: {
      rows: [
        {
          uniqueName: "Date.Month"
        }
      ],
      columns: [
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Income",
          formula: 'sum("Sales") * sum("Unit Price")',
          individual: true,
          caption: "Income",
          format: "currency"
        },
        {
          uniqueName: "Expenses",
          format: "currency"
        },
        {
          uniqueName: "Profit",
          formula: 'sum("Income") - sum("Expenses")',
          individual: true,
          caption: "Profit",
          format: "currency"
        }
      ]
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2
      },
      {
        name: "currency",
        currencySymbol: "$"
      }
    ],
    options: {
      grid: {
        showHeaders: false
      },
      showAggregationLabels: false
    }
  };

  useEffect(() => {
    if (!didInit) {
      google.charts.load("current", {
        packages: ["corechart", "bar"]
      });
      google.charts.setOnLoadCallback(() => setGoogleChartsLoaded(true));
    }
    if (googleChartsLoaded && fmReportComplete) {
      createColumnChart();
      createPieChart();
    }
  }, [googleChartsLoaded, fmReportComplete]);

  const onReportComplete = () => {
    setFMReportComplete(true);
    pivotRef.current.flexmonster.off("reportcomplete");
  };

  const createColumnChart = () => {
    pivotRef.current.flexmonster.googlecharts.getData(
      {
        type: "column"
      },
      drawColumnChart,
      drawColumnChart
    );
  };

  const drawColumnChart = (chartConfig, rawData) => {
    const data = google.visualization.arrayToDataTable(chartConfig.data);
    const formatter = new google.visualization.NumberFormat(
      pivotRef.current.flexmonster.googlecharts.getNumberFormat(rawData.meta.formats[0])
    );

    for (let i = 0; i < data.getNumberOfColumns(); i++) {
      if (data.getColumnType(i) === "number") {
        formatter.format(data, i);
      }
    }

    const options = {
      fontName: "SERIF TYPEFACE",
      chartArea: {
        height: "90%"
      },
      height: 300,
      colors: colors
    };

    const columnChartContainer = document.getElementById("googlechart-column-container");
    const chart = new google.charts.Bar(columnChartContainer);
    chart.draw(data, options);
  };

  const createPieChart = () => {
    pivotRef.current.flexmonster.googlecharts.getData(
      {
        type: "pie",
        slice: {
          rows: [
            {
              uniqueName: "Country",
              filter: {
                measure: {
                  uniqueName: "Sales"
                },
                query: {
                  top: 5
                }
              }
            }
          ],
          columns: [
            {
              uniqueName: "[Measures]"
            }
          ],
          measures: [
            {
              uniqueName: "Sales",
              format: "currency"
            }
          ]
        }
      },
      drawPieChart,
      drawPieChart
    );
  };

  function drawPieChart(chartConfig, rawData) {
    const data = google.visualization.arrayToDataTable(chartConfig.data);
    const formatter = new google.visualization.NumberFormat(
      pivotRef.current.flexmonster.googlecharts.getNumberFormat(rawData.meta.formats[0])
    );

    for (let i = 0; i < data.getNumberOfColumns(); i++) {
      if (data.getColumnType(i) === "number") {
        formatter.format(data, i);
      }
    }

    const options = {
      legend: {
        position: "bottom"
      },
      height: 300,
      pieSliceText: "none", // Remove text from pie slices
      pieHole: 0.35,
      chartArea: {
        height: "85%",
        top: 0
      },
      pieSliceBorderColor: "none",
      colors: colors
    };

    const pieChartContainer = document.getElementById("googlechart-pie-container");
    const chart = new google.visualization.PieChart(pieChartContainer);
    chart.draw(data, options);
  }

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

      <div className="demo-box">
        <div className="demo-title">Income, Expenses, and Profit</div>
        <div id="googlechart-column-container"></div>
      </div>

      <div className="demo-box">
        <div className="demo-title">Top 5 Countries by Sales</div>
        <div id="googlechart-pie-container"></div>
      </div>
    </>
  );
}

export default PivotTableDemo;

.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 20px 20px 20px 20px;
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
}

.demo-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #555;
}

#pivot-container {
  margin-bottom: 20px;
}

/** For the background color of Google Charts 
 * (for material design charts, it can't be changed via options, only via CSS)
 */
#googlechart-column-container > div > div > svg > g > rect:nth-child(1) {
  fill: #fafafa !important;
}

#googlechart-pie-container > div > div > div > svg > rect {
  fill: #fafafa !important;
}

/* For the bottom line on the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(3) > line:nth-child(1) {
  stroke: #e0e0e0;
}

/* For text on xAxis of the column chart */
#googlechart-column-container > div > div > svg > g:nth-child(6) > text {
  color: #555;
  fill: rgb(117, 117, 117);
  font-family: Roboto;
  font-size: 12px;
}

/* For text on the legend of the pie chart */
#googlechart-pie-container > div > div > div > svg > g:nth-child(n) > g:nth-child(n) > g > text {
  color: #555;
  fill: rgb(117, 117, 117);
  font-family: Roboto;
  font-size: 12px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flexmonster & Google Charts Demo</title>
    <!-- Adding Google Charts -->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

With our Integration with Google Charts guide, you can learn how to configure a dashboard with Flexmonster and Google Charts in just a few steps.

The process is straightforward: add the pivot table and charts to the web page and make both components communicate via the specially prepared charting connector.

With FusionCharts Themes

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 Google Charts

For the best experience

See our live examples

Frequently asked questions