1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Connecting to JSON using the Data Compressor
      3. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using the Data Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to a database with Node.js
      4. Connecting to a database with .NET
      5. Connecting to a database with .NET Core
      6. Connecting to a database with Java
      7. Connecting to a database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with the Accelerator
      3. Installing the Accelerator as a Windows service
      4. Referring the Accelerator as a DLL
      5. Configuring the authentication process
      6. Configuring a secure HTTPS connection
      7. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Сonfiguring a secure HTTPS connection
      6. Troubleshooting
    6. Connecting to Elasticsearch
  4. Security
    1. Security in Flexmonster
    2. Security aspects when connecting to an OLAP cube
      1. The data transfer process
      2. Data security
      3. Data access management
    3. Security aspects when connecting to a database
      1. The data transfer process
      2. Data access management
  5. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set report to the component
    8. Get report from the component
    9. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  6. Integration with frameworks
    1. Available tutorials
    2. Integration with AngularJS (v1.x)
    3. Integration with Angular
    4. Integration with React
    5. Integration with Webpack
    6. Integration with ASP.NET
    7. Integration with jQuery
    8. Integration with JSP
    9. Integration with TypeScript
    10. Integration with RequireJS
    11. Integration with PhoneGap
  7. Integration with charts
    1. Integration with Highcharts
    2. Integration with Google Charts
    3. Integration with FusionCharts
    4. Integration with any charting library
  8. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Customizing context menu
    4. Localizing component
  9. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.6 to 2.7
    4. Migration guide from 2.5 to 2.6
    5. Migration guide from 2.4 to 2.5
    6. Migration guide from 2.3 to 2.4
    7. Migration guide from 2.2 to 2.3
    8. Documentation for older versions
Table of contents

Options

Flexmonster’s appearance can be defined within the report. Options are used to specify the appearance and functionality available to customers. 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 options object 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. General 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.

Grid options

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

Available grid options
grid.type String. The selected grid’s type. The following grid types are supported: "compact", "classic", and "flat".
grid.title String. The title of the grid.
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).
grid.showTotals String. Specifies where to show totals: in rows ("rows"), in columns ("columns"), in rows and columns ("on") or hide them ("off"). Default value: "on".
grid.showGrandTotals 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.grandTotalsPosition String. Indicates whether the grand totals are displayed at the top of the pivot table ("top") or at the bottom ("bottom"). Only available for the flat view. 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 SSAS drill-through pop-up window. Supported only via the XMLA protocol. 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 the hierarchies on the grid can be dragged (true) or not (false). Default value: true.
grid.showAutoCalculationBar Boolean. Indicates whether the autoCalculationBar feature is turned on (true) or not (false). 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
chart.type String. The selected chart type. The following chart types are supported: "column", "bar_h", "line", "scatter", "pie", "bar_stack", and "bar_line" (from v1.9).
chart.title String. The title of the chart.
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. In a drillable chart, defines whether the chart shows all nodes on the x-axis and the legend (false) or only the lowest expanded node on the x-axis and the legend (true). Default value: false.
chart.reversedAxes Boolean. Reverses the columns and rows when drawing charts. Default value: false.
chart.autoRange Boolean. Indicates whether the range of values in the charts is selected automatically or not.
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. Default value: false which means that the legend is visible, without a button to hide it.
chart.showAllLabels Boolean. Setting this value to true allows showing all the labels in a pie сhart. If the value is false then only the labels that can be shown without overlapping will be shown. Default value: false.
chart.showDataLabels Boolean. Setting this value to true allows showing labels in column and bar charts. If the value is false, the labels will be hidden. Default value: false.
chart.showMeasures Boolean. Hides all dropdowns on the tops of the charts. This is useful if you want to show a simple chart without any controls or if you want to save space. Default value: true – the dropdowns are visible.
chart.showOneMeasureSelection Boolean. Default value: true, which means that 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.
chart.showWarning Boolean. Indicates whether warnings are shown if the data is too big for charts.
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. Identifies the selected measure in the charts view.
chart.activeMeasure.uniqueName String. The unique measure name.
chart.activeMeasure.aggregation String. The measure aggregation type.
chart.pieDataIndex String. The selected tuple index on the Pie chart.
Check out a live demo showing chart options
General options

All the general options are in the options object.

Available general options
viewType String. The type of view to show: "grid" or "charts" or "grid_charts" (starting from v1.9).
filter Object. Filtering options:
filter.timezoneOffset Number. The difference (in minutes) between UTC and user’s local time zone. Used to adjust the dates in the filter. Default value: user’s local time.
filter.weekOffset Number. Sets amount 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. Date pattern to format dates in filter’s date inputs. Has two possible values: "dd/MM/yyyy" and "MM/dd/yyyy". Default value: "dd/MM/yyyy".
configuratorActive Boolean. Indicates whether the Field List is opened (true) or closed (false). Default value: false.
configuratorButton Boolean. Indicates whether the Field List toggle button is visible (true) or not (false).
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.
grouping Boolean. Indicates whether grouping is enabled. Default value: false. This feature allows customers to group chosen elements using a filter window. For example, if the customer has shops in different cities and wants to analyze sales information, it would be possible to combine several cities in one group by geography, by sales numbers, etc. Only available for "ocsv", "csv", and "json" data source types.
editing Boolean. Indicates whether the editing feature is enabled (true) or disabled (false) on the drill-through pop-up window for CSV, OCSV, and JSON data sources. The user will be able to double-click the cell and enter a new value into it if the editing feature is enabled.
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. The drill-through feature is available for all data sources except icCube. Default value: true.
showDrillThroughConfigurator Boolean. Indicates whether the Field List toggle button is visible in the drill-through view. Default value: true. Only for "ocsv", "csv", and "json" data sources.
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".
datePattern String. Used to format “date string” date fields ("type":"date string" in JSON, "ds+" prefix in CSV). The default pattern string is dd/MM/yyyy.
dateTimePattern String. Used to format “datetime” date fields ("type":"datetime" in JSON, "dt+" prefix in CSV). The default pattern string is dd/MM/yyyy HH:mm:ss.
dateTimezoneOffset Number. It allows setting the timezone for hierarchical dates (for JSON: "date", "year/month/day" and "year/quarter/month/day"; for CSV: "d+", "D+" and "D4+"). See an example.
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") for CSV and JSON data sources.
saveAllFormats Boolean. If there are more than 5 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. Default value: true. Only available for "csv", "ocsv", and "json" data source types.
useOlapFormatting Boolean. Indicates whether the values from 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). Default value: false. This feature is only for "microsoft analysis services" and "mondrian" data source types.
showEmptyData Boolean. By default, if you have an empty CSV data source but the header is defined the component will show your slice with empty data cells. If you set this value to false – the component will show a message instead: “Data source is empty. Please check the CSV file.”
defaultHierarchySortName String. The sorting type for hierarchies’ members ("asc", "desc", or "unsorted"). 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. Default value: false which means there will be no warnings. Only for Flexmonster Accelerator.
showAggregationLabels Boolean. Indicates whether aggregation labels like "Total Sum of", "Sum of", etc. are shown in the column/row titles. Default value: true.
grid.showAllFieldsDrillThrough Boolean. Indicates whether prefiltering the drill-through view columns is enabled (false) or the drill-through view displays all the available columns (true) when using SSAS with Flexmonster Accelerator. Default value: false.
Check out a live demo showing options
How to set options
    Options can be set in several ways. The most convenient way to set options is to specify them in the report. Here is how a grid title can be added:
    {
        "dataSource": {
            "filename": "http://www.flexmonster.com/download/data.csv"
        },
        "options": {
            "grid": {
                "title": "Results"
            }
        }
    }
    
    Check out a live sample on JSFiddle.
  1. 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();
    
  2. 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": "http://www.flexmonster.com/download/data.csv"
    },
    "options": {
        "viewType": "grid",
        "grid": {
            "type": "compact",
            "title": "",
            "showFilter": true,
            "showHeaders": true,
            "fitGridlines": false,
            "showTotals": "on",
            "showGrandTotals": "on",
            "showExtraTotalLabels": false,
            "showHierarchies": true,
            "showHierarchyCaptions": true,
            "showReportFiltersArea": true
        },
        "chart": {
            "type": "bar",
            "title": "",
            "showFilter": true,
            "multipleMeasures": false,
            "oneLevel": false,
            "autoRange": false,
            "reversedAxes": false,
            "showLegendButton": false,
            "showAllLabels": false,
            "showMeasures": true,
            "showOneMeasureSelection": true,
            "showWarning": true,
            "activeMeasure": ""
        },
        "configuratorActive": false,
        "configuratorButton": true,
        "showAggregations": true,
        "showCalculatedValuesButton": true,
        "editing": false,
        "drillThrough": true,
        "showDrillThroughConfigurator": true,
        "sorting": "on",
        "datePattern": "dd/MM/yyyy",
        "dateTimePattern": "dd/MM/yyyy HH:mm:ss",
        "saveAllFormats": false,
        "showDefaultSlice": true,
        "showEmptyData": false,
        "defaultHierarchySortName": "asc",
        "selectEmptyCells": true,
        "showOutdatedDataAlert": false
    }
}

What’s next?