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. Component overview
    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
      6. Connecting to other databases
    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
    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. 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
  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. Customizing the Toolbar
    2. Customizing appearance
    3. Customizing the context menu
    4. Customizing the grid
    5. Customizing the pivot charts
    6. 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
    9. Documentation for older versions
  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
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
  • Pie
  • Bar
  • Bar stack
  • Line
  • Bar line
  • Scatter

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.

What’s next?

You may be interested in the following articles: