Get Free Trial
  1. API reference
    1. Introduction
    2. Flexmonster()
  2. Objects
    1. All objects
    2. Report Object
    3. Data Source Object
    4. Mapping Object
    5. Slice Object
    6. Options Object
    7. Filtering
      1. Filter Object
      2. Number Query Object
      3. String Query Object
      4. Date Query Object
      5. Time Query Object
      6. Value Query Object
    8. Format Object
    9. Conditional Format Object
    10. Table Sizes Object
    11. Cell Data Object
    12. Chart Data Object
    13. Toolbar Object
    14. Chart Legend Data Object
    15. Share Report Connection Object
  3. Methods
    1. All methods
    2. addCalculatedMeasure
    3. addCondition
    4. alert
    5. clear
    6. clearFilter
    7. clearXMLACache
    8. closeFieldsList
    9. collapseAllData
    10. collapseData
    11. connectTo
    12. customizeAPIRequest
    13. customizeCell
    14. customizeChartElement
    15. customizeContextMenu
    16. dispose
    17. expandAllData
    18. expandData
    19. exportTo
    20. getAllConditions
    21. getAllHierarchies
    22. getAllHierarchiesAsync
    23. getAllMeasures
    24. getAllMeasuresAsync
    25. getCell
    26. getColumns
    27. getColumnsAsync
    28. getCondition
    29. getFilter
    30. getFlatSort
    31. getFormat
    32. getMeasures
    33. getMeasuresAsync
    34. getMembers
    35. getMembersAsync
    36. getOptions
    37. getReport
    38. getReportFilters
    39. getReportFiltersAsync
    40. getRows
    41. getRowsAsync
    42. getSelectedCell
    43. getSort
    44. getTableSizes
    45. getXMLACatalogs
    46. getXMLACatalogsAsync
    47. getXMLACubes
    48. getXMLACubesAsync
    49. getXMLADataSources
    50. getXMLADataSourcesAsync
    51. getXMLAProviderName
    52. getXMLAProviderNameAsync
    53. load
    54. off
    55. on
    56. open
    57. openCalculatedValueEditor
    58. openFieldsList
    59. openFilter
    60. print
    61. refresh
    62. removeAllCalculatedMeasures
    63. removeAllConditions
    64. removeCalculatedMeasure
    65. removeCondition
    66. removeSelection
    67. runQuery
    68. save
    69. scrollToColumn
    70. scrollToRow
    71. setFilter
    72. setFlatSort
    73. setFormat
    74. setOptions
    75. setReport
    76. setSort
    77. setTableSizes
    78. shareReport
    79. showCharts
    80. showGrid
    81. showGridAndCharts
    82. sortingMethod
    83. sortValues
    84. updateData
  4. Events
    1. All events
    2. afterchartdraw
    3. aftergriddraw
    4. beforegriddraw
    5. beforetoolbarcreated
    6. cellclick
    7. celldoubleclick
    8. chartclick
    9. datachanged
    10. dataerror
    11. datafilecancelled
    12. dataloaded
    13. drillthroughclose
    14. drillthroughopen
    15. exportcomplete
    16. exportstart
    17. fieldslistclose
    18. fieldslistopen
    19. filterclose
    20. filteropen
    21. loadingdata
    22. loadinglocalization
    23. loadingolapstructure
    24. loadingreportfile
    25. localizationerror
    26. localizationloaded
    27. olapstructureerror
    28. olapstructureloaded
    29. openingreportfile
    30. printcomplete
    31. printstart
    32. querycomplete
    33. queryerror
    34. ready
    35. reportchange
    36. reportcomplete
    37. reportfilecancelled
    38. reportfileerror
    39. runningquery
    40. unauthorizederror
    41. update
  5. Custom data source API
    1. All requests
    2. /handshake request
    3. /fields request
    4. /members request
    5. /select request for the pivot table
    6. /select request for the flat table
    7. /select request for the drill-through view
    8. Field Object
    9. Filter Object
    10. Filter Group Object
  6. MongoDB Connector API
    1. All methods
    2. getSchema
    3. getMembers
    4. getSelectResult
  7. Flexmonster Connector for amCharts
    1. All methods
    2. amcharts.getData
    3. amcharts.getCategoryName
    4. amcharts.getMeasureNameByIndex
    5. amcharts.getNumberOfMeasures
    6. amcharts.getNumberFormatPattern
Table of contents

Flexmonster()

new Flexmonster({
container: String,
componentFolder: String,
global: Report Object,
width: Number,
height: Number,
report: Report Object | String,
toolbar: Boolean,
accessibility: Object,
customizeCell: Function,
customizeChartElement: Function,
customizeContextMenu: Function,
customizeAPIRequest: Function,
shareReportConnection: Share Report Connection Object,
licenseKey: String
})

[starting from version: 2.4]

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.

Starting from version 2.3, you can preset options for all reports using the global object.

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

Parameters

  • container – String. The selector of the HTML element you would like to have as a container for the component.
  • componentFolder – String. 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/.
  • global – Object. It allows you to preset options for all reports. These options can be overwritten for specific reports. The object structure is the same as for the Report Object.
  • width – Number. Width of the component on the page (pixels or percent). Default value: 100%.
  • height – Number. Weight of the component on the page (pixels or percent). Default value: 500.
  • report – Report Object | String. A property to set a report. It can be inline Report Object or URL to report JSON.
  • toolbar – Boolean. It indicates whether the toolbar is embedded or not. Default value: false (without the Toolbar).
  • accessibility – Object. Allows configuring accessibility in Flexmonster. Has the following properties:
  • customizeCell – Function. Allows customizing of separate cells. Have a look at customizeCell definition and examples.
  • customizeChartElement – Function. Allows customizing separate chart elements in Flexmonster Charts. Have a look at the customizeChartElement definition and examples.
  • customizeContextMenu – Function. Allows customizing the context menu. Have a look at customizeContextMenu definition and examples.
  • customizeAPIRequest – Function. Allows adding custom properties to the request body before the request is sent to a server. Have a look at customizeAPIRequest definition and examples.
  • shareReportConnectionShare Report Connection Object. 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.
  • licenseKey – String. The license key.

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

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 web page without the Toolbar:

<div id="pivotContainer">The component will appear here</div> 
<script src="flexmonster/flexmonster.js"></script>

<script>
	var pivot = new Flexmonster({
		container: "pivotContainer",
		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>
	var pivot = new Flexmonster({
		container: "pivotContainer",
		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>
	var pivot1 = new Flexmonster({
		container: "pivotContainer",
		toolbar: true,
		report: {
			dataSource: {
				filename: "data.csv"
			}
		},
		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
	});

	var pivot2 = new Flexmonster({
		container: "pivotContainer",
		toolbar: true,
		report: {
			dataSource: {
				filename: "data2.csv"
			}    	
		},
		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
	});
</script>

<button onclick="javascript: swapReports()">Swap Reports</button>
<script>
	function swapReports() {
		var report1 = pivot1.getReport();
		var report2 = pivot2.getReport();

		pivot1.setReport(report2);
		pivot2.setReport(report1);
	}
</script>

Try the example on JSFiddle.

4) Set event handler via Flexmonster():

var pivot = new Flexmonster ({
	container: "pivotContainer",
	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) How to use customizeCell:

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

Check out the full example on JSFiddle.

See also

list of events