Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Usage examples

    This guide lists examples of Flexmonster usage in React. They are provided within our sample React project.

    Creating the pivot table

    The first example demonstrates how to embed Flexmonster into your project with the FlexmonsterReact.Pivot component. See the source code:

    Notice how initialization parameters are specified in FlexmonsterReact.Pivot:

    <FlexmonsterReact.Pivot
     toolbar={true}
     beforetoolbarcreated={toolbar => {
       toolbar.showShareReportTab = true;
     }}
     shareReportConnection={{
       url: "https://olap.flexmonster.com:9500"
     }}
     width="100%"
     height={600}
     report="https://cdn.flexmonster.com/github/demo-report.json"
    />

    Learn more about FlexmonsterReact.Pivot and its parameters: The FlexmonsterReact.Pivot component.

    Handling events

    This usage example focuses on Flexmonster events. See the source code:

    The example provides a toggle button to subscribe to all the events and unsubscribe from them.

    Under the component, there is a log output. When an event is triggered, the output shows info about that event.

    To subscribe to an event, we use the on() method:

    ES6

    pivotRef.current.flexmonster.on(eventName, () => {
      // Handle the event
    });

    TypeScript

    pivotRef.current?.flexmonster.on(eventName, () => {
      // Handle the event
    });

    To unsubscribe from an event, we use the off() method:

    ES6

    pivotRef.current.flexmonster.off(eventName);

    TypeScript

    pivotRef.current?.flexmonster.off(eventName);

    See the full list of Flexmonster events in our documentation.

    Learn more about using Flexmonster events in React.

    Using API calls

    The Using API calls section is about interacting with the component through API calls. See the source code:

    Use the toggle buttons to enable the read-only mode or switch between the grid and charts.

    See how the API calls are used:

    • The showGrid() and showCharts() methods allow switching between the views:

      ES6

      const showChart = () => {
        pivotRef.current.flexmonster.showCharts("column");
      };
      
      const showGrid = () => {
        pivotRef.current.flexmonster.showGrid();
      };

      TypeScript

      const showChart = () => {
        pivotRef.current?.flexmonster.showCharts("column");
      };
      
      const showGrid = () => {
        pivotRef.current?.flexmonster.showGrid();
      };
    • The setOptions() API call is used to make Flexmonster read-only:

      ES6

      const readOnly = () => {
        pivotRef.current.flexmonster.setOptions({
          readOnly: true
        });
        pivotRef.current.flexmonster.refresh();
      };

      TypeScript

      const readOnly = () => {
        pivotRef.current?.flexmonster.setOptions({
          readOnly: true
        });
        pivotRef.current?.flexmonster.refresh();
      };

    See the full list of Flexmonster API calls.

    Learn more about using Flexmonster methods in React.

    Updating data

    The Updating data section shows how to refresh data at runtime. See the source code:

    Each time you click the Update data button, the dataset is updated and loaded to Flexmonster using the updateData() API call:

    ES6

    const updateTheData = () => {
      data = [
        // Updated data
      ];
      // Updating the data in Flexmonster
      pivotRef.current.flexmonster.updateData({ data: data });
    };

    TypeScript

    const updateTheData = () => {
      data = [
        // Updated data
      ];
      // Updating the data in Flexmonster
      pivotRef.current?.flexmonster.updateData({ data: data });
    };

    Learn more about using Flexmonster methods in React.

    Customizing the Toolbar

    The Customizing the Toolbar section contains an example of Toolbar customization. See the source code:

    Flexmonster is subscribed to the beforetoolbarcreated event via FlexmonsterReact.Pivot props:

    <FlexmonsterReact.Pivot
     ref={pivotRef}
     ...
     beforetoolbarcreated={customizeToolbar}
     ...
    />

    The customizeToolbar() handler is defined as follows:

    ES6

    const customizeToolbar = (toolbar) => {
      let tabs = toolbar.getTabs();
      toolbar.getTabs = () => {
        tabs = [];
        // Add new tab
        tabs.push({
          id: "fm-tab-newtab",
          title: "New Tab",
          handler: () => showInfo(),
          icon: toolbar.icons.open,
        });
        return tabs;
      };
    };

    TypeScript

    const customizeToolbar = (toolbar: Flexmonster.Toolbar) => {
      let tabs = toolbar.getTabs();
      toolbar.getTabs = () => {
        tabs = [];
        // Add new tab
        tabs.push({
          id: "fm-tab-newtab",
          title: "New Tab",
          handler: showInfo,
          icon: toolbar.icons.open,
        });
        return tabs;
      };
    };

    As a result, a new tab with custom functionality is added.

    Learn more about customizing the Toolbar.

    Customizing the grid

    The Customizing the grid example demonstrates how to highlight a certain measure on the grid using customizeCell. See the source code:

    Here is how customizeCell is defined:

    <FlexmonsterReact.Pivot
     ref={pivotRef}
     ...
     customizeCell={customizeCellFunction}
     ...
    />

    The customizeCellFunction() applies custom CSS to the cells with the "Price" measure:

    ES6

    const customizeCellFunction = (cell, data) => {
      if (data.measure && data.measure.uniqueName === "Price") {
        let backgroundColor = "#00A45A";
        let textShadowColor = "#095231";
        let borderColor = "#009552";
        cell.style["background-color"] = backgroundColor;
        cell.style["color"] = "white";
        cell.style["font-weight"] = "bold";
        cell.style["text-shadow"] = `0px 2px 3px ${textShadowColor}`;
        cell.style["border-bottom"] = `1px solid ${borderColor}`;
        cell.style["border-right"] = `1px solid ${borderColor}`;
      }
    };

    TypeScript

    const customizeCellFunction = (
      cell: Flexmonster.CellBuilder,
      data: Flexmonster.CellData
    ) => {
      if (data.measure && data.measure.uniqueName === "Price") {
        let backgroundColor = "#00A45A";
        let textShadowColor = "#095231";
        let borderColor = "#009552";
        cell.style = {
          ...cell.style,
          "background-color": backgroundColor,
          "color": "white",
          "font-weight": "bold",
          "text-shadow": `0px 2px 3px ${textShadowColor}`,
          "border-bottom": `1px solid ${borderColor}`,
          "border-right": `1px solid ${borderColor}`,
        };
      }
    };

    Learn more about customizing the grid.

    Integrating with Highcharts

    See an example of Highcharts integration in the With Highcharts section:

    Here’s how the Highcharts module and Flexmonster Connector for Highcharts are imported:

    ES6

    import "flexmonster/lib/flexmonster.highcharts.js";
    import Highcharts from "highcharts";

    TypeScript

    import "flexmonster/lib/flexmonster.highcharts.js";
    import * as Highcharts from 'highcharts';

    In the markup, we add a container for Highcharts:

    <div className="chart-container">
      <div id="highcharts-container"></div>
    </div>

    Then Flexmonster is subscribed to the reportcomplete event via FlexmonsterReact.Pivot props:

    <FlexmonsterReact.Pivot
     ref={pivotRef}
     ...
     reportcomplete={reportComplete}
     ...
    />

    Finally, we define the reportComplete() handler and the chart-drawing function:

    ES6

    const reportComplete = () => {
      pivotRef.current.flexmonster.off("reportcomplete", reportComplete);
      createChart();
    };
    
    const createChart = () => {
      pivotRef.current.flexmonster.highcharts.getData(
        // Creating and configuring the chart
      );
    };

    TypeScript

    const reportComplete = () => {
      pivotRef.current?.flexmonster.off("reportComplete", reportComplete);
      createChart();
    };
    
    const createChart = () => {
      pivotRef.current?.flexmonster.highcharts?.getData(
        // Creating and configuring the chart
      );
    };

    Learn more about integration with Highcharts.

    Integrating with amCharts

    Our sample project contains examples of integration with amCharts 5 and amCharts 4.

    amCharts 5

    The With amCharts section provides a dashboard with Flexmonster and amCharts 5. See the source code:

    Here’s how the amCharts 5 library and Flexmonster Connector for amCharts are imported:

    // Importing Flexmonster Connector for amCharts
    import "flexmonster/lib/flexmonster.amcharts.js";
    // amCharts imports
    import * as am5 from "@amcharts/amcharts5";
    import * as am5xy from "@amcharts/amcharts5/xy";
    import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";

    In the markup, we add a container for amCharts:

    <div className="chart-container">
      <div id="amcharts-container" style={{ width: "100%", height: "500px" }}></div>
    </div>

    Then we subscribe Flexmonster to the reportcomplete event via FlexmonsterReact.Pivot props:

    <FlexmonsterReact.Pivot
     ref={pivotRef}
     ...
     reportcomplete={reportComplete}
     ...
    />

    Finally, we define the reportComplete() handler and chart-drawing functions:

    ES6

    const reportComplete = () => {
      pivotRef.current.flexmonster.off("reportcomplete", reportComplete);
      drawChart();
    };
    
    const drawChart = () => {
      pivotRef.current.flexmonster.amcharts.getData(
        {},
        (chartData, rawData) => createChart(chartData, rawData),
        (chartData, rawData) => updateChart(chartData, rawData)
      );
    };
    
    const createChart = (chartData, rawData) => {
      // Creating and configuring the chart
    };
    
    const updateChart = (chartData, rawData) => {
      // Updating the chart
    };

    TypeScript

    const reportComplete = () => {
      pivotRef.current?.flexmonster.off("reportcomplete", reportComplete);
      drawChart();
    };
    
    const drawChart = () => {
      pivotRef.current?.flexmonster.amcharts?.getData(
        {},
        createChart,
        updateChart
      );
    };
    
    const createChart = (
      chartData: Flexmonster.GetDataValueObject,
      rawData: Flexmonster.GetDataValueObject
    ) => {
      // Creating and configuring the chart
    };
    
    const updateChart = (
      chartData: Flexmonster.GetDataValueObject,
      rawData: Flexmonster.GetDataValueObject
    ) => {
      // Updating the chart
    };

    Learn more about integration with amCharts.

    amCharts 4

    The example with amCharts 4 is hidden from the project's side menu, but you can still access it via a direct link: http://localhost:3000/with-amcharts4 (the project's port can be different).

    Here is the example's source code:

    It is very similar to the code of the amCharts 5 example:

    • First, we import amCharts 4 and Flexmonster Connector for amCharts.
    • In the markup, we add a container for amCharts.
    • Then Flexmonster is subscribed to the reportcomplete event.
    • Finally, we define the reportcomplete event's handler and chart-drawing functions.

    Learn more about integration with amCharts.

    See also