🎉 Flexmonster Pivot Table & Charts v2.8 has arrived!Read the blog post
Get Free Trial
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. Cell Data Object
    11. Chart Data Object
    12. Toolbar 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. customizeContextMenu
    15. dispose
    16. expandAllData
    17. expandData
    18. exportTo
    19. getAllConditions
    20. getAllHierarchies
    21. getAllMeasures
    22. getCell
    23. getColumns
    24. getCondition
    25. getFilter
    26. getFormat
    27. getMeasures
    28. getMembers
    29. getOptions
    30. getReport
    31. getReportFilters
    32. getRows
    33. getSelectedCell
    34. getSort
    35. getXMLACatalogs
    36. getXMLACubes
    37. getXMLADataSources
    38. getXMLAProviderName
    39. load
    40. off
    41. on
    42. open
    43. openCalculatedValueEditor
    44. openFieldsList
    45. openFilter
    46. print
    47. refresh
    48. removeAllCalculatedMeasures
    49. removeAllConditions
    50. removeCalculatedMeasure
    51. removeCondition
    52. removeSelection
    53. runQuery
    54. save
    55. setFilter
    56. setFormat
    57. setOptions
    58. setReport
    59. setSort
    60. showCharts
    61. showGrid
    62. showGridAndCharts
    63. sortingMethod
    64. sortValues
    65. 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. update
  5. Custom API requests
    1. All requests
    2. /handshake request
    3. /fields request
    4. /members request
    5. /select request for pivot table
    6. /select request for flat table
    7. /select request for drill-through view
    8. Field Object
  6. MongoDB Connector API
    1. All methods
    2. getSchema
    3. getMembers
    4. getSelectResult
Table of contents

Flexmonster()

new Flexmonster({
container: String,
componentFolder: String,
global: ReportObject,
width: Number,
height: Number,
report: ReportObject | String,
toolbar: Boolean,
customizeCell: Function,
customizeContextMenu: Function,
customizeAPIRequest: Function,
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 to provide it with all 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 global object.

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

Parameters

    • container – the selector of the HTML element you would like to have as 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. Default value: flexmonster/.
    • global – object that allows you to preset options for all reports. These options can be overwritten for concrete reports. Object structure is the same as for Report Object.
    • width – width of the component on the page (pixels or percent). Default value: 100%.
    • height – height of the component on the page (pixels or percent). Default value: 500.
    • report – property to set a report. It can be inline Report Object or URL to report JSON.
    • toolbar – parameter to embed the toolbar or not. Default value: false (without the Toolbar).
    • customizeCell – function that allows customizing of separate cells. Have a look at customizeCell definition and examples.
    • customizeContextMenu – function that allows customizing context menu. Have a look at customizeContextMenu definition and examples.
    • customizeAPIRequest – functions that allows adding custom properties to the request body before the request is sent to a server. Have a look at customizeAPIRequest definition and examples.
    • licenseKey – 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. If you want to work with multiple instances on the same page use these objects. All API calls are available through them.

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 with 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