Menu
Download Free Trial
  1. API reference
  2. Welcome
    1. Component overview
    2. Quickstart
    3. System requirements
    4. Troubleshooting
    5. Installation troubleshooting
    6. Managing license keys
  3. Connecting to Data Source
    1. JSON
      1. Connecting to JSON
      2. Data types in JSON
    2. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Compressor
      3. Data types in CSV
    3. Database
      1. Connecting to SQL databases
      2. Connecting to other databases
      3. Connecting to database with .NET
      4. Connecting to database with .NET Core
      5. Connecting to database with Java
      6. Connecting to database with PHP
    4. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Accelerator
      3. Installing Accelerator as a Windows Service
      4. Referring Accelerator as a DLL
      5. Configuring username/password protection
      6. Configuring secure HTTPS connection
      7. Troubleshooting
    5. Pentaho Mondrian
      1. Connecting to Pentaho Mondrian
      2. Getting started with Accelerator
      3. Configuring Mondrian roles
      4. Сonfiguring username/password protection
      5. Сonfiguring secure HTTPS connection
      6. Troubleshooting
    6. icCube
  4. Configuring report
    1. What is a report
    2. Data source
    3. Slice
    4. Options
    5. Number formatting
    6. Conditional formatting
    7. Set report to the component
    8. Get report from the component
    9. Date and time formatting
    10. Configuring global options
    11. Export and print
    12. Calculated values
    13. Custom sorting
  5. Integration with frameworks
    1. Available tutorials
    2. Integration with jQuery
    3. Integration with AngularJS
    4. Integration with Angular 2
    5. Integration with Angular 4
    6. Integration with React
    7. Integration with RequireJS
    8. Integration with TypeScript
    9. Integration with ASP.NET
    10. Integration with JSP
    11. Integration with PhoneGap
  6. Integration with charts
    1. Integration with Highcharts
    2. Integration with FusionCharts
    3. Integration with Google Charts
    4. Integration with any charting library
  7. Customizing
    1. Customizing toolbar
    2. Customizing appearance
    3. Localizing component
  8. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.3 to 2.4
    4. Migration guide from 2.2 to 2.3
  9. Older Versions
    1. Documentation 2.3
    2. Documentation 2.2
    3. API reference - Flex
Table of contents

Component overview

Welcome to JavaScript Pivot Table & Charts component — web client-side component designed to view, analyze and manage multidimensional data online. The data is represented in compact yet interactive visual reports — multidimensional tables and charts that are fully customizable for client’s needs.

The Component has 2 main advantages over competing types of applications:

  • Usability and speed of the desktop application,
  • Mobility and scalability of the web-based application.

Pivot Table enables you to analyze numerical data. With Pivot Table, you can look at the same information in different ways with just a few mouse clicks.

Documentation guide

Structure of Flexmonster Component

Our Component consists of the following functional parts:

Pivot Grid

Pivot Grid shows the subset of data that can be defined in the report or configured by the end user. Apply sorting, filtering and other operations to make data look the way you need.

javascript pivotgrid

Pay attention to the arrow in the upper right corner. This is the button used to show or hide Fields List view.

Pivot Chart

Pivot Chart displays your data in a convenient visual form. Our charts are interactive: expand the values by clicking on X axis and legend elements or see underlying data via drill through pop-up. The component supports the following chart types: Bar, Horizontal Bar, Line, Scatter, Pie, Bar Line, Bar Stack.

web pivotchart

Fields List and Filters are available for charts as well as for the grid.

Fields List

Use Fields List to configure any view with drag-and-drop.

fields list in pivot table js

This window contains five main sections:

  • All dimensions from the original data source;
  • Fields selected or set inside the report to Report filters define which subset of data will be shown in a report;
  • Fields selected or set inside the report to Rows define the left headers of the table;
  • Fields selected or set inside the report to Columns define the upper headers of the table;
  • Fields selected or set inside the report to Values define which measures will be shown on the grid. You need to choose aggregation function for each measure.

Filter

Sort and filter by members’ names using Filter. Try filtering by value to get top X or bottom X results. Filter is accessible through the gear icons on the right of each hierarchy name for both grid and charts.

filter in web pivot grid

Toolbar

Toolbar uses API calls and provides easy access to the most used features. The standard version of Toolbar looks the following way:

pivot table toolbar

In addition, Toolbar can be customized. You can remove tabs and buttons or add new ones.

This was a quick overview of Flexmonster Component structure. To continue the process of getting acquainted with our component, please proceed to the guide which will help you to create a pivot table in your web application.