1. API reference
    1. Introduction
    2. Flexmonster()
  2. Objects
    1. All objects
    2. Report Object
    3. Data Source Object
    4. Slice Object
    5. Options Object
    6. Filtering
      1. Filter Object
      2. Number Query Object
      3. String Query Object
      4. Date Query Object
      5. Time Query Object
      6. Value Query Object
    7. Format Object
    8. Conditional Format Object
    9. Cell Data Object
    10. 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. customizeCell
    13. customizeContextMenu
    14. dispose
    15. expandAllData
    16. expandData
    17. exportTo
    18. getAllConditions
    19. getAllHierarchies
    20. getAllMeasures
    21. getCell
    22. getColumns
    23. getCondition
    24. getFilter
    25. getFormat
    26. getMeasures
    27. getMembers
    28. getOptions
    29. getReport
    30. getReportFilters
    31. getRows
    32. getSelectedCell
    33. getSort
    34. getXMLACatalogs
    35. getXMLACubes
    36. getXMLADataSources
    37. getXMLAProviderName
    38. load
    39. off
    40. on
    41. open
    42. openFieldsList
    43. openFilter
    44. print
    45. refresh
    46. removeAllCalculatedMeasures
    47. removeAllConditions
    48. removeCalculatedMeasure
    49. removeCondition
    50. removeSelection
    51. runQuery
    52. save
    53. setFilter
    54. setFormat
    55. setOptions
    56. setReport
    57. setSort
    58. showCharts
    59. showGrid
    60. showGridAndCharts
    61. sortingMethod
    62. sortValues
    63. updateData
  4. Events
    1. All events
    2. afterchartdraw
    3. aftergriddraw
    4. beforegriddraw
    5. beforetoolbarcreated
    6. cellclick
    7. celldoubleclick
    8. datachanged
    9. dataerror
    10. datafilecancelled
    11. dataloaded
    12. exportcomplete
    13. exportstart
    14. fieldslistclose
    15. fieldslistopen
    16. filterclose
    17. filteropen
    18. loadingdata
    19. loadinglocalization
    20. loadingolapstructure
    21. loadingreportfile
    22. localizationerror
    23. localizationloaded
    24. olapstructureerror
    25. olapstructureloaded
    26. openingreportfile
    27. printcomplete
    28. printstart
    29. querycomplete
    30. queryerror
    31. ready
    32. reportchange
    33. reportcomplete
    34. reportfilecancelled
    35. reportfileerror
    36. runningquery
    37. update
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,
    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. The default value for componentFolder is 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). The default value for width is 100%.
    • height – height of the component on the page (pixels or percent). The default value for height is 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 is 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.
    • 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