Get Free Trial
  1. API reference
  2. Welcome
    1. Introduction
    2. Get Flexmonster
    3. Quick start
    4. System requirements
    5. Troubleshooting
    6. Managing license keys
    7. Migrating from WebDataRocks to Flexmonster
  3. Integration with frameworks
    1. Available tutorials
    2. Angular
      1. Integration with Angular
      2. Flexmonster usage in Angular
    3. React
      1. Integration with React
      2. Flexmonster usage in React
    4. Vue
      1. Integration with Vue 2
      2. Flexmonster usage in Vue 2
      3. Integration with Vue 3
      4. Flexmonster usage in Vue 3
    5. Other integrations
      1. Integration with Python
        1. Integration with Django
        2. Integration with Jupyter Notebook
      2. Integration with React Native
      3. Integration with Blazor
      4. Integration with AngularJS (v1.x)
      5. Integration with TypeScript
      6. Integration with R Shiny
      7. Integration with jQuery
      8. Integration with Ionic
      9. Integration with Electron.js
      10. Integration with Webpack
      11. Integration with RequireJS
  4. Connecting to Data Source
    1. Supported data sources
    2. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Managing data presentation in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Managing data presentation in CSV
    4. Database
      1. Connecting to SQL databases
      2. Connecting to a MySQL database
      3. Connecting to a Microsoft SQL Server database
      4. Connecting to a PostgreSQL database
      5. Connecting to an Oracle database
    5. Flexmonster Data Server
      1. Introduction to Flexmonster Data Server
      2. Getting started with Flexmonster Data Server
      3. Flexmonster Admin Panel Guide
      4. Data sources guide
      5. Security and authorization guide
      6. The Data Server as a DLL
        1. Getting started with the Data Server as a DLL
        2. Referencing the Data Server as a DLL
        3. Implementing the API controller
        4. Implementing the server filter
        5. Implementing the custom parser
        6. DLL configurations reference
        7. The controller's methods for request handling
      7. The Data Server as a console application
        1. Installing the Data Server as a console application
        2. Configurations reference
        3. Data sources guide
        4. Security and authorization guide
      8. Troubleshooting the Data Server
    6. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
      4. Configuring the MongoDB Connector
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referencing the Accelerator as a DLL
      4. Configuring the authentication process
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    8. Custom data source API
      1. Introduction to the custom data source API
      2. A quick overview of a sample Node.js server
      3. A quick overview of a sample .NET Core server
      4. Implement your own server
        1. Implementing the custom data source API server
        2. Implementing filters
        3. Supporting more aggregation functions
        4. Supporting multilevel hierarchies
        5. Returning data for the drill-through view
        6. Testing your custom data source API server
    9. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    10. Connecting to other data sources
  5. Accessibility
    1. Accessibility overview
    2. Keyboard navigation
  6. Configuring the component
    1. Available tutorials
    2. Getting started with the report
    3. Configure the data source
      1. Data source
      2. Mapping
    4. Define which data to show
      1. Slice
      2. Custom sorting
      3. Calculated values
    5. Manage Flexmonster’s functionality
      1. Options
      2. Configuring global options
    6. Format fields
      1. Number formatting
      2. Date and time formatting
      3. Conditional formatting
  7. Saving component configs
    1. Available tutorials
    2. Save and restore the report
    3. Share the report
    4. Export and print
  8. Charts
    1. Available tutorials
    2. Flexmonster Pivot Charts
    3. Integration with Highcharts
    4. Integration with amCharts
    5. Integration with Google Charts
    6. Integration with FusionCharts
    7. Integration with any charting library
  9. Customizing
    1. Available tutorials
    2. Customizing the Toolbar
    3. Customizing appearance
    4. Customizing the context menu
    5. Customizing the grid
    6. Customizing the pivot charts
    7. Localizing the component
  10. Security
    1. Security in Flexmonster
    2. Security aspects of connecting to an OLAP cube
      1. Ways of connecting to an OLAP cube
      2. The data transfer process
      3. Data security
      4. Data access management
  11. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.8 to 2.9
    4. Migration guide from 2.7 to 2.8
    5. Migration guide from 2.6 to 2.7
    6. Migration guide from 2.5 to 2.6
    7. Migration guide from 2.4 to 2.5
    8. Migration guide from 2.3 to 2.4
    9. Migration guide from 2.2 to 2.3
  12. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  13. Documentation for older versions
Table of contents

Migration guide from 2.3 to 2.4

Read this tutorial for comfortable and quick migration to the new major version. The tutorial contains the following sections:

  1. How to embed the component into your website
  2. API updates
  3. Built-in themes
  4. Changes in CSS
  5. Changes in the Toolbar customization
  6. Accelerators
  7. Documentation for older versions

How to embed the component into your website

Starting from version 2.4, jQuery is no longer required. Before embedding the component, include flexmonster.js:

<script src="flexmonster/flexmonster.js"></script>

In previous versions the $.flexmonster() and embedPivotComponent() functions were used to embed the component. In version 2.4, they were deprecated. However, they are still supported for backward compatibility. Note, to use $.flexmonster() you need to include the jQuery library before flexmonster.js.

To embed Flexmonster in version 2.4, create the pivot table object like this:

var pivot = new Flexmonster({

Notice that the container property should specify a selector for the HTML element that you would like to use as a container for the component. This is the only required property in the configuration object. If you run new Flexmonster({container: "pivotContainer"}), where "pivotContainer" is the selector of the container HTML element, – an empty component without the Toolbar will be added with the default width and height. The configuration object can have the following properties:

  • container – String. The selector of the HTML element that will be a container for the component.
  • componentFolder – String. The URL of the component’s folder that contains all the necessary files. It is also used as the base URL for report files, localization files, styles, and images. Default value: "flexmonster/".
  • globalGlobalObject. Allows you to preset options for all reports. These options can be overridden for specific reports.
  • width – Number | String. The width of the component on the page (either in pixels or as a percentage). Default value: "100%".
  • height – Number | String. The height of the component on the page (either in pixels or as a percentage). Default value: 500.
  • reportReportObject | String. The property to set a report. It can be an inline report JSON or a URL to the report JSON. XML reports are also supported for backward compatibility.
  • toolbar – Boolean. The parameter to embed the Toolbar (the one that is shown in the pivot table demo) or not. Default value: false.
  • customizeCell – Function. Allows the customization of separate cells.
  • licenseKey – String. Your license key.

Event handlers can also be set as properties for the Flexmonster object.

The initialization statement returns a reference to the created component instance. The API methods are available through this reference.

API updates

Please have a look at the changes in our API:

  1. The customizeCell hook was improved:
    • The html property (string containing HTML) was replaced with a special cell builder cell. It is an object that contains the current representation of the cell on the grid and through which the cell representation can be customized. It has the following properties and methods:
      • attr – Object. All attributes and their values for the HTML element. Custom attributes can be added to the cell and, for example, used in CSS selectors to identify the cell. Read more info about CSS attribute selectors here.
      • classes – Array of strings. The array of classes assigned to the cell. The addClass() method should be used to add new classes.
      • style – Object. A CSS object of the element that will be put in the style attribute of the element for inline styling.
      • tag – String. The tag of the element (each cell has a tag: "div").
      • text – String. The text of the element. It may also contain HTML, for example, icons to expand, collapse, drill up and down, sorting, etc.
      • addClass(value: String) – Method. Use this method to add new classes to the element.
      • toHtml() – Method. Returns the HTML string that represents the cell. It gathers all the properties of the cell builder object into HTML. This is how the cell gets added to the grid.
    • The data property, which contains information about the cell, now provides more information. Check out the full list of properties in the CellDataObject.
    Note that customizeCell is NOT backward compatible. You need to update your customizeCell functions in accordance with these changes.
  2. The ConditionalFormatObject was updated:
    • The formula property property was simplified, now it should contain only the condition (e.g. '#value > 100').
    • The trueStyle property was renamed to format. Also, inside the format object, the fontSize property should be set as "14px" instead of "14".
    • The falseStyle property was removed.
    For example, this definition of the condition object:
    var condition = {
    id: 1,
    formula: 'if(#value > 400000, "trueStyle")',
    trueStyle: {
    fontSize : 10,
    backgroundColor: "#33BB33" }
    should be replaced with the following one:
    var condition = {
    id: 1,
    formula: '#value > 400000',
    format: { fontSize : "10px",
    backgroundColor: "#33BB33"

    There is also a new property formatCSS in the ConditionalFormatObject. This is a string which represents the ready to use CSS string of the format style object (formerly trueStyle).
    The syntax from the previous version is functional in terms of backward compatibility.
  3. The fullscreen API call was removed. Use Fullscreen from the Toolbar instead.
  4. The getPages API call was renamed to getReportFilters.
  5. The property pages from the ReportObject was renamed to reportFilters (with backward compatibility).
  6. The properties configuratorMatchHeight and pagesFilterLayout were removed from the OptionsObject.
  7. The default value of configuratorActive property inside the OptionsObject was changed to false.
  8. Two new events were added:
    • beforegriddraw – String. Triggered before grid rendering.
    • aftergriddraw – String. Triggered after grid rendering.

Built-in themes

Starting from version 2.4, you can choose between several predefined CSS themes. All themes are placed inside the theme/ folder. To set a theme, add the CSS reference. For example, to show the lightblue theme, insert the following line of code:

<link rel="stylesheet" type="text/css" href="/theme/lightblue/flexmonster.min.css" />

Our 2.3-styled theme is available as well and can be set like this:

<link rel="stylesheet" type="text/css" href="/theme/old/flexmonster.min.css" />

Changes in CSS

In version 2.4 we decided to simplify the maintenance of CSS. The following changes were made:

  • flexmonster.css and flexmonster.toolbar.css were merged into one file flexmonster.css. Note that the changes with CSS files are NOT backward compatible, so you need to replace your old flexmonster.css file. Also note that selectors were changed, so you need to update any custom CSS files based on flexmonster.css.
  • We started using Less (a CSS pre-processor). With the download package you get CSS, minified CSS, and the Less source code files. It allows you to add your own styles on top of Less files and then compile them to CSS. This is extremely useful for creating your own themes. Just copy the Less file with one of our themes and redefine several variables with basic colors to create your custom theme.

Changes in the Toolbar customization

The order of tabs in the Toolbar was changed. Additionally, the icons are now a vector. If you like the new icons, you can use them in your customizeToolbar function (a JS function for the beforetoolbarcreated event) like this:

// add new tab
id: "fm-tab-save",
title: "Save",
handler: "savetabHandler",

id: "fm-tab-reload",
title: "Reload",
handler: "reloadCube",
icon: this.icons.connect

You can use the icon property to add your own icons. This property has the type string and represents an HTML tag containing the custom icon for the new tab. Note, in this case any CSS with old icons should be removed.


Starting from version 2.4, our Accelerators work considerably faster. If you are using Flexmonster Accelerator for Microsoft Analysis Services or Flexmonster Accelerator for Pentaho Mondrian, keep in mind that they should be updated as well.

Documentation for older versions

If you need documentation from some older versions, it is always available at the following links: