Options

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:

Grid options – define the options that apply to the grid’s UI controls and functionality.
Chart options – define the options that apply to the chart’s UI controls and functionality.
Component-wide options – define the options that work regardless of the view type.

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

Grid options can be configured through the grid property of the OptionsObject.

Available grid options

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. See an 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"`. Check out an example on JSFiddle. 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`). See an example on JSFiddle. Default value: `true`.
grid.showHierarchyCaptions	Boolean. Specifies whether the hierarchy captions on the grid are visible (`true`) or not (`false`). Check out an example on JSFiddle. Default value: `true`.
grid.showReportFiltersArea	Boolean. Specifies whether report filters on the grid are visible (`true`) or not (`false`). See an 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: Between columns, rows, and report filters. Out of the grid. Default value: `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 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`.

Check out a live demo showing grid options

Chart options

Chart options can be configured through the chart property of the OptionObject.

Available chart options

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"`. See an example. Default value: `"column"`.
chart.title	String. The title of the chart. See an 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. Check out an example on JSFiddle. 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`. See an example on JSFiddle. 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`). See an 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`). Check out an example on JSFiddle. Default value: `false`.
chart.showDataLabels	Boolean. Specifies whether to show labels on the charts (`true`) or not (`false`). See an example on JSFiddle. 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 positions of the charts in relation to the grid. The following positions are available: `"bottom"`, `"top"`, `"left"`, or `"right"`. Only for `viewType: "grid_charts"`. See an 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).

Check out a live demo showing chart options

Component-wide options

The component-wide options can be configured in the OptionObject.

Available component-wide options

Option	Description
viewType	String. The view type to show. The following view types are available: `"grid"`, `"charts"`, `"grid_charts"`. Default value: `"grid"`.
filter	Object. Specifies options for filter pop-up window. The `filter` object has the `filter.weekOffset`, `filter.dateFormat`, and `filter.liveSearch` properties. They are described below.
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.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`). See an example on JSFiddle. Default value: `true`.
showAggregations	Boolean. Specifies whether the sigma icon for choosing an aggregation in the Field List is visible (`true`) or not (`false`). Check out an example on JSFiddle. Default value: `true`.
showCalculatedValuesButton	Boolean. Specifies whether the Add calculated value button in the Field List is visible (`true`) or not (`false`). Check out an example on JSFiddle. 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: When using Flexmonster Data Server, `showEmptyValues` doesn't work for multilevel hierarchies. When implementing the custom data source API, `showEmptyValues` will work for a multilevel hierarchy if its members with empty values are sent in the response to the /select request. See an example: { "aggs": [ … { "keys": { "Country": "Spain", "City": "Madrid" }, "values": {} }, // ... ], // ... } Default value: `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. If the editing feature is enabled, the user will be able to double-click the cell and enter a new value into it. Try it on JSFiddle. 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. See an example. Only for `"json"` and `"csv"` data source types. Default value: `false`.
drillThrough	Boolean. Specifies whether the drill-through feature is enabled (`true`) or disabled (`false`). The user can drill through by double-clicking the cell with a value. Check out an example on JSFiddle. 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`). 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`. See an example. We also suggest hiding the Toolbar when using the read-only mode. Default value: `false`.
strictDataTypes	Boolean. When set to `true`, the component treats fields marked as a measure only as measures and does not allow using them as hierarchies. This increases data analyzing speed. To mark a field as a measure, set its isMeasure property in the mapping to `true`. Check out an example. Only for the `"json"` data source type. To change this option’s value at runtime, use setReport(). Default value: `false`.
distinguishNullUndefinedEmpty	Boolean. Allows distinguishing null, undefined, and empty values. When set to `false`, the component treats null, undefined, and empty values as the same. When set to `true`, these are three different values. 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"`). See an 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. See an 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. Check out an 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. Check out an 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. See an example on JSFiddle. 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 available 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`). See an example. Only for the `"microsoft analysis services"` data source type. Default value: `false`.
showMemberProperties	Boolean. Specifies whether the member properties for an OLAP data source are available in the component (`true`) or not (`false`). See an example. 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: An empty JSON/CSV file. An empty JSON array. A CSV file where only the header row is defined. An OLAP cube that returns empty data. When `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: dataerror for `"json"` and `"csv"` data source types. queryerror for the `"microsoft analysis services"` data source type. See an example on JSFiddle. To change this option’s value at runtime, use setReport(). Default value: `true`.
defaultHierarchySortName	String. The sorting type for field members (`"asc"`, `"desc"`, or `"unsorted"`). 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. See an 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 hidden (`false`). When the search bar is hidden, it will be shown only when the number of fields exceeds 50 (or 40 for the flat form). 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 (check out an example). To change this option’s value at runtime, use setReport(). Default value: `false`.

Check out a live demo showing options

How to set options

You can set options in the following ways:

In the report
Using API calls
Via UI

In the report

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"
  }
}

Check out a live sample on JSFiddle.

You can also set options globally in the GlobalObject.

Using API calls

You can set options using the following API calls:

1. setOptions(). Use this method to apply options without setting the whole report. After calling setOptions(), use the refresh() API call to apply the changes:

flexmonster.setOptions({ chart: { type: "pie" } });
flexmonster.refresh();

See the example on JSFiddle.
To see the current options, use getOptions().

2. setReport(). Use this method when you need to change options along with other report parts. Also, use this approach to set the options that can be changed at runtime only via the setReport() API call.

let report = {
  options: {
    grid: {
      type: "flat",
      showHeaders: false
    }
  }, 
  slice: {
    rows: [{
      uniqueName: "Category"
    }],
    columns: [{
      uniqueName: "[Measures]",
    },
    {
      uniqueName: "Color",
    }],
    measures: [{
      uniqueName: "Price"
    }]
  },
  // Other configs
}
flexmonster.setReport(report);

See the example on JSFiddle.

Via UI

Use the Options Toolbar tab to manage grand totals, subtotals, and the table layout at runtime.

Default options

If an options object is not defined in the report, Flexmonster Pivot will use global options if they are defined, or default options from the component. These options can be overridden in the report.

Example of default options

{
   "dataSource": {
        "filename": "https://cdn.flexmonster.com/data/data.csv"
    },
    "options": {
        "viewType": "grid",
        "grid": {
            "type": "compact",
            "title": "",
            "showFilter": true,
            "showHeaders": true,
            "showTotals": "on",
            "showGrandTotals": "on",
            "grandTotalsPosition": "top",
            "showExtraTotalLabels": false,
            "showHierarchies": true,
            "showHierarchyCaptions": true,
            "drillThroughMaxRows": 1000,
            "showReportFiltersArea": true,
            "dragging": true,
            "showAutoCalculationBar": true,
            "showEmptyValues": false
        },
        "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,
            "activeMeasure": {}
        },
        "filter": {
            "weekOffset": 1,
            "dateFormat": "dd/MM/yyyy",
            "liveSearch": true
        },
        "configuratorActive": false,
        "configuratorButton": true,
        "showAggregations": true,
        "showCalculatedValuesButton": true,
        "editing": false,
        "drillThrough": true,
        "showDrillThroughConfigurator": true,
        "sorting": "on",
        "defaultDateType": "date",
        "strictDataTypes": false,
        "datePattern": "dd/MM/yyyy",
        "dateTimePattern": "dd/MM/yyyy HH:mm:ss",
        "saveAllFormats": false,
        "showDefaultSlice": true,
        "useOlapFormatting": false,
        "showMemberProperties": false,
        "showEmptyData": true,
        "defaultHierarchySortName": "asc",
        "showOutdatedDataAlert": false,
        "showAggregationLabels": true,
        "sortAlphabetically": [],
        "showAllFieldsDrillThrough": false,
        "showFieldListSearch": false,
        "validateFormulas": true,
        "caseSensitiveMembers": false,
        "simplifyFieldListFolders": false,
        "validateReportFiles": true,
        "fieldListPosition": undefined,
        "allowBrowsersCache": false
    }
}

What's next?

You may be interested in the following articles: