Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
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. Table Sizes Object
    11. Cell Data Object
    12. Chart Data Object
    13. Toolbar Object
    14. Chart Legend 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. customizeAPIRequest
    13. customizeCell
    14. customizeChartElement
    15. customizeContextMenu
    16. dispose
    17. expandAllData
    18. expandData
    19. exportTo
    20. getAllConditions
    21. getAllHierarchies
    22. getAllMeasures
    23. getCell
    24. getColumns
    25. getCondition
    26. getFilter
    27. getFlatSort
    28. getFormat
    29. getMeasures
    30. getMembers
    31. getOptions
    32. getReport
    33. getReportFilters
    34. getRows
    35. getSelectedCell
    36. getSort
    37. getTableSizes
    38. getXMLACatalogs
    39. getXMLACubes
    40. getXMLADataSources
    41. getXMLAProviderName
    42. load
    43. off
    44. on
    45. open
    46. openCalculatedValueEditor
    47. openFieldsList
    48. openFilter
    49. print
    50. refresh
    51. removeAllCalculatedMeasures
    52. removeAllConditions
    53. removeCalculatedMeasure
    54. removeCondition
    55. removeSelection
    56. runQuery
    57. save
    58. setFilter
    59. setFlatSort
    60. setFormat
    61. setOptions
    62. setReport
    63. setSort
    64. setTableSizes
    65. showCharts
    66. showGrid
    67. showGridAndCharts
    68. sortingMethod
    69. sortValues
    70. 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. unauthorizederror
    41. update
  5. Custom data source API
    1. All requests
    2. /handshake request
    3. /fields request
    4. /members request
    5. /select request for the pivot table
    6. /select request for the flat table
    7. /select request for the drill-through view
    8. Field Object
    9. Filter Object
    10. Filter Group Object
  6. MongoDB Connector API
    1. All methods
    2. getSchema
    3. getMembers
    4. getSelectResult
  7. Flexmonster Connector for amCharts
    1. All methods
    2. amcharts.getData
    3. amcharts.getCategoryName
    4. amcharts.getMeasureNameByIndex
    5. amcharts.getNumberOfMeasures
    6. amcharts.getNumberFormatPattern
Table of contents

$.flexmonster

$.flexmonster() method was deprecated in version 2.4. You should use the 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. Default value: flexmonster/.
  • global – an object that allows you to preset options for all reports. These options can be overwritten for concrete reports. The 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. XML reports are also supported in terms of backward compatibility.
  • toolbar – the parameter to embed the Toolbar or not. Default: false (without the Toolbar).
  • customizeCell – the function that allows the 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