This guide lists examples of Flexmonster usage in Vue 2. They are provided within our sample Vue 2 project.
Learn more about these examples:
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.
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:
See the full list of Flexmonster events in our documentation.
The Using API calls section is about customizing the component with API calls. Switch the toggle buttons to:
Here is how this functionality is implemented:
See the full list of Flexmonster API calls.
The Updating data section contains an example of updating data at runtime. This example uses the updateData() API call.
See the source code:
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.
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.
Here is how the Highcharts integration is implemented:
The main elements of this integration are:
reportcomplete
event; when it is triggered, the chart-drawing function is invoked.drawChart()
function.Learn more about integration with Highcharts.
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:
The key elements of this integration are:
reportcomplete
event; when it is triggered, the chart-drawing function is invoked.drawChart()
function.Learn more about integration with amCharts.