Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial
  1. API reference
  2. Welcome
    1. Component overview
    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. Integration with Angular
    3. Integration with React
    4. Integration with Vue
    5. Other integrations
      1. Integration with Python
        1. Integration with Django
        2. Integration with Jupyter Notebook
      2. Integration with React Native
      3. Integration with AngularJS (v1.x)
      4. Integration with TypeScript
      5. Integration with R Shiny
      6. Integration with jQuery
      7. Integration with Ionic
      8. Integration with Electron.js
      9. Integration with Webpack
      10. 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. Data types in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Data types 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
      6. Connecting to other databases
    5. Flexmonster Data Server
      1. Getting started with Flexmonster Data Server
      2. Installation guide
      3. Configurations reference
      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. Referring 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
    6. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referring 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. Returning data for the drill-through view
    9. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    10. 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
  5. 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
  6. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Mapping
    6. Number formatting
    7. Conditional formatting
    8. Set the report for the component
    9. Get the report from the component
    10. Date and time formatting
    11. Configuring global options
    12. Export and print
    13. Calculated values
    14. Custom sorting
  7. 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
  8. Customizing
    1. Customizing the Toolbar
    2. Customizing appearance
    3. Customizing the context menu
    4. Customizing the grid
    5. Customizing the pivot charts
    6. Localizing the component
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.7 to 2.8
    4. Migration guide from 2.6 to 2.7
    5. Migration guide from 2.5 to 2.6
    6. Migration guide from 2.4 to 2.5
    7. Migration guide from 2.3 to 2.4
    8. Migration guide from 2.2 to 2.3
    9. Documentation for older versions
  10. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
Table of contents

Migration guide from 2.3 to 2.4

From Flexmonster Pivot Table & Charts 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({
    container:String,
    componentFolder:String, 
    global:Object, 
    width:Number, 
    height:Number, 
    report:Object|String, 
    toolbar:Boolean, 
    customizeCell:Function,
    licenseKey:String
})

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/".
  • global Report Object. Allows you to preset options for all reports. These options can be overridden for specific reports. The structure of this object is the same as for report.
  • 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.
  • report Report Object | 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 Cell Data Object.

    Note that customizeCell is NOT backward compatible. You need to update your customizeCell functions in accordance with these changes.

  2. The Conditional Format Object 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 Conditional Format Object. 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 Report Object was renamed to reportFilters (with backward compatibility).
  6. The properties configuratorMatchHeight and pagesFilterLayout were removed from the Options Object.
  7. The default value of configuratorActive property inside the 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, 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
tabs.unshift({
id: "fm-tab-save",
title: "Save",
handler: "savetabHandler",
icon: this.icons.save
});

tabs.unshift({
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.

Accelerators

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: