Need a special offer?Find out if your project fits.
+
Get Free Trial
Get Free Trial
  1. API reference
  • Introduction
    • JavaScript
    Angular
    Vue
      Vue 3
      Vue 2
      1. Sample Vue 2 project
      2. Integration with Vue 2
      3. Usage examples
    React
    Other integrations
    Troubleshooting
    Connecting to Data Source
    Configuring the component
    Saving component configs
    Customizing
    Charts
    License keys
    Accessibility
    Security
    Updating to the latest version
    Flexmonster CLI Reference
  • Browser compatibility
  • Documentation for older versions
    • Table of contents

    Usage examples

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

    Learn more about these examples:

    Creating the pivot table

    The first example demonstrates basic usage of Flexmonster. Notice how the toolbar, report, and licenseKey initialization parameters are specified:

    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. Here is the source code:

    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.

    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.

    Here is how this functionality is implemented:

    See the full list of Flexmonster API calls.

    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:

    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. See how it is implemented:

    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(). Have a look at the source code:

    See our documentation to learn more about cell customization.

    Integrating with Highcharts

    Here is how the Highcharts integration is implemented:

    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.

    Learn more about integration with Highcharts.

    Integrating with amCharts

    Our sample project contains examples of integration with amCharts 5 and amCharts 4.

    The demo with amCharts 5 can be accessed through the project's side menu. The example with amCharts 4 is hidden from the menu, but you can still access it via a direct link: http://localhost:5173/with-amcharts4 (the project's port can be different).

    Here is how the integration is implemented:

    amCharts 5

    amCharts 4

    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.

    Learn more about integration with amCharts.

    What's next?