Get Free Trial
  1. API reference
    1. Introduction
    2. Flexmonster()
  2. Objects
    1. All objects
    2. ReportObject
    3. DataSourceObject
    4. MappingObject
    5. SliceObject
    6. OptionsObject
    7. GlobalObject
    8. Filtering
      1. FilterObject
      2. NumberQueryObject
      3. StringQueryObject
      4. DateQueryObject
      5. TimeQueryObject
      6. ValueQueryObject
    9. FormatObject
    10. ConditionalFormatObject
    11. TableSizesObject
    12. CellDataObject
    13. ChartDataObject
    14. ToolbarObject
    15. ChartLegendDataObject
    16. ShareReportConnectionObject
  3. Methods
    1. All methods
    2. addCalculatedMeasure
    3. addCondition
    4. alert
    5. clear
    6. clearFilter
    7. clearXMLACache
    8. closeFieldsList
    9. collapseAllData
    10. collapseCell
    11. collapseData
    12. connectTo
    13. customizeAPIRequest
    14. customizeCell
    15. customizeChartElement
    16. customizeContextMenu
    17. dispose
    18. drillDownCell
    19. drillUpCell
    20. expandAllData
    21. expandCell
    22. expandData
    23. exportTo
    24. getAllConditions
    25. getAllHierarchies
    26. getAllHierarchiesAsync
    27. getAllMeasures
    28. getAllMeasuresAsync
    29. getCell
    30. getColumns
    31. getColumnsAsync
    32. getCondition
    33. getFilter
    34. getFlatSort
    35. getFormat
    36. getMeasures
    37. getMeasuresAsync
    38. getMembers
    39. getMembersAsync
    40. getOptions
    41. getReport
    42. getReportFilters
    43. getReportFiltersAsync
    44. getRows
    45. getRowsAsync
    46. getSelectedCell
    47. getSort
    48. getTableSizes
    49. getXMLACatalogs
    50. getXMLACatalogsAsync
    51. getXMLACubes
    52. getXMLACubesAsync
    53. getXMLADataSources
    54. getXMLADataSourcesAsync
    55. getXMLAProviderName
    56. getXMLAProviderNameAsync
    57. load
    58. off
    59. on
    60. open
    61. openCalculatedValueEditor
    62. openFieldsList
    63. openFilter
    64. print
    65. refresh
    66. removeAllCalculatedMeasures
    67. removeAllConditions
    68. removeCalculatedMeasure
    69. removeCondition
    70. removeSelection
    71. runQuery
    72. save
    73. scrollToColumn
    74. scrollToRow
    75. setFilter
    76. setFlatSort
    77. setFormat
    78. setOptions
    79. setReport
    80. setSort
    81. setTableSizes
    82. shareReport
    83. showCharts
    84. showGrid
    85. showGridAndCharts
    86. sortingMethod
    87. sortValues
    88. 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. FieldObject
    9. FilterObject
    10. FilterGroupObject
  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: GlobalObject,
    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 the GlobalObject.

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 – a GlobalObject that allows you to preset options for all reports. These options can be overwritten for concrete reports.
  • 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 ReportObject 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