API reference
Table of contents

Flexmonster()

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

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.

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

Parameters

Parameter/Type Description
container
String
The selector of the HTML element you would like to have as a container for the component.
componentFolder
String
optional 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/".
width
Number | String
optional Width of the component on the page (pixels or percent).
Default value: "100%".
height
Number | String
optional Height of the component on the page (pixels or percent).
Default value: 500.
toolbar
Boolean
optional It indicates whether the toolbar is embedded or not.
Default value: false (without the Toolbar).
licenseKey
String
optional The license key. Learn more about managing license keys.
report
ReportObject | String
optional A property to set a report. It can be an inline ReportObject or a URL to a report. Specify the report as a URL if your report is:
  • Stored in a JSON file.
  • Returned by a server-side script.
global
GlobalObject
optional It allows you to preset configurations for all reports. These configurations can be overwritten for specific reports.
accessibility
Object
optional Allows configuring accessibility in Flexmonster.
accessibility.keyboardMode
Boolean
optional If set to true, the keyboard focus is visible on UI elements. Learn more about keyboard navigation in Flexmonster.
Default value: false.
accessibility.highContrastTheme
String
optional Contains a link to a CSS theme that will be used as a high-contrast one. Learn more about using the high-contrast theme in Flexmonster.
Default value: "theme/accessible/flexmonster.min.css" (the path is relative to the componentFolder).
customizeCell
Function
optional Allows customizing of separate cells. Have a look at customizeCell definition and examples.
customizeChartElement
Function
optional Allows customizing separate chart elements in Flexmonster Charts. Have a look at the customizeChartElement definition and examples.
customizeContextMenu
Function
optional Allows customizing the context menu. Have a look at customizeContextMenu definition and examples.
customizeAPIRequest
Function
optional Allows adding custom properties to the request body before the request is sent to a server. Have a look at customizeAPIRequest definition and examples.
sortFieldsList
Function
optional Allows setting custom sorting for Field List items. Have a look at sortFieldsList definition and examples.
shareReportConnection
ShareReportConnectionObject
optional 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.

Event handlers can also be set as properties for the 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 webpage 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