Get Free Trial
  1. API reference
  2. Welcome
    1. Introduction
    2. Get Flexmonster
    3. Quick start
    4. System requirements
    5. Troubleshooting
    6. Managing license keys
    7. Migrating from WebDataRocks to Flexmonster
  3. Integration with frameworks
    1. Available tutorials
    2. Angular
      1. Integration with Angular
      2. Flexmonster usage in Angular
    3. React
      1. Integration with React
      2. Flexmonster usage in React
    4. Vue
      1. Integration with Vue 2
      2. Flexmonster usage in Vue 2
      3. Integration with Vue 3
      4. Flexmonster usage in Vue 3
    5. Other integrations
      1. Integration with Python
        1. Integration with Django
        2. Integration with Jupyter Notebook
      2. Integration with React Native
      3. Integration with Blazor
      4. Integration with AngularJS (v1.x)
      5. Integration with TypeScript
      6. Integration with R Shiny
      7. Integration with jQuery
      8. Integration with Ionic
      9. Integration with Electron.js
      10. Integration with Webpack
      11. Integration with RequireJS
  4. Connecting to Data Source
    1. Supported data sources
    2. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Managing data presentation in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Managing data presentation in CSV
    4. Database
      1. Connecting to SQL databases
      2. Connecting to a MySQL database
      3. Connecting to a Microsoft SQL Server database
      4. Connecting to a PostgreSQL database
      5. Connecting to an Oracle database
    5. Flexmonster Data Server
      1. Introduction to Flexmonster Data Server
      2. Getting started with Flexmonster Data Server
      3. Flexmonster Admin Panel Guide
      4. Data sources guide
      5. Security and authorization guide
      6. The Data Server as a DLL
        1. Getting started with the Data Server as a DLL
        2. Referencing the Data Server as a DLL
        3. Implementing the API controller
        4. Implementing the server filter
        5. Implementing the custom parser
        6. DLL configurations reference
        7. The controller's methods for request handling
      7. The Data Server as a console application
        1. Installing the Data Server as a console application
        2. Configurations reference
        3. Data sources guide
        4. Security and authorization guide
      8. Troubleshooting the Data Server
    6. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
      4. Configuring the MongoDB Connector
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referencing the Accelerator as a DLL
      4. Configuring the authentication process
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    8. Custom data source API
      1. Introduction to the custom data source API
      2. A quick overview of a sample Node.js server
      3. A quick overview of a sample .NET Core server
      4. Implement your own server
        1. Implementing the custom data source API server
        2. Implementing filters
        3. Supporting more aggregation functions
        4. Supporting multilevel hierarchies
        5. Returning data for the drill-through view
        6. Testing your custom data source API server
    9. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    10. Connecting to other data sources
  5. Accessibility
    1. Accessibility overview
    2. Keyboard navigation
  6. Configuring the component
    1. Available tutorials
    2. Getting started with the report
    3. Configure the data source
      1. Data source
      2. Mapping
    4. Define which data to show
      1. Slice
      2. Custom sorting
      3. Calculated values
    5. Manage Flexmonster’s functionality
      1. Options
      2. Configuring global options
    6. Format fields
      1. Number formatting
      2. Date and time formatting
      3. Conditional formatting
  7. Saving component configs
    1. Available tutorials
    2. Save and restore the report
    3. Share the report
    4. Export and print
  8. Charts
    1. Available tutorials
    2. Flexmonster Pivot Charts
    3. Integration with Highcharts
    4. Integration with amCharts
    5. Integration with Google Charts
    6. Integration with FusionCharts
    7. Integration with any charting library
  9. Customizing
    1. Available tutorials
    2. Customizing the Toolbar
    3. Customizing appearance
    4. Customizing the context menu
    5. Customizing the grid
    6. Customizing the pivot charts
    7. Localizing the component
  10. Security
    1. Security in Flexmonster
    2. Security aspects of connecting to an OLAP cube
      1. Ways of connecting to an OLAP cube
      2. The data transfer process
      3. Data security
      4. Data access management
  11. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.8 to 2.9
    4. Migration guide from 2.7 to 2.8
    5. Migration guide from 2.6 to 2.7
    6. Migration guide from 2.5 to 2.6
    7. Migration guide from 2.4 to 2.5
    8. Migration guide from 2.3 to 2.4
    9. Migration guide from 2.2 to 2.3
  12. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  13. 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.

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: