Menu
Free Trials
  1. API reference
    1. flexmonster
    2. Report Object
    3. Options Object
    4. Format Object
  2. Methods
    1. addCalculatedMeasure
    2. addCondition
    3. addJSON
    4. addMeasure
    5. addStyleToMember
    6. addUrlToMember
    7. clear
    8. clearFilter
    9. clearXMLACache
    10. closeFieldsList
    11. collapseAllData
    12. collapseData
    13. connectTo
    14. dispose
    15. embedPivotComponent
    16. expandAllData
    17. expandData
    18. exportTo
    19. fullScreen
    20. getAllConditions
    21. getAllHierarchies
    22. getAllMeasures
    23. getCell
    24. getColumns
    25. getColumnWidth
    26. getCondition
    27. getData
    28. getFilter
    29. getFilterProperties
    30. getFormat
    31. getLabels
    32. getMeasures
    33. getMembers
    34. getOptions
    35. getPages
    36. getReport
    37. getRowHeight
    38. getRows
    39. getSelectedCell
    40. getSort
    41. getValue
    42. getXMLACatalogs
    43. getXMLACubes
    44. getXMLADataSources
    45. getXMLAProviderName
    46. gridColumnCount
    47. gridRowCount
    48. load
    49. off
    50. on
    51. open
    52. openFieldsList
    53. percentZoom
    54. print
    55. refresh
    56. removeAllCalculatedMeasures
    57. removeAllConditions
    58. removeAllMeasures
    59. removeCalculatedMeasure
    60. removeCondition
    61. removeMeasure
    62. removeSelection
    63. runQuery
    64. save
    65. setBottomX
    66. setChartTitle
    67. setColumnWidth
    68. setFilter
    69. setFormat
    70. setGridTitle
    71. setHandler
    72. setLabels
    73. setOptions
    74. setReport
    75. setRowHeight
    76. setSelectedCell
    77. setSort
    78. setStyle
    79. setTopX
    80. showCharts
    81. showGrid
    82. showGridAndCharts
    83. sortValues
    84. updateData
    85. zoomTo
    86. jsCellClickHandler
    87. jsFilterOpenHandler
    88. jsFieldsListCloseHandler
    89. jsFieldsListOpenHandler
    90. jsFullScreenHandler
    91. jsPivotCreationCompleteHandler
    92. jsPivotUpdateHandler
    93. jsReportChangeHandler
    94. jsReportLoadedHandler
  3. Events
    1. cellclick
    2. celldoubleclick
    3. dataerror
    4. datafilecancelled
    5. dataloaded
    6. exportcomplete
    7. exportstart
    8. fieldslistclose
    9. fieldslistopen
    10. filteropen
    11. loadingdata
    12. loadinglocalization
    13. loadingolapstructure
    14. loadingreportfile
    15. localizationerror
    16. localizationloaded
    17. olapstructureerror
    18. olapstructureloaded
    19. openingreportfile
    20. printcomplete
    21. printstart
    22. querycomplete
    23. queryerror
    24. ready
    25. reportchange
    26. reportcomplete
    27. reportfilecancelled
    28. reportfileerror
    29. reportfileloaded
    30. runningquery
    31. update
Table of contents

flexmonster

$(“#pivotContainer”).flexmonster({
    componentFolder: String,
    global: ReportObject,
    width: Number,
    height: Number,
    report: ReportObject | String,
    toolbar: Boolean,
    licenseKey: String
})

[starting from version: 2.3]

Embeds the component into the HTML page.
As a parameter jQuery call gets #pivotContainer – id of the HTML element you would like to have as a container for the component.
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 jQuery and flexmonster.js before you start working with it.

Parameters

    • 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, URL to report JSON or URL to report XML.
    • toolbar – parameter to embed the toolbar or not. Default value is false – without the toolbar.
    • licenseKey – the license key.

Event handlers can also be set as properties for the jQuery call. Check the list here.

    All the parameters are optional. If you run $("#pivotContainer").flexmonster() – 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

    Add the component instance to your web page:

    a) the component without toolbar:

    <div id="pivotContainer">The component will appear here</div> 
    <script src="flexmonster/lib/jquery.min.js"></script>
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
    	var pivot = $("#pivotContainer").flexmonster({
    		report: {
    			dataSource: {
    				filename: "data.csv"
    			}
    		},
    		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    	});
    </script>

    b) the component with toolbar:

    <div id="pivotContainer">The component will appear here</div> 
    <script src="flexmonster/lib/jquery.min.js"></script>
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
    	var pivot = $("#pivotContainer").flexmonster({
    		toolbar: true,
    		report: {
    			dataSource: {
    				filename: "data.csv"
    			}
    		},
    		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    	});
    </script>

    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/lib/jquery.min.js"></script>
    <script src="flexmonster/flexmonster.js"></script>
    
    <script>
    	var pivot1 = $("#firstPivotContainer").flexmonster({
    		toolbar: true,
    		report: {
    			dataSource: {
    				filename: "data.csv"
    			}
    		},
    		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
    	});
    
    
    	var pivot2 = $("#secondPivotContainer").flexmonster({
    		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>
    

    Set event handler via $("#pivotContainer").flexmonster():

    var pivot = $("#pivotContainer").flexmonster ({
    	toolbar: true,
    	report: {
    		dataSource: {
    			filename: "data.csv"
    		}    	
    	},
    	licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
    	ready : function () {
    		console.log("The component was created");
    	}
    });
    

    See also

    list of events