Get Free Trial
Get Free Trial
All documentation
    1. Getting started with the report
    2. Available report configurations
    3. Global configurations
      1. Understanding options
      2. Grid options
      3. Chart options
      4. Component-wide options
      5. Changing the grid layout

    • Understanding 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:

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

    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.

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

    Live example

    You can also set options for all reports 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:
      pivot.setOptions({ chart: { title: "Chart One" } });
      pivot.refresh();
      Live example
      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. Example:
      let report = {
        options: {
          grid: {
            type: "classic",
            title: "Grid One"
          }
        },
        slice: {
          //...
        },
        // Other configs
      }
      pivot.setReport(report);
      Live example

    Via UI

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

    Screenshot of the Layout options pop-up window

    Default option values

    Most Flexmonster options have a default value. Flexmonster Pivot will use the default option values if an OptionsObject or global configurations are not specified.

    options: {
      viewType: "grid",
      grid: {
        type: "compact",
        title: "",
        showFilter: true,
        showHeaders: true,
        showTotals: "on",
        showGrandTotals: "on",
        grandTotalsPosition: "top",
        showHierarchies: true,
        showHierarchyCaptions: true,
        drillThroughMaxRows: 1000,
        showReportFiltersArea: true,
        dragging: true,
        showAutoCalculationBar: true,
        autoSwitchToCompact: true,
        disableExpandAndCollapse: false,
        repeatAllLabels: 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,
        filterByDateAndTime: false,
        allowEmptyMembersFilter: false
      },
      configuratorActive: false,
      configuratorButton: true,
      showAggregations: true,
      showCalculatedValuesButton: true,
      grouping: false,
      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,
      showAllFieldsDrillThrough: false,
      showFieldListSearch: false,
      validateFormulas: true,
      caseSensitiveMembers: false,
      simplifyFieldListFolders: false,
      validateReportFiles: true,
      allowBrowsersCache: false,
      showEmptyValues: false,
      distinguishNullUndefinedEmpty: false,
      useCaptionsInCalculatedValueEditor: false,
      readOnly: false,
      strictNumbersParsing: false
    }

    See also

    Frequently asked questions

    Can't find your answer?
    Visit the FAQ

    Flexmonster Pivot Table & Charts is a JavaScript pivot table component for adding interactive reporting and data analysis to web applications. Users can summarize, filter, sort, and explore data in pivot tables and charts, drill into results, and export reports.