Get Free Trial
  1. API reference
  2. Welcome
    1. Getting started
    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. Integration with Angular
    3. Integration with React
    4. Integration with Vue
    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. Data types in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Data types 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. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with the Accelerator
      3. Configuring Mondrian roles
      4. Configuring username/password protection
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    11. 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. Save component configs
      1. Get the report from the component
      2. Set the report for the component
      3. Share the report
      4. Export and print
  7. 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
  8. 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
  9. 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
  10. 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
  11. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  12. Documentation for older versions
Table of contents

Flexmonster Pivot Charts

Our component has built-in interactive charts that extend its visualization functionality. Flexmonster Pivot Charts allow expanding hierarchies, filtering data, and drilling through chart segments for more details about the 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 the available chart types on the live 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 via the UI using the Field List, or programmatically with the report.slice object.

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

Using Flexmonster Pivot Charts

Create a basic pivot table

Add the following pivot table to your HTML page using data from a CSV file:

<div id="pivotContainer">The component will appear here</div>
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<script>
var pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "https://cdn.flexmonster.com/"
toolbar: true,
report: {
dataSource: {
filename: "data.csv"
}
}
});
</script>

The grid is the default view shown by the component. Switching to charts can be done either using the Toolbar or programmatically.

Switch to the pivot charts via the Toolbar

This is the simplest way to switch to the pivot charts. Select the Charts icon on the Toolbar to see the pivot charts:

Switch to the pivot charts programmatically

The default view can be changed from the grid to the charts by setting the viewType option to "charts":

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

},

See the guide on options to learn more.

Configuring the pivot charts

Chart options

Options specific to charts can be set via the options.charts property. It lets you manage the chart type, chart title, visibility of the UI controls, etc.

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

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

}

Try a live sample on JSFiddle.

See the full list of chart options.

General options

General options allow configuring filters, the Field List button, and many more. They are applied to both the grid and the charts. Here is the example that shows how to hide the Field List button:

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

Check out a live demo on JSFiddle.

See the full list of general options.

Customizing the pivot charts

The pivot charts’ appearance can be customized and adjusted to the user’s needs. See our detailed guide on chart customizing.

How the pivot charts are created

This section explains how different types of Flexmonster Pivot Charts are created.

XY chart

XY is a general title that implies many chart types with similar features. Flexmonster Pivot Charts suggest six types of XY chart: column, bar, line, scatter, stacked column, and column line charts. This section focuses on similarities in their structure.

XY chart is called so due to the X-axis and Y-axis used in diagrams of this type. 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 more than one field, you can expand members for more details on the data. Just click a + icon near the member name:

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

When columns are present in the slice, the legend appears below the chart. If columns have more than one field, you can expand a chart segment by clicking a + icon on the legend:

Most of the Flexmonster chart types have a similar structure, but the column line chart is built differently. This type of chart uses two measures: the first measure is a base for a column chart, and the second measure is used for a line chart. 

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 field in rows and one measure. The field will be a pie chart’s category, and the measure will be the chart’s numeric value. 

When rows contain more than one field, you can expand members to get extra details on the data. Just click a + icon on the chart legend to expand a chart segment:

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

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 member for the chart via the options.chart.pieDataIndex property or via UI:

If columns have more than one field, the fields are used for the chart as follows:

  • If all the column nodes are collapsed, only the first column field is used for a pie chart.
  • If some nodes are expanded, then sub-members of expanded nodes can be selected for the chart.

What’s next?

You may be interested in the following articles: