Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Options

    Flexmonster's appearance can be defined within the report. Options are used to specify the appearance and functionality available to users. For example, you can show/hide features such as filters and sorting controls, define date patterns, or enable/disable the drill-through.

    Options are defined in an OptionsObject inside the report. If no options are specified, Flexmonster will use the default options. This tutorial explains which options are available and how to use them.

    Our default options are defined automatically, so you only need to define the options you want to modify. All options can be divided into three subgroups:

    1. Grid options – define the grid’s appearance and functionality.
    2. Chart options – define the chart’s appearance and functionality.
    3. Component-wide options – define the options applicable to the whole component.

    Read this section to learn how to set the options. The default options section contains an example of Flexmonster’s default options.

    Visit our Examples page for live examples that demonstrate how to use different options.

    Grid options

    All grid options are in the grid section of the options object.

    Available grid options
    Option Description
    grid.type String. The selected grid’s type. The following grid types are supported: "compact", "classic", and "flat".
    Default value: "compact".
    grid.title String. The title of the grid.
    Default value: "".
    grid.showFilter Boolean. Indicates whether column/row filter controls and report filter controls are visible on the grid (true) or not (false).
    Default value: true.
    grid.showHeaders Boolean. Indicates 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. Indicates whether the grand totals are displayed at the top of the table ("top") or at the bottom ("bottom"). Only available for the flat form.
    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).
    Default value: true.
    grid.showHierarchyCaptions Boolean. Indicates whether the hierarchy captions are visible (true) on the grid or not (false).
    Default value: true.
    grid.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.
    grid.showReportFiltersArea Boolean. Indicates whether the report’s filtering cells on the grid should be visible (true) or not (false).
    Default value: true.
    grid.dragging Boolean. Indicates 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. Indicates whether the auto-calculation bar is turned on (true) or not (false).
    Default value: true.
    grid.autoSwitchToCompact Boolean. Indicates whether the automatic switch from the classic to the compact form is enabled (true) or not (false).
    Flexmonster automatically switches from the classic to the compact form when there are too many header cells and value cells become inaccessible. Set autoSwitchToCompact to false to disable this feature. 
    Default value: true.
    Check out a live demo showing grid options

    Chart options

    All chart options are in the chart section of the options object.

    Available chart options
    Option Description
    chart.type String. The selected chart type. The following chart types are supported: "column", "bar_h", "line", "scatter", "pie", "stacked_column", and "column_line".
    Default value: "column".
    chart.title String. The title of the chart.
    Default value: "".
    chart.showFilter Boolean. Indicates whether column/row filter controls and report filter controls are visible on the charts (true) or not (false).
    Default value: true.
    chart.multipleMeasures Boolean. Available from v1.9. Indicates whether to show multiple measures on charts.
    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 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. Indicates whether the range of values in the charts is selected automatically or not.
    Default value: false.
    chart.reversedAxes Boolean. Reverses the columns and rows when drawing charts.
    Default value: false.
    chart.showLegend Boolean. Indicates whether the legend for the charts is visible (true) or not (false).
    Default value: true.
    chart.showLegendButton Boolean. Indicates whether the button to show/hide the legend for the charts is visible. When set to false, the legend is visible, without a button to hide it.
    Default value: false.
    chart.showDataLabels Boolean. Setting this value to true allows showing labels in charts. If the value is false, the labels will be hidden. Use showAllLabels to configure the labels in a pie chart.
    Default value: false.
    chart.showAllLabels Boolean. Setting this value to true allows showing all the labels in a pie chart. If the value is false then only the labels that can be shown without overlapping will be shown.
    Default value: false.
    chart.showMeasures Boolean. Indicates 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 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. Indicates whether warnings are shown if the data is too big for charts.
    Default value: true.
    chart.position String. The positions of the charts in relation to the grid. It can be "bottom", "top", "left", or "right".
    Default value: "bottom".
    chart.activeMeasure Object | Array of objects. Identifies the measures selected for the chart.
    By default, activeMeasure is an object. If the chart.multipleMeasures option is set to true, 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 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. Indicates 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

    All the component-wide options are in the options object.

    Available component-wide options
    Option Description
    viewType String. The type of view to show: "grid" or "charts" or "grid_charts" (starting from v1.9).
    Default value: "grid".
    filter Object. Filtering options:
    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. The date pattern to use to format 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. Indicates whether the search in the filter pop-up window is performed while the user types (true) or requires the Enter button to start searching (false).
    Default value: true.
    configuratorActive Boolean. Indicates 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. Indicates whether the Field List toggle button is visible (true) or not (false).
    Default value: true.
    showAggregations Boolean. Indicates whether the aggregation selection control is visible (true) or not (false) for measures on the Field List.
    Default value: true.
    showCalculatedValuesButton Boolean. Controls the visibility of “Add calculated value” in the Field List.
    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: Default value: false.
    editing Boolean. Indicates 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.
    Only for "json" and "csv" data source types.
    Default value: false.
    drillThrough Boolean. Indicates whether the drill-through feature is enabled (true) or disabled (false). The user can drill through by double-clicking the cell with a value.
    Default value: true.
    showDrillThroughConfigurator Boolean. Indicates 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.
    sorting String. Indicates whether the sorting controls are visible in rows ("rows"), in columns ("columns"), in rows and columns ("on" or true) on the grid cells, or not visible at all ("off" or false).
    Default value: "on".
    readOnly Boolean. When set to true, enables the read-only mode for the component.
    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.
    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 allows increasing 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 value. When set to true, there are three different values.
    To change this option’s value at runtime, use setReport().
    Default value: false.
    defaultDateType String. Used to specify which data types should be applied to date fields by default ("date", "date string", "year/month/day", "year/quarter/month/day", or "datetime"). Only for "json" and "csv" data source types.
    To change this option’s value at runtime, use setReport().
    Default value: "date".
    datePattern String. Allows specifying how the component displays fields of the "date string" type. Only for "json", "csv", "api", and "elasticsearch" data source types.
    This property is ignored for measures when exporting a report to Excel.
    Default pattern string: "dd/MM/yyyy".
    Learn more about date and time formatting.
    dateTimePattern String. Allows specifying how the component displays fields of the "datetime" type. Only for "json", "csv", and "api" data source types.
    This property is ignored for measures when exporting a report to Excel.
    Default pattern string: "dd/MM/yyyy HH:mm:ss".
    Learn more about date and time formatting.
    timePattern String. Allows specifying how the component displays fields of the "time" type. Only for "json", "csv", and "api" data source types.
    This property is ignored for measures when exporting a report to Excel.
    Default pattern string: "HH:mm:ss".
    Learn more about date and time formatting.
    dateTimezoneOffset Number. Allows setting 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. If there are more than 20 formats defined, only the formats that are used for "active: true" measures will be saved in the report. In order to save all the formats, set the saveAllFormats property to true.
    Default value: false.
    showDefaultSlice Boolean. Defines 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). If true, the first hierarchy from data goes to rows and the first measure goes to columns in the default slice. To avoid this default behavior, set this 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. Indicates whether the values from a data source will be formatted according to the format defined in the cube (true) or not (false).
    Default value: false.
    showMemberProperties Boolean. Indicates whether the member properties for an OLAP data source are available in the component (true) or not (false). This feature is only for the "microsoft analysis services" data source type.
    To change this option’s value at runtime, use setReport().
    Default value: false.
    showEmptyData Boolean. Indicates 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 hierarchies’ members ("asc", "desc", or "unsorted").
    To change this option’s value at runtime, use setReport().
    Default value: "asc".
    showOutdatedDataAlert Boolean. Setting this value to true will show a warning to the user before automatic reloading of data from the cube. There will be no warnings if set to false. Only for Flexmonster Accelerator.
    Default value: false.
    expandExecutionTimeout Number. Allows specifying 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. Indicates whether aggregation labels like "Total Sum of", "Sum of", etc. are shown in the column/row titles.
    Default value: true.
    showAllFieldsDrillThrough Boolean. Indicates whether prefiltering the drill-through view columns is enabled (false) or if the drill-through view displays all the available columns (true) when using SSAS with Flexmonster Accelerator.
    Default value: false.
    showFieldListSearch Boolean. Indicates 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 the hierarchies 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. Indicates 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 message is shown.
    To change this option’s value at runtime, use setReport().
    Default value: true.
    caseSensitiveMembers Boolean. Indicates whether the hierarchies' members are case-sensitive (true) or not (false).
    To change this option’s value at runtime, use setReport().
    Default value: false.
    simplifyFieldListFolders Boolean. Indicates whether the folders containing one field should show this field in the root (true) or not (false). Only for Elasticsearch and SSAS data sources.
    Default value: false.
    validateReportFiles Boolean. Indicates whether validation of report files is turned on (true) or turned 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. Indicates whether the Field List is always shown on the right ("right") or in the pop-up window (undefined).
    Default value: undefined.
    allowBrowsersCache Boolean. Indicates whether browsers are allowed to cache the data (true) or not (false). When allowBrowsersCache is set to false, caching is not allowed, and 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 every time it is requested. Setting allowBrowsersCache to true allows caching, and the URL remains 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

    Options can be set in several ways:

    1. The most convenient way to set options is to specify them in the report. Here is how a grid title can be added:
      report: {
      dataSource: {
      filename: "https://cdn.flexmonster.com/data/data.csv"
      },
      options: {
      grid: {
      title: "Results"
      }
      }
      }
      Check out a live sample on JSFiddle.
    2. You can change options along with other report parts using API call setReport(). Options can also be changed separately via setOptions(). To see the current options use getOptions(). For example, to set the chart title:
      flexmonster.setOptions({ chart: { title: "Chart One" } });
      flexmonster.refresh();
    3. Some options can be changed using the Toolbar. Use Options in the Toolbar to change grand totals, subtotals, and the table layout at runtime.
      options

    Default options

    If an options object is not defined in the report, Flexmonster Pivot will use global options if they are defined, or defaults 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: