Options are used to configure Flexmonster’s functionality and manage UI controls. For example, you can enable or disable filter controls, specify where to show totals, or select the component’s view type.
Options are defined in the OptionsObject and can be divided into three subgroups:
See how to set options. If no options are specified, Flexmonster will use the default options.
Visit our Examples page for live examples that demonstrate how to use different options.
Grid options can be configured through the grid property of the OptionsObject.
| Option | Description |
|---|---|
| grid.type | String. The selected grid’s type. The following grid types are available: "compact", "classic", and "flat".Default value: "compact". |
| grid.title | String. The title of the grid. Default value: "". |
| grid.showFilter | Boolean. Specifies whether filter controls are visible on the grid (true) or not (false). These include rows and columns filter controls and report filter controls
Live example.To hide filter controls in the chart view, use the showFilter option for the charts.Default value: true. |
| grid.showHeaders | Boolean. Specifies whether the spreadsheet headers are visible (true) or not (false).Default value: true. |
| grid.showTotals | String. Specifies where to show totals: in rows ("rows"), in columns ("columns"), in rows and columns ("on"), or not at all ("off").Default value: "on". |
| grid.showGrandTotals | String. Specifies where to show grand totals: in rows ("rows"), in columns ("columns"), in rows and columns ("on"), or not at all ("off").Default value: "on". |
| grid.grandTotalsPosition | String. Specifies where the grand totals are displayed: at the top of the table ("top") or at the bottom ("bottom"). Only for grid.type: "flat".Live example Default value: "top". |
| grid.showHierarchies | Boolean. Specifies how to show drillable hierarchy cells on the grid: with a link on the right (true) or with an icon on the left (false)
Live example.Default value: true. |
| grid.showHierarchyCaptions | Boolean. Specifies whether the hierarchy captions on the grid are visible (true) or not (false)
Live example.Default value: true. |
| grid.showReportFiltersArea | Boolean. Specifies whether report filters on the grid are visible (true) or not (false)
Live example.To hide report filters in the chart view, use the showFilter option for the charts.Default value: true. |
| grid.dragging | Boolean. Specifies whether fields on the grid are draggable (true) or not (false). When set to true, fields can be dragged:
true. |
| grid.showAutoCalculationBar | Boolean. Specifies whether the auto-calculation bar is turned on (true) or off (false).Default value: true. |
| grid.autoSwitchToCompact | Boolean. Specifies whether the component automatically switches from the classic (tabular) to the compact form (true) or not (false).By default, Flexmonster automatically switches to the compact form when there are too many header cells and value cells become inaccessible. Default value: true. |
Chart options can be configured through the chart property of the OptionsObject.
| Option | Description |
|---|---|
| chart.type | String. The selected chart type. The following chart types are available: "column", "bar_h", "line", "scatter", "pie", "stacked_column", and "column_line"
Live example.Default value: "column". |
| chart.title | String. The title of the chart
Live example. Default value: "". |
| chart.showFilter | Boolean. Specifies whether filter controls are visible on the chart (true) or not (false). These include rows and columns filter controls and report filter controls
Live example.To hide filter controls in the grid view, use the showFilter option for the grid.Default value: true. |
| chart.multipleMeasures | Boolean. Specifies whether to show multiple measures on the charts (true) or not (false).Default value: false. |
| chart.oneLevel | Boolean. By default, when there are multiple fields in rows or columns, all of them are shown on the chart's X-axis and legend. To show only the lowest expanded field, set the chart.oneLevel to true
Live example.This property does not affect multilevel hierarchies. Default value: false (all fields are shown on the X-axis and the legend). |
| chart.autoRange | Boolean. Specifies whether the range of values in the charts is determined automatically (true) or not (false)
Live example.Default value: false. |
| chart.reversedAxes | Boolean. Specifies whether the columns and rows are reversed on the charts (true) or not (false).Default value: false. |
| chart.showLegend | Boolean. Specifies whether the legend for the charts is visible (true) or not (false).Default value: true. |
| chart.showLegendButton | Boolean. Specifies whether the button to show or hide the legend for the charts is visible (true) or not (false)
Live example.Default value: false. |
| chart.showDataLabels | Boolean. Specifies whether to show labels on the charts (true) or not (false)
Live example.Use chart.showAllLabels to configure the labels in a pie chart.Default value: false. |
| chart.showAllLabels | Boolean. Specifies whether to show all labels in a pie chart (true) or not (false). If chart.showAllLabels is false, only the labels that can be shown without overlapping will be shown.Default value: false. |
| chart.showMeasures | Boolean. Specifies whether the measures dropdown menu is visible (true) or hidden (false). Hiding the dropdown menu is useful if you want to simplify the chart view, limit the user's ability to make changes, or save space on the user's screen.Default value: true. |
| chart.showOneMeasureSelection | Boolean. When set to true, the measures dropdown is always visible - regardless of the number of measures in it. If the value is set to false, the measures dropdown on the charts will be hidden if there is only one measure in the list and visible if there are two or more measures.Default value: true. |
| chart.showWarning | Boolean. Specifies whether warnings are shown (true) or not (false) if the data is too big for charts.Default value: true. |
| chart.position | String. Specifies the position of the charts in relation to the grid. The following positions are available: "bottom", "top", "left", or "right". Only for viewType: "grid_charts"
Live example.Default value: "bottom". |
| chart.activeMeasure | Object | Array of objects. Specifies the measures selected for the chart. By default, chart.activeMeasure is an object. If the chart.multipleMeasures option is set to true, chart.activeMeasure is an array of objects. Each object has the uniqueName and aggregation properties. They are described below. |
| chart.activeMeasure.uniqueName | String. The unique measure name. This measure must be present in the slice.measures property. |
| chart.activeMeasure.aggregation | String. The measure aggregation type. This aggregation must be defined for the measure in the slice.measures.aggregation property. |
| chart.pieDataIndex | String. By default, when there are fields in columns, a pie chart is based on the first member of the first column field. The chart.pieDataIndex allows choosing a different field member for the chart by specifying the member's index. Indexes start from "0" (the first member).If a non-existing index is specified in this property, the default index value will be used instead. See how the pie chart works. Default value: "0". |
| chart.axisShortNumberFormat | Boolean. Specifies whether axes labels on charts are displayed using a short number format like 10K, 10M, 10B, 10T (true) or not (false).Default value: undefined (show short format if the max value > 10M). |
The component-wide options can be configured in the OptionsObject.
| Option | Description |
|---|---|
| viewType | String. The view type to show. The following view types are available: "grid", "charts", or "grid_charts".Default value: "grid". |
| filter | Object. Specifies options for filter pop-up window. The filter object has the filter.weekOffset, filter.dateFormat, filter.filterByDateAndTime and filter.liveSearch properties. They are described below. |
| filter.allowEmptyMembersFilter | Boolean. By default, if the selection filter contains only members that do not exist in the dataset, Flexmonster ignores it and displays all field members. To change this behavior so that an empty grid is shown instead, set filter.allowEmptyMembersFilter to true
Live example.Only for "json" and "csv" data source types.This option is available in Flexmonster version 2.9.86 or later. See how to change this behavior for any data source type and Flexmonster version. Default value: false. |
| filter.weekOffset | Number. Sets the number of days to be added to the start of the week (Sunday). Used to adjust the first day of the week in the filter’s calendar. Default value: 1 (Monday is the first day of the week). |
| filter.dateFormat | String. Specifies how the component displays dates in the filter’s date inputs. Has two possible values: "dd/MM/yyyy" and "MM/dd/yyyy".Default value: "dd/MM/yyyy". |
| filter.filterByDateAndTime | Boolean. Specifies whether the conditional filter for date fields should consider time (true) or not (false). When set to true, a time picker is added to the date picker in the filter view
Live example.This option is available for the "datetime" and "date string" field types.Only for the "api" data source type.Default value: false. |
| filter.liveSearch | Boolean. Specifies whether the search in the filter pop-up window is performed while the user types (true) or after the Enter button is pressed (false).Default value: true. |
| configuratorActive | Boolean. Specifies whether the Field List is opened (true) or closed (false) after the component is initialized.To change this option’s value at runtime, use setReport(). Default value: false. |
| configuratorButton | Boolean. Specifies whether the Field List toggle button is visible (true) or not (false)
Live example.Default value: true. |
| showAggregations | Boolean. Specifies whether the sigma icon for choosing an aggregation in the Field List is visible (true) or not (false)
Live example.Default value: true. |
| showCalculatedValuesButton | Boolean. Specifies whether the Add calculated value button in the Field List is visible (true) or not (false)
Live example.Default value: true. |
| showEmptyValues | Boolean | String. Specifies where to show members with empty values on the grid and charts: in rows ("rows"), in columns ("columns"), in rows and columns (true), or not at all (false). To configure this behavior for a specific field, use the showEmptyValues property in the mapping. Only for "json", "csv", and "api" data source types. Note that for the "api" data source type, this property has usage specifics for multilevel hierarchies:
false. |
| editing | Boolean. Specifies whether the editing feature is enabled (true) or disabled (false). Editing is available only in the drill-through view and the flat form. It is also not possible to edit multilevel hierarchies and their levels.If the editing feature is enabled, the user will be able to click the cell and enter a new value into it Live example. Note that editing in Flexmonster does not affect the underlying data. To apply the changes to the original dataset, track these changes using the datachanged event and apply them to your data manually Live example. Only for "json" and "csv" data source types.Default value: false. |
| drillThrough | Boolean. Specifies whether the drill-through feature to show details about a value cell is enabled (true) or disabled (false). The user can drill through by double-clicking the cell with a value
Live example.Default value: true. |
| showDrillThroughConfigurator | Boolean. Specifies whether the Field List toggle button is visible in the drill-through view. Only for "csv", "json", "api", "microsoft analysis services" (for Flexmonster Accelerator), and "elasticsearch" data source types.Default value: true. |
| drillThroughMaxRows | Number. Sets the maximum number of rows for the drill-through view. When set to 0, the maximum number of rows is unlimited for the Data Server. Only for "api", "microsoft analysis services", and "elasticsearch" data source types.Default value: 1000. |
| sorting | String. Specifies where the sorting controls are visible: in rows ("rows"), in columns ("columns"), in rows and columns ("on" or true), or not visible at all ("off" or false)
Live example.Default value: "on". |
| readOnly | Boolean. Specifies whether the read-only mode is enabled (true) or not (false).In the read-only mode, you cannot interact with the report via UI (e.g., the context menu, expands, and drills are disabled). In addition, configurations of the following options are ignored: grid.showFilter, grid.dragging, chart.showFilter, chart.showMeasures, configuratorButton, drillThrough, and sorting
Live example.We also suggest hiding the Toolbar when using the read-only mode. Default value: false. |
| strictDataTypes | Boolean. When set to true, the component restricts which fields can be selected only for measures and which fields can be selected only for rows, columns, or report filters. This increases data analyzing speed. To specify which fields can be selected only for measures, set the isMeasure mapping property to true for such fields
Live example.Only for the "json" data source type.To change this option’s value at runtime, use setReport(). Default value: false. |
| distinguishNullUndefinedEmpty | Boolean. By default, the component treats null, undefined, and empty string ("") values as the same. Set this option to true, so that these values are treated distinctly
Live example.To change this option’s value at runtime, use setReport(). Default value: false. |
| defaultDateType | String. Specifies which data types should be applied to date fields by default ("date", "date string", "year/month/day", "year/quarter/month/day", or "datetime")
Live example.Only for "json" and "csv" data source types.To change this option’s value at runtime, use setReport(). Default value: "date". |
| datePattern | String. Specifies how the component displays fields of the "date string" type
Live example.This property is ignored for measures when exporting a report to Excel. Only for "json", "csv", "api", and "elasticsearch" data source types.Default pattern string: "dd/MM/yyyy".Learn more about date and time formatting. |
| dateTimePattern | String. Specifies how the component displays fields of the "datetime" type
Live example.This property is ignored for measures when exporting a report to Excel. Only for "json", "csv", and "api" data source types.Default pattern string: "dd/MM/yyyy HH:mm:ss".Learn more about date and time formatting. |
| timePattern | String. Specifies how the component displays fields of the "time" type
Live example.This property is ignored for measures when exporting a report to Excel. Only for "json", "csv", and "api" data source types.Default pattern string: "HH:mm:ss".Learn more about date and time formatting. |
| dateTimezoneOffset | Number. Sets a time zone for all date fields in the dataset. The dateTimezoneOffset is a number that represents the difference in hours between the needed time zone and UTC
Live example.Besides, you can also set time zones for fields of a certain type and specific fields. These time zones will have different priorities. Learn more in our guide. To change this option’s value at runtime, use setReport(). |
| saveAllFormats | Boolean. By default, if over 20 number formats are defined, only the formats applied to active measures (active: true) will be saved in the report. To save all the formats, set the saveAllFormats property to true.Default value: false. |
| showDefaultSlice | Boolean. Specifies whether the component selects a default slice for a report with an empty slice (when nothing is set in rows, columns, report filters, and measures). By default, the first field from data goes to rows and the first measure goes to columns. To avoid this behavior, set showDefaultSlice property to false. Only for "csv" and "json" data source types.To change this option’s value at runtime, use setReport(). Default value: true. |
| useOlapFormatting | Boolean. Specifies whether the values from a data source will be formatted according to the format defined in the cube (true) or not (false)
Live example.Only for the "microsoft analysis services" data source type.Default value: false. |
| showMemberProperties | Boolean. Specifies whether the member properties for SSAS are available in the component (true) or not (false)
Live example.If true, member properties can be configured using slice.memberProperties or the context menu.Only for the "microsoft analysis services" data source type.To change this option’s value at runtime, use setReport(). Default value: false. |
| showEmptyData | Boolean. Specifies how the component behaves for the following data sources:
showEmptyData is set to true, an empty grid is shown for such data sources. When set to false, the component displays a pop-up error message and triggers one of the following events:
To change this option’s value at runtime, use setReport(). Default value: true. |
| defaultHierarchySortName | String. The sorting order of field members. Possible values: "asc", "desc", and "unsorted"
Live example.To change this option’s value at runtime, use setReport(). Default value: "asc". |
| showOutdatedDataAlert | Boolean. Specifies whether to show a warning before automatic reloading of data from the cube (true) or not (false). Only for Flexmonster Accelerator.Default value: false. |
| expandExecutionTimeout | Number. Specifies an execution timeout for the expandAllData() function. The timeout is set in milliseconds (i.e., 9000 equals 9 seconds). The minimum timeout value is 9000. Note that a large execution timeout can cause an unresponsive script alert.Default value: 9000. |
| showAggregationLabels | Boolean. Specifies whether aggregation labels like "Total Sum of", "Sum of", etc. are shown in the row and column titles
Live example.Default value: true. |
| showAllFieldsDrillThrough | Boolean. Specifies whether the drill-through view displays all available columns (true) or not (false). Only for Flexmonster Accelerator.Default value: false. |
| showFieldListSearch | Boolean. Specifies whether the search bar in the Field List is shown (true) or not (false). When the showFieldListSearch is set to false, the search bar will be shown only when the number of fields exceeds 15 (or 40 for the flat form and the drill-through view).Default value: false. |
| useCaptionsInCalculatedValueEditor | Boolean. By default, Flexmonster uses field unique names in the calculated value editor. If useCaptionsInCalculatedValueEditor is set to true, the component will use field captions instead of unique names.Default value: false. |
| validateFormulas | Boolean. Specifies whether validation is performed for calculated values (true) or not (false). If validation is turned on and the report contains an invalid formula, the "Wrong formula format" alert is shown.To change this option’s value at runtime, use setReport(). Default value: true. |
| caseSensitiveMembers | Boolean. Specifies whether the field members are case-sensitive (true) or not (false).To change this option’s value at runtime, use setReport(). Default value: false. |
| simplifyFieldListFolders | Boolean. Specifies whether the folders containing one field should show this field in the root (true) or not (false). Only for "elasticsearch" and "microsoft analysis services" data source types.Default value: false. |
| validateReportFiles | Boolean. Specifies whether validation of report files is turned on (true) or off (false). Setting this value to false allows loading report files in the old format without an error message. Should be used in global options.Default value: true. |
| fieldListPosition | String. Specifies where to show the Field List: on the right ("right") or in the pop-up window (undefined).Default value: undefined. |
| allowBrowsersCache | Boolean. Specifies whether browsers are allowed to cache the data (true) or not (false). When allowBrowsersCache is set to false, Flexmonster appends a unique id to the data source's URL to ensure that the URL stays unique. The unique URL prevents the browser from loading the data from its cache, so the data is updated whenever requested. When allowBrowsersCache is set to true, the URL is unmodified
Live example.To change this option’s value at runtime, use setReport(). Default value: false. |
Watch the video that demonstrates how some of the options work:
You can set options in the following ways:
To set options in the report, configure the options property:
report: {
dataSource: {
filename: "https://cdn.flexmonster.com/data/data.csv"
},
options: {
grid: {
type: "flat",
showHeaders: false
},
chart: {
type: "pie",
},
viewType: "grid_charts"
}
}You can also set options for all reports in the GlobalObject.
You can set options using the following API calls:
setOptions(), use the refresh() API call to apply the changes:pivot.setOptions({ chart: { title: "Chart One" } });
pivot.refresh();
Live examplesetReport() API call. Example:let report = {
options: {
grid: {
type: "classic",
title: "Grid One"
}
},
slice: {
rows: [
{
uniqueName: "Category"
}
],
columns: [
{
uniqueName: "[Measures]",
},
{
uniqueName: "Color",
}
],
measures: [
{
uniqueName: "Price"
}
]
},
// Other configs
}
pivot.setReport(report);
Live exampleUse the Options () Toolbar tab to manage grand totals, subtotals, and the table layout at runtime:
Most Flexmonster options have a default value. Flexmonster Pivot will use the default option values if an OptionsObject or global configurations are not specified.
See how to override default option values.
{
options: {
viewType: "grid",
grid: {
type: "compact",
title: "",
showFilter: true,
showHeaders: true,
showTotals: "on",
showGrandTotals: "on",
grandTotalsPosition: "top",
showHierarchies: true,
showHierarchyCaptions: true,
showReportFiltersArea: true,
dragging: true,
showAutoCalculationBar: true,
autoSwitchToCompact: true,
},
chart: {
type: "column",
title: "",
showFilter: true,
multipleMeasures: false,
oneLevel: false,
autoRange: false,
reversedAxes: false,
showLegend: true,
showLegendButton: false,
showDataLabels: false,
showAllLabels: false,
showMeasures: true,
showOneMeasureSelection: true,
showWarning: true,
position: "bottom",
activeMeasure: {},
pieDataIndex: "0",
axisShortNumberFormat: undefined
},
filter: {
allowEmptyMembersFilter: false,
weekOffset: 1,
dateFormat: "dd/MM/yyyy",
filterByDateAndTime: false,
liveSearch: true
},
configuratorActive: false,
configuratorButton: true,
showAggregations: true,
showCalculatedValuesButton: true,
showEmptyValues: false,
editing: false,
drillThrough: true,
showDrillThroughConfigurator: true,
drillThroughMaxRows: 1000,
sorting: "on",
readOnly: false,
strictDataTypes: false,
distinguishNullUndefinedEmpty: false,
defaultDateType: "date",
datePattern: "dd/MM/yyyy",
dateTimePattern: "dd/MM/yyyy HH:mm:ss",
timePattern: "HH:mm:ss",
saveAllFormats: false,
showDefaultSlice: true,
useOlapFormatting: false,
showMemberProperties: false,
showEmptyData: true,
defaultHierarchySortName: "asc",
showOutdatedDataAlert: false,
expandExecutionTimeout: 9000,
showAggregationLabels: true,
showAllFieldsDrillThrough: false,
showFieldListSearch: false,
useCaptionsInCalculatedValueEditor: false,
validateFormulas: true,
caseSensitiveMembers: false,
simplifyFieldListFolders: false,
validateReportFiles: true,
fieldListPosition: undefined,
allowBrowsersCache: false
}
}