Download Free Trial
Table of contents



[starting from version: 2.3]

It is triggered when the component’s initial configuration completed and the component is ready to receive API calls. Please note that all JS API calls are blocked until the component’s ready event is dispatched. In other words, when ready handler is called you know that the component’s creation completed and now you can use API calls.

Also, when ready is called data structure is still loading if report parameter was specified in new Flexmonster(). To retrieve information about data source structure use reportcomplete. If you want to track changes in a report object, we recommend using reportchange.


1) How to set JSON data using API call:

addJSON() API call can be used to set JSON data only after ready is called by Flexmonster Pivot Table component. Please see the sample code below:

var jsonData = [
    "Сountry" : "Canada",
    "State" : "Ontario",
    "City" : "Toronto",
    "Сountry" : "USA",
    "State" : "California",
    "City" : "Los Angeles",

* The data can be set using addJSON() and setReport() API calls 
* only after ready event is dispatched by Flexmonster Component
var pivot = new Flexmonster({
	container: "pivotContainer",
	toolbar: true,
	ready: function () {

* flexmonster addJSON() function illustrates how to set JSON data 
* that is already on the page and define a slice based on this data.
function flexmonsterAddJSON() {
	var slice = {
		rows: [{ uniqueName: "Color" }],
		columns: [{ uniqueName: "W" }, { uniqueName: "[Measures]" }],
		measures: [{ uniqueName: "Price"}]};

Check out the example on JSFiddle.

2) How to define report from JS:

Defining a report from JS after the component is created:

var pivot = new Flexmonster({
	container: "pivotContainer",
	toolbar: true,
	ready: function () {
		var report = {
			dataSource: {
				filename: "data.csv"

			options: {
				grid: {
					title: "Report set via JS API"

			slice: {
				rows: [
					{uniqueName: "Country"},
					{uniqueName: "[Measures]"}
				columns: [
					{uniqueName: "Color"}
				measures: [
					{uniqueName: "Price"}

Try on JSFiddle.

See also