1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Connecting to JSON using the Data Compressor
      3. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using the Data Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to a database with Node.js
      4. Connecting to a database with .NET
      5. Connecting to a database with .NET Core
      6. Connecting to a database with Java
      7. Connecting to a database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with the Accelerator
      3. Installing the Accelerator as a Windows service
      4. Referring the Accelerator as a DLL
      5. Configuring the authentication process
      6. Configuring a secure HTTPS connection
      7. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    6. Connecting to Elasticsearch
  4. Security
    1. Security in Flexmonster
    2. Security aspects when connecting to an OLAP cube
      1. The data transfer process
      2. Data security
      3. Data access management
    3. Security aspects when connecting to a database
      1. The data transfer process
      2. Data access management
  5. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set the report for the component
    8. Get the report from the component
    9. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  6. Integration with frameworks
    1. Available tutorials
    2. Integration with AngularJS (v1.x)
    3. Integration with Angular
    4. Integration with React
    5. Integration with Webpack
    6. Integration with ASP.NET
    7. Integration with jQuery
    8. Integration with JSP
    9. Integration with TypeScript
    10. Integration with RequireJS
    11. Integration with PhoneGap
  7. Integration with charts
    1. Integration with Highcharts
    2. Integration with Google Charts
    3. Integration with FusionCharts
    4. Integration with any charting library
  8. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Customizing context menu
    4. Localizing component
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.6 to 2.7
    4. Migration guide from 2.5 to 2.6
    5. Migration guide from 2.4 to 2.5
    6. Migration guide from 2.3 to 2.4
    7. Migration guide from 2.2 to 2.3
    8. Documentation for older versions
Table of contents

Migration guide from 2.3 to 2.4

From Flexmonster Pivot Table & Charts 2.3 to 2.4

Please read this tutorial for comfortable and quick migration to the new major version. Look through the following sections:

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

How to embed pivot component into your website

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

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

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

To embed pivot component in version 2.4, you should create Flexmonster object the following way:

var pivot = new Flexmonster({

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

  • container – property to set a selector of the HTML element which will be a container for the component.
  • componentFolder – 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. The default value for componentFolder is flexmonster/.
  • global – object that allows you to preset options for all reports. These options can be overwritten for concrete reports. The structure of the object is the same as for report.
  • width – width of the component on the page (pixels or percent). The default value for width is 100%.
  • height – height of the component on the page (pixels or percent). The default value for height is 500.
  • report – property to set a report. It can be inline report JSON or URL to report JSON. XML reports are also supported in terms of backward compatibility.
  • toolbar – parameter to embed the toolbar (the one that is shown in Pivot Table demo) or not. The default value is false – without toolbar.
  • customizeCell – function that allows customizing of separate cells.
  • licenseKey – the license key.

Event handlers can also be set as properties for 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. customizeCell API call was improved:
    • html property (string containing HTML) was replaced with a special cell builder cell. It is the 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.
      • classes – Array of strings. The array of classes assigned to the cell. addClass() method should be used to add the new class.
      • style – Object. CSS object of the element that will be put in style attribute of the element for inline styling.
      • tag – String. The tag of the element (each cell has tag: "div").
      • text – String. The text of the element which may also contain HTML, e.g. icons for 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 HTML string that represents the cell. It gathers all the properties of the cell builder object into HTML. This is how the cell will be added to the grid.
    • data property, which contains information about the cell, now provides more information. Check the full list of properties in Cell Data Object.
    Please note, customizeCell API call is NOT backward compatible. You need to update your customizeCell functions in accordance with the changes.
  2. Conditional Format Object was updated:
    • formula property was simplified, now it should contain only the condition (e.g. '#value > 100').
    • trueStyle property was renamed to format. Also, inside format object, fontSize property should be set as "14px" instead of "14".
    • falseStyle property was removed.
    For example, such definition of 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"}
    Also, there is a new property formatCSS in Conditional Format Object. This is a string which represents ready to use CSS string of format style object (former trueStyle).
    The syntax from the previous version is available in terms of backward compatibility.
  3. fullscreen API call was removed. You should use Fullscreen from the Toolbar instead.
  4. getPages API call was renamed to getReportFilters.
  5. Property pages from Report Object was renamed to reportFilters (with backward compatibility).
  6. Properties configuratorMatchHeight and pagesFilterLayout were removed from Options Object.
  7. The default value of configuratorActive property inside Options Object 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, it is possible to choose between several predefined CSS themes. All themes are placed inside theme/ folder. For setting a theme you should add the CSS reference. For example, to show the lightblue theme you need to 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 this way:

<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. Please note, the changes with CSS files are NOT backward compatible. You should replace your old flexmonster.css file. Please note, selectors were changed notably so you need to update your custom CSS files based on flexmonster.css.
  • We started using Less (CSS pre-processor). With the downloaded package you get CSS, minified CSS and Less source code files. It allows adding your own styles on top of Less files and compile them to CSS. This is extremely useful for creating your own themes. You just need to copy the Less file with one of our themes and redefine several variables with basic colors to create your custom theme.

Changes in Toolbar customization

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

// add new tab
  id: "fm-tab-save",
  title: "Save",
  handler: "savetabHandler",
  icon: this.icons.save

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

You can use icon property to add your own icons. This property has string type and it represents an HTML tag containing custom icon for the new tab. Please note, in this case 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, please 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 by the following links: