Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Flexmonster Pivot Charts

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

    This tutorial has the following sections to help you get started with Flexmonster Pivot Charts:

    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 in the list, we recommend using one of these 3rd party charting libraries:

    To integrate Flexmonster with other charting libraries, see our guide on integrating with any charting library.

    Which data is shown on the pivot charts

    Flexmonster Pivot Charts visualize the data subset defined in report.slice. To show a different data subset, change the slice either using the Field List or programmatically with the report.slice object.

    To learn more about slice configuration, refer to the guide about the slice.

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

    Configuring the pivot charts

    To configure Flexmonster Pivot Charts, you can set:

    Chart-specific configurations

    Charts are configured using the options.charts object. It lets you manage such settings as the chart type, chart title, visibility of the UI controls. See the full list of chart configurations: Chart options.

    Here is the example of how the chart title can be set:

    report: {
    	options: {
    		viewType: "charts",
    		charts: {
    			title: "Summary chart"       
    		}
    	}
    }

    Try a live sample on JSFiddle.

    Component-wide configurations

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

    Here is the example that shows how to hide the Field List button:

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

    Check out a live demo on JSFiddle.

    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

    For XY charts, measures go to the Y-axis (vertical), and row fields go to the X-axis (horizontal). Therefore, one measure and one field in rows are enough for a basic XY chart.

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

    See a live sample on JSFiddle.

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

    Check out a live demo on JSFiddle.

    When columns are present in the slice, the legend appears below the chart.

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

    Try it yourself on JSFiddle.

    Most of the Flexmonster chart types have a similar structure, but the column line chart is built differently. 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. See an example on JSFiddle.

    Note The options.chart.activeMeasure property isn’t supported for the column line chart. Active measures are the first two measures from the slice.

    Pie chart

    For a basic pie chart, it is enough to have one measure and one field in rows. This field from rows 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:

    See a live sample on JSFiddle.

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

    Check out an example on JSFiddle.

    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:

    See an example on JSFiddle.

    What’s next?

    You may be interested in the following articles: