Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Usage examples

    This guide lists examples of Flexmonster usage in Angular. They are provided within our sample Angular project.

    Learn more about these examples:

    Creating the pivot table

    The first example demonstrates basic usage of Flexmonster. In pivot-table-demo.component.html, notice how the toolbar and report initialization parameters are specified in Angular.

    Flexmonster has more initialization parameters. Have a look at all of them.

    Handling events

    This usage example focuses on Flexmonster events. It provides a toggle button for subscribing to all the events and unsubscribing from them. See how event handling is implemented in the handling-events.component.ts file.

    When Flexmonster is subscribed to the events, the log output displays:

    • Which event was triggered.
    • When the event was triggered.
    • Details about that event.

    See the full list of Flexmonster events in our documentation.

    Learn more about using Flexmonster events in Angular.

    Using API calls

    The Using API calls section is about customizing the component with API calls. Switch the toggle buttons to:

    • Show the column chart.
    • Show the grid.
    • Make the component read-only.
    • Make the component interactive.

    All the functionality is implemented in using-api-calls.component.ts.

    See the full list of Flexmonster API calls here.

    Learn more about using Flexmonster methods in Angular.

    Updating data

    The Updating data section contains an example of updating data at runtime. This example uses the updateData() API call. See the source code in the updating-data.component.ts file.

    Customizing the Toolbar

    The Customizing the Toolbar section provides an example of Toolbar customization.

    The beforetoolbarcreated event is used to invoke the customizeToolbar() function. As a result, a new tab with custom functionality is added.

    The beforetoolbarcreated event is called in customizing-toolbar.component.html, and its handler can be found in the customizing-toolbar.component.ts file.

    Learn more about customizing the Toolbar.

    Customizing the grid

    The Customizing the grid example demonstrates how to highlight a certain measure on the grid.

    Switch the toggle buttons to apply or remove customization. Custom grid styles are defined in the customizeCellFunction() method in the customizing-grid.component.ts file.

    See our documentation to learn more about cell customization.

    Integrating with Highcharts

    See an example of Highcharts integration in the With Highcharts section.

    The main elements of this integration are:

    1. The Highcharts module and Flexmonster Connector for Highcharts.
    2. A container for Highcharts.
    3. The reportcomplete event; when it is triggered, the chart-drawing function is invoked.
    4. The drawChart() function, which you can find in the with-highcharts.component.ts file.

    Integration with other charting libraries can be done in a similar way. Check out the integrations we provide.

    Integrating with amCharts

    In the With amCharts section, you can see a dashboard with Flexmonster and amCharts.

    The key elements of this integration are:

    1. The amCharts module and Flexmonster Connector for amCharts.
    2. A container for amCharts.
    3. The reportcomplete event; when it is triggered, the chart-drawing function is invoked.
    4. The drawChart() function, which you can find in the with-amcharts.component.ts file.

    Integration with other charting libraries can be done in a similar way. Check out the integrations we provide.

    What’s next?

    Adjust the sample project to your needs: