1. API reference
    1. Introduction
    2. Flexmonster()
  2. Objects
    1. All objects
    2. Report Object
    3. Slice Object
    4. Options Object
    5. Format Object
    6. Conditional Format Object
    7. Cell Data 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. getData
    25. getFilter
    26. getFilterProperties
    27. getFormat
    28. getMeasures
    29. getMembers
    30. getOptions
    31. getReport
    32. getReportFilters
    33. getRows
    34. getSelectedCell
    35. getSort
    36. getXMLACatalogs
    37. getXMLACubes
    38. getXMLADataSources
    39. getXMLAProviderName
    40. load
    41. off
    42. on
    43. open
    44. openFieldsList
    45. print
    46. refresh
    47. removeAllCalculatedMeasures
    48. removeAllConditions
    49. removeCalculatedMeasure
    50. removeCondition
    51. removeSelection
    52. runQuery
    53. save
    54. setBottomX
    55. setFilter
    56. setFormat
    57. setOptions
    58. setReport
    59. setSort
    60. setTopX
    61. showCharts
    62. showGrid
    63. showGridAndCharts
    64. sortingMethod
    65. sortValues
    66. updateData
  4. Events
    1. All events
    2. aftergriddraw
    3. beforegriddraw
    4. beforetoolbarcreated
    5. cellclick
    6. celldoubleclick
    7. datachanged
    8. dataerror
    9. datafilecancelled
    10. dataloaded
    11. exportcomplete
    12. exportstart
    13. fieldslistclose
    14. fieldslistopen
    15. filteropen
    16. loadingdata
    17. loadinglocalization
    18. loadingolapstructure
    19. loadingreportfile
    20. localizationerror
    21. localizationloaded
    22. olapstructureerror
    23. olapstructureloaded
    24. openingreportfile
    25. printcomplete
    26. printstart
    27. querycomplete
    28. queryerror
    29. ready
    30. reportchange
    31. reportcomplete
    32. reportfilecancelled
    33. reportfileerror
    34. runningquery
    35. update
Table of contents

$.flexmonster

$.flexmonster() method was deprecated in version 2.4. You should use new Flexmonster() instead.

$(“#pivotContainer”).flexmonster({
    componentFolder: String,
    global: ReportObject,
    width: Number,
    height: Number,
    report: ReportObject | String,
    toolbar: Boolean,
    customizeCell: Function,
    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 or URL to report JSON. XML reports are also supported in terms of backward compatibility.
    • toolbar – parameter to embed the toolbar or not. Default value is false – without the toolbar.
    • customizeCell – function that allows customizing of separate cells.
    • 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.

    After initialization, you can obtain an instance reference of the created component by selector as following: var pivot = $("#pivot").data("flexmonster");

    Examples

    1) Add the component instance to your web page 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>

    2) Add 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>

    3) Get the component instance by selector:

    <div id="pivot">The component will appear here</div> 
    <script src="flexmonster/lib/jquery.min.js"></script>
    <script src="flexmonster/flexmonster.js"></script>
    
    <button onclick="getRefBySelector()">Get Reference</button>
    
    <script type="text/javascript">
        $("#pivot").flexmonster({
            licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
            width: "100%",
            height: 350,
            toolbar: true
        });
                
        function getRefBySelector() {
            var pivot = $("#pivot").data("flexmonster");
            pivot.setReport({
                dataSource: {
                    filename: "http://www.flexmonster.com/download/data.csv"
                }
            });
        }
    </script>
    

    Check out the example on JSFiddle.

    4) 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>
    

    5) 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");
    	}
    });
    

    6) How to use customizeCell:

    $("#pivot-container").flexmonster({
      	customizeCell: function(html, data) {
    		// change html
    		return html;
    	},
    	...
    });
    

    Check out the full example on JSFiddle.

    See also

    list of events