Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
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 AngularJS (v1.x)
      4. Integration with TypeScript
      5. Integration with R Shiny
      6. Integration with jQuery
      7. Integration with Ionic
      8. Integration with Electron.js
      9. Integration with Webpack
      10. 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. Getting started with Flexmonster Data Server
      2. Installation guide
      3. Configurations reference
      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. Referring 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. 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
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referring 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
    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. 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
  6. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Mapping
    6. Number formatting
    7. Conditional formatting
    8. Set the report for the component
    9. Get the report from the component
    10. Date and time formatting
    11. Configuring global options
    12. Export and print
    13. Calculated values
    14. Custom sorting
  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. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.7 to 2.8
    4. Migration guide from 2.6 to 2.7
    5. Migration guide from 2.5 to 2.6
    6. Migration guide from 2.4 to 2.5
    7. Migration guide from 2.3 to 2.4
    8. Migration guide from 2.2 to 2.3
  10. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  11. Documentation for older versions
Table of contents

Flexmonster Pivot Charts

Our component has built-in interactive charts extending its visualization functionality. Flexmonster Pivot Charts allow expanding the hierarchies, filtering the data, and drilling through chart segments to see more details about the data. 

See the following sections to start with Flexmonster Pivot Charts:

Available chart types

Flexmonster provides seven chart types:

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

Try all the available chart types on the live Pivot Charts demo.

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

To integrate Flexmonster with other charting libraries, see the guide on integration with any charts.

The data 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 UI using the Field List, or programmatically via the report.slice object.

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

Using Flexmonster Pivot Charts

Add the basis for the pivot charts

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

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

<script>
var pivot = new Flexmonster({
container: "pivotСontainer",
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

It is the simplest way to switch to the pivot charts. Select the Charts tab on the Toolbar to see the pivot charts:

Switch to the pivot charts programmatically

The default view can be changed from the grid to 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

Configurations specific to charts can be set via the options.charts property. It allows setting chart type and chart title, showing and hiding filter and legend 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 grid and charts. Here is the example of hiding 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: