To show the most popular cases of using Flexmonster, our team prepared a sample React project on GitHub.
To download and run this project, see our guide: Run a sample React project from GitHub. Then choose one of the following 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 here.
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.
This 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.Integration with other charting libraries can be done in a similar way. Check out the integrations we provide.
In the With amCharts section, you can see a dashboard with Flexmonster and amCharts. 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.Integration with other charting libraries can be done in a similar way. Check out the integrations we provide.
You may be interested in the following articles: