Dear visitor, despite all the challenges, our team continues operating at full speed.

We are ready to help with any questions you may have. Please fill out this quick form and we'll get back to you.

Fill the form
Get Free Trial
  1. API reference
  2. Welcome
    1. Component overview
    2. Quick start
    3. System requirements
    4. Troubleshooting
    5. Managing license keys
    6. Migrating from WebDataRocks to Flexmonster
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Data types in CSV
    3. 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
    4. 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
    5. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
    6. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with the Accelerator
      3. Installing the Accelerator as a Windows service
      4. Referring the Accelerator as a DLL
      5. Configuring the authentication process
      6. Configuring a secure HTTPS connection
      7. Troubleshooting
    7. 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. Implementing the custom data source API server
      5. Implementing filters
      6. Supporting more aggregation functions
      7. Returning data for the drill-through view
    8. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    9. 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
  4. 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
  5. 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
  6. Integration with frameworks
    1. Available tutorials
    2. Integration with Angular
    3. Integration with React
    4. Integration with Vue
    5. Integration with Python
      1. Integration with Django
      2. Integration with Jupyter Notebook
    6. Integration with React Native
    7. Integration with AngularJS (v1.x)
    8. Integration with TypeScript
    9. Integration with R Shiny
    10. Integration with jQuery
    11. Integration with Ionic
    12. Integration with Electron.js
    13. Integration with Webpack
    14. Integration with RequireJS
  7. Charts
    1. Available tutorials
    2. Flexmonster Pivot Charts
    3. Integration with Highcharts
    4. Integration with Google Charts
    5. Integration with FusionCharts
    6. Integration with any charting library
  8. Customizing
    1. Customizing the Toolbar
    2. Customizing appearance
    3. Customizing the context menu
    4. Customizing the grid
    5. 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
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="flexmonster/flexmonster.js"></script>

<script>
var pivot = new Flexmonster({
container: "pivotСontainer",
toolbar: true,
report: {
dataSource: {
filename: "data.csv"
}
},
licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
});
</script>

The grid is the default view shown by the component. Switching to charts can be done either via UI (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"
    }

},

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.

What’s next?

You may be interested in the following articles: