getData(options: Object, callbackHandler: Function, updateHandler: Function)
[starting from version: 2.3]
Note! This method is only for integration with 3rd party charting libraries.
The getData() method asynchronously passes the data to the callbackHandler and updateHandler functions.
The callbackHandler tracks when the data is ready to be retrieved from Flexmonster. The updateHandler tracks if the slice or number formatting was changed.
Read the tutorial to see how getData() is used for integration with any charting library.
options – Object. It has the following properties:slice optional – SliceObject. Specify the slice to get a particular subset of the data. If this property is not specified, getData() will return the data displayed on the grid. Only for "json" and "csv" data source types.flexmonster.getData({
slice: {
rows: [
{ uniqueName: "Country" }
],
columns: [
{ uniqueName: "[Measures]" }
],
measures: [
{ uniqueName: "Price" }
],
sorting: {
column: {
type: "desc",
tuple: [],
measure: "Price"
}
}
}
},
callbackHandler,
updateHandler);See the full code on JSFiddle.callbackHandler – Function. Tracks when the data is ready. Data passed to the callbackHandler:rawData — Object. It is asynchronously passed to the callbackHandler and updateHandler. This object has the following structure:meta – Object. Metadata about the returned data:caption – String. Chart’s title.cAmount – Number. The number of fields selected for columns.c0Name, c1Name, …, cNName – String. Captions of the fields in columns. The number of c0Name, c1Name, …, cNName properties is equal to the number of columns in the slice.formats – Array of FormatObjects. Number formats of the measures from the slice. The number of objects in the array is equal to the number of measures in the slice.rAmount – Number. The number of fields selected for rows.r0Name, r1Name, …, rNName – String. Captions of the fields in rows. The number of r0Name, r1Name, …, rNName properties is equal to the number of rows in the slice.vAmount – Number. The number of fields selected for measures.v0Name, v1Name, …, vNName – String. Captions of the fields selected for measures. The number of v0Name, v1Name, …, vNName properties is equal to the number of measures in the slice.data – Array of objects. Represents the data from the slice. Each object has the following properties:c0, c1, …, cN optional — String. Column members. The number of c0, c1, …, cN properties is equal to the number of columns in the slice.c0_full, c1_full, …, cN_full optional — String. Full names of the column members.r0, r1, …, rN optional — String. Row members. The number of r0, r1, …, rN properties is equal to the number of rows in the slice.r0_full, r1_full, …, rN_full optional — String. Full names of the row members.v0, v1, …, vN optional — Number. Values. The number of v0, v1, …, vN properties is equal to the number of measures in the slice.NaN.error — Object. It is asynchronously passed to the callbackHandler and updateHandler if getData() gets terminated. This happens when the webpage is likely to crash due to the too large dataset uploaded.getData() successfully returns the data, the error will be undefined. error has the following structure:dataHeight – Number. The number of rows from the report that failed to be retrieved by getData().dataWidth – Number. The number of columns that failed to be retrieved by getData().errorMessage – String. An error message. Its text description can be changed via the localization file. Default value: "Dataset is too large. Some fields cannot be expanded. Please narrow down the dataset.".updateHandler optional – Function. Tracks if the slice or number formatting was changed. Gets two input parameters: rawData and error. Check their structure in callbackHandler.To understand how the getData() method works, check out the example on JSFiddle. Find the detailed explanation of this example below.
Let’s assume we have the following pivot table:
| Category | |||
| Color | Accessories | Components | Total Sum of Price |
| blue | 130014 | 130014 | |
| green | 9336 | 50 260 | 59 596 |
| Grand Total | 9336 | 180 274 | 189 610 |
The getData() method is called like this:
flexmonster.getData({},
function(data) {
console.log(data);
},
function(data) {
console.log(data);
}
);
The output looks as follows:
{
meta: {
caption: "",
vAmount: 1,
formats: [
{
name: "",
thousandsSeparator: " ",
decimalSeparator: ".",
decimalPlaces: -1,
maxDecimalPlaces: -1,
maxSymbols: 20,
currencySymbol: "",
positiveCurrencyFormat: "$1",
negativeCurrencyFormat: "-$1",
negativeNumberFormat: "-1",
nullValue: "",
infinityValue: "Infinity",
divideByZeroValue: "Infinity",
textAlign: "right",
isPercent: false,
isCount: false,
beautifyFloatingPoint: true
}
],
v0Name: "Sum of Price",
r0Name: "Color",
c0Name: "Category",
rAmount: 1,
cAmount: 1
},
data: [
{
v0: 189610
},
{
r0: "blue",
r0_full: "color.[blue]",
v0: 130014
},
{
r0: "green",
r0_full: "color.[green]",
v0: 59596
},
{
c0: "Accessories",
c0_full: "category.[accessories]",
v0: 9336
},
{
c0: "Components",
c0_full: "category.[components]",
v0: 180274
},
{
r0: "blue",
r0_full: "color.[blue]",
c0: "Accessories",
c0_full: "category.[accessories]",
v0: null
},
{
r0: "blue",
r0_full: "color.[blue]",
c0: "Components",
c0_full: "category.[components]",
v0: 130014
},
{
r0: "green",
r0_full: "color.[green]",
c0: "Accessories",
c0_full: "category.[accessories]",
v0: 9336
},
{
r0: "green",
r0_full: "color.[green]",
c0: "Components",
c0_full: "category.[components]",
v0: 50260
}
]
}
The data array in the rawData object contains all numbers shown in the pivot table including grand totals, totals, and regular cells. Depending on a visualization tool you are using, you may need data with totals and grand totals or without them.
Learn more about grand totals, totals, and regular cells below.
Each object representing grand totals contains only values (v0, v1, …, vN). Our example has one object representing grand totals:
{
v0: 189610
}
Each object representing totals contains either values (v0, v1, …, vN) and columns (c0, c1, …, cN) or values and rows (r0, r1, …, rN). Our example has the following objects representing totals:
{
r0: "blue",
r0_full: "color.[blue]",
v0: 130014
},
{
r0: "green",
r0_full: "color.[green]",
v0: 59596
},
{
c0: "Accessories",
c0_full: "category.[accessories]",
v0: 9336
},
{
c0: "Components",
c0_full: "category.[components]",
v0: 180274
}
Each object representing regular cells contains values (v0, v1, …, vN), columns (c0, c1, …, cN), and rows (r0, r1, …, rN). Our example has the following objects representing regular cells:
{
r0: "blue",
r0_full: "color.[blue]",
c0: "Accessories",
c0_full: "category.[accessories]",
v0: null
},
{
r0: "blue",
r0_full: "color.[blue]",
c0: "Components",
c0_full: "category.[components]",
v0: 130014
},
{
r0: "green",
r0_full: "color.[green]",
c0: "Accessories",
c0_full: "category.[accessories]",
v0: 9336
},
{
r0: "green",
r0_full: "color.[green]",
c0: "Components",
c0_full: "category.[components]",
v0: 50260
}
See an example on JSFiddle.
Read the tutorial to see how getData is used for integration with any charting library.