Need a special offer?Find out if your project fits.
+
All documentation
API reference
  • API Reference for older versions
  • Flexmonster()

    new Flexmonster({
    container: String,
    componentFolder: String,
    width: Number | String,
    height: Number | String,
    toolbar: Boolean,
    licenseKey: String | String[],
    report: ReportObject | String,
    global: GlobalObject,
    accessibility: Object,
    customizeCell: Function,
    customizeChartElement: Function,
    customizeContextMenu: Function,
    customizeAPIRequest: Function,
    sortFieldsList: Function,
    shareReportConnection: ShareReportConnectionObject,
    <event name>: Function
    })

    Embeds the component into the HTML page. This method allows you to insert the component into your HTML page and provide it with all the necessary information for the initialization. This is the first API call you need to know.

    Note Do not forget to import flexmonster.js before you start working with it.

    Parameters

    Parameter/Type Description
    container
    String
    The selector of the HTML element you would like to have as a container for the component.
    componentFolder
    String
    optional URL of the component's folder, which contains all necessary files. Also, it is used as a base URL for report files, localization files, styles, and images.
    Default value: "flexmonster/".
    width
    Number | String
    optional Width of the component on the page (pixels or percent).
    Default value: "100%".
    height
    Number | String
    optional Height of the component on the page (pixels or percent).
    Default value: 500.
    toolbar
    Boolean
    optional It indicates whether the toolbar is embedded or not.
    Default value: false (without the Toolbar).
    licenseKey
    String | String[]
    optional The license key.
    If you have multiple license keys for different environments, specify the licenseKey as an array of strings to pass these keys to Flexmonster. The component will use the first valid key from the array.
    Learn more about managing license keys.
    report
    ReportObject | String
    optional A property to set a report. It can be an inline ReportObject or a URL to a report. Specify the report as a URL if your report is:
    • Stored in a JSON file.
    • Returned by a server-side script.
    global
    GlobalObject
    optional It allows you to preset configurations for all reports. These configurations can be overwritten for specific reports.
    accessibility
    Object
    optional Allows configuring accessibility in Flexmonster.
    accessibility.keyboardMode
    Boolean
    optional If set to true, the keyboard focus is visible on UI elements. Learn more about keyboard navigation in Flexmonster.
    Default value: false.
    accessibility.highContrastTheme
    String
    optional Contains a link to a CSS theme that will be used as a high-contrast one. Learn more about using the high-contrast theme in Flexmonster.
    Default value: "theme/accessible/flexmonster.min.css" (the path is relative to the componentFolder).
    customizeCell
    Function
    optional Allows customizing of separate cells. Have a look at customizeCell definition and examples.
    customizeChartElement
    Function
    optional Allows customizing separate chart elements in Flexmonster Charts. Have a look at the customizeChartElement definition and examples.
    customizeContextMenu
    Function
    optional Allows customizing the context menu. Have a look at customizeContextMenu definition and examples.
    customizeAPIRequest
    Function
    optional Allows adding custom properties to the request body before the request is sent to a server. Have a look at customizeAPIRequest definition and examples.
    sortFieldsList
    Function
    optional Allows setting custom sorting for Field List items. Have a look at sortFieldsList definition and examples.
    shareReportConnection
    ShareReportConnectionObject
    optional Contains configuration needed to load the shared report.
    This parameter is optional if the Data Server is used as a data source on the page. Otherwise, it is needed to define shareReportConnection.
    To learn more about report sharing, see the following guide: Share the report.
    <event name>
    Function
    optional Allows subscribing to Flexmonster events.
    <event name> is the event you want to subscribe to. The event’s handler should be specified as the parameter’s value. See an example.
    You can subscribe to as many events via parameters as needed. See an example.
    It is also possible to use the on() method to handle the events.

    The only required property is container. If you run new Flexmonster({container: "pivotContainer"}), where "pivotContainer" is the selector of container HTML element, – an empty component without the toolbar will be added with the default width and height.

    Returns

    Object, the reference to the embedded pivot table. To work with multiple instances on the same page, use these objects. All API calls are available through them.

    To get a reference to the component after initialization, use the uielement property of the component’s container:

    const flexmonsterAPI = document.getElementById("flexmonsterContainer")
                           .uielement.flexmonster;

    Flexmonster’s methods are available through this reference as well:

    flexmonsterAPI.getReport();

    Examples

    1) Add the component instance to your webpage without the Toolbar:

    <div id="pivotContainer">The component will appear here</div> 
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
      const pivot = new Flexmonster({
        container: "pivotContainer",
        componentFolder: "node_modules/flexmonster/",
        report: {
          dataSource: {
            filename: "data.csv"
          }
        },
        licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
      });
    </script>

    Check out the example on JSFiddle.

    2) Add the component with the Toolbar:

    <div id="pivotContainer">The component will appear here</div> 
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
      const pivot = new Flexmonster({
        container: "pivotContainer",
        componentFolder: "node_modules/flexmonster/",
        toolbar: true,
        report: {
          dataSource: {
            filename: "data.csv"
          }
        },
        licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
      });
    </script>

    Try the example on JSFiddle.

    3) Add and operate multiple instances:

    <div id="firstPivotContainer">The component will appear here</div> 
    <div id="secondPivotContainer">The component will appear here</div> 
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
      const pivot1 = new Flexmonster({
        container: "pivotContainer",
        componentFolder: "node_modules/flexmonster/",
        toolbar: true,
        report: {
          dataSource: {
            filename: "data.csv"
          }
        },
        licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
      });
    
      const pivot2 = new Flexmonster({
        container: "pivotContainer",
        componentFolder: "node_modules/flexmonster/",
        toolbar: true,
        report: {
          dataSource: {
            filename: "data2.csv"
          }    	
        },
        licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
      });
    </script>
    
    <button onclick="javascript: swapReports()">Swap Reports</button>
    <script>
      function swapReports() {
        const report1 = pivot1.getReport();
        const report2 = pivot2.getReport();
    
        pivot1.setReport(report2);
        pivot2.setReport(report1);
      }
    </script>

    Try the example on JSFiddle.

    4) Set event handler via Flexmonster():

    const pivot = new Flexmonster ({
      container: "pivotContainer",
      componentFolder: "node_modules/flexmonster/",
      toolbar: true,
      report: {
        dataSource: {
          filename: "data.csv"
        }    	
      },
      licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
      ready : function () {
        console.log("The component was created");
      }
    });

    Open this example on JSFiddle.

    5) Set multiple license keys:

    const pivot = new Flexmonster ({
      container: "pivotContainer",
      componentFolder: "node_modules/flexmonster/",
      toolbar: true,
      report: {
        dataSource: {
          filename: "data.csv"
        }        
      },
      licenseKey: [
        // For the production environment
        "XXXX-XXXX-XXXX-XXXX-XXXX",
        // For the development environment
        "YYYY-YYYY-YYYY-YYYY-YYYY"
      ]
    });

    6) How to use customizeCell:

    new Flexmonster({
      customizeCell: function(cell, data) {
        // change cell
      },
      ...
    });

    Check out the full example on JSFiddle.

    See also

    List of events