☝️Small business or a startup? See if you qualify for our special offer.
+
All documentation
  • Introduction
  • Connecting to data source
  • Browser compatibility
  • Documentation for older versions
  • Flexmonster Pivot Charts

    Our component includes built-in interactive charts that extend its visualization capabilities. Flexmonster Pivot Charts have pivoting functionality: you can visualize several fields, filter records, and drill through chart segments to see the raw data.

    Available chart types

    Flexmonster provides seven chart types:

    • Column
    • Bar
    • Pie
    • Line
    • Scatter
    • Column line
    • Stacked column

    You can try all of these chart types on the Pivot Charts demo.

    If you need a chart type that is not on the list, we recommend using 3rd party charting libraries:

    Switching to Flexmonster Pivot Charts

    The component’s default view is the grid. Switching to charts can be done either using the Toolbar or programmatically:

    Switch via the Toolbar

    To show the pivot charts using the Toolbar, select the Charts ( ) tab:

    Switch programmatically

    To show the pivot charts programmatically, set the options.viewType property to "charts":

    report: {
    dataSource: {
    filename: "data.csv"
    },
    options: {
    viewType: "charts"
    }
    }

    Live example

    You can choose which data to display on charts the same way you do on the grid — using the Field List or through code.

    Configuring the pivot charts

    To configure Flexmonster Pivot Charts, you can set:

    Chart-specific configurations

    Charts are configured using the options.charts object, which defines settings such as the chart type, visibility of the UI controls, etc. See the complete list of chart configurations: Chart options.

    Here is an example of how the chart type can be set:

    report: {
    options: {
    viewType: "charts",
    charts: {
    type: "bar_h"      
    }
    }
    }

    Live example

    Component-wide configurations

    These configurations affect both the grid and charts. They manage settings such as date/time formatting, read-only mode, etc. See the complete list of component-wide configurations: Component-wide options.

    Here is an example of how to hide the Field List button:

    report: {
    options: {
    viewType: "charts",
    configuratorButton: false
    }
    }

    Live example

    Customizing the pivot charts

    The pivot charts' appearance can be customized and adjusted to the user’s needs. See our detailed guide: Customizing the pivot charts.

    How the pivot charts work

    This section explains how different types of Flexmonster Pivot Charts work:

    XY chart

    Flexmonster Pivot Charts include six XY charts: 

    • Column
    • Bar
    • Line
    • Scatter
    • Stacked column
    • Column line

    One measure and one field in rows are enough for a basic XY chart. Row fields go to the X-axis (horizontal), and measures go to the Y-axis (vertical); it’s vice versa for a bar chart.

    If rows contain several fields, you can expand members by clicking the necessary member name:

    Live example

    If the slice contains several measures, you can choose a chart measure using the options.chart.activeMeasure property or via UI:

    Live example

    If fields in columns are present, row members define main X-axis categories and column members — subcategories. In addition, the legend appears below the chart.

    If columns have several fields, you can expand a chart segment by clicking the necessary legend item:

    Live example

    Stacked column

    To build a stacked column chart, you need fields in columns and preferably in rows. Otherwise, the chart behaves like a column chart.

    Each field member from rows is represented by a separate column. The column is divided into segments, where each segment is a value of a column member that intersects the member from rows. The column shows each column member’s contribution to the row total value:

    Here's how a stacked chart looks like in Flexmonster

    Live example

    Column line

    This chart uses two measures: the first measure is a base for a column chart, and the second measure is used for a line chart.

    Note The options.chart.activeMeasure property isn't supported for the column line chart. Active measures are the first two measures from the slice. To use other measures for the chart, move the needed measures to the top of the Values box in the Field List or to the beginning of the slice.measures.

    Live example

    Pie chart

    For a basic pie chart, it is enough to have one measure and one field in rows. The row field will be a pie chart’s category, and the measure will be the chart’s numeric value.

    When rows contain several fields, you can expand members by clicking the necessary legend item:

    Live example

    If the slice contains several measures, you can choose a chart measure using the options.chart.activeMeasure property or via UI:

    Live example

    When columns are defined in the slice, they are also used for the chart. By default, a pie chart is based on the data from the first member of the first column field. Sorting is considered as well.

    You can select a column member for the chart using the options.chart.pieDataIndex property or via UI:

    Live example

    See also