Get Free Trial
Get Free Trial
  1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
    6. Migrating from WebDataRocks to Flexmonster
  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. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
  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

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: