Using Flexmonster without UI

Answered
Patrick Berens asked on March 7, 2022

Hi ya support,
 
Got sort of an odd question. I'm trying to design the following stack and wondering if it is possible.
 
High Charts <- Flexmonster (Custom API) -> Our API -> Snowflake
 
However, I just want Flexmonster to do the API calls, shaping the data, and passing it to Highcharts. I do not want to use the Flexmonster UI. I want to code my own custom UI in React which allows you to select Rows, Columns, Values, Filters, etc.
 
Essentially every time a user selects a Row/Column/Value/Filter in my custom UI, I want to update Flexmonster with those selections and then have Flexmonster make the API call and then update Highcharts. similarly, I'll have a dropdown for chart type(pie, line, etc) and I'd pass that to Flexmonster which would cause Flexmonster to update Highcharts. I want Flexmonster UI itself to be completely hidden.
 
Is this possible?
Thanks!
Patrick

5 answers

Public
Vera Didenko Vera Didenko Flexmonster March 7, 2022

Hello, Patrick,
 
Thank you for writing to us.
 
Flexmonster is primarily a pivot table component and a data visualization tool. Therefore, it can't be used solely as a data provider – UI and the pivot table functionality need to be used together.
 
Even though using Flexmonster's algorithms without the UI is not possible, you can customize the component appearance in a way that suits you best.
Check out the following documentation page for more info on Flexmonster customization: https://www.flexmonster.com/doc/available-tutorials-customizing/.
 
If you are looking for a way to substitute Flexmonster's default pop-up controls with your own, this is also possible.
You can disable Flexmonster's default pop-up controls and create your own UI elements outside Flexmonster. Then you could use Flexmonster's API Reference to work with the component from your custom controls. 
 
You are welcome to reach out to us if other questions arise.
 
Kind regards,
Vera

Public
Patrick Berens March 9, 2022

Interesting. Ideally, I'd like to do the second, but I would like to hide the UI entirely if possible.
 
Example Potential Algorithm:

  1. Flexmonster is embedded in the application, but hidden so customer can't see it
  2. My page has custom filters, row, column, and value selectors
  3. On my page, user selects a graph type (Bar Chart, for instance)
  4. On my page, user selects a filter, row, column and value/aggregation
  5. My javascript sends this data to Flexmonster via the API (which call would this be?)
  6. My javascript tells Flexmonster to refresh with the new data, if necessary (which call?)
  7. Flexmonster UI makes call to My Custom API and then updates the Highchart Bar Chart that is on my page with correctly shaped data.

 
The Flexmonster UI is embedded in React, but it ideally is never visible for this use-case. It simply acts as a mechanism for making calls to My Custom API and shaping/sending the data to Highcharts.
 
Is this possible? If so, I'd love some guidance on:

  1. Which Flexmonster API calls would help here for updating Flexmonster with my custom javascript? (Updating with selections for row/column/value/visualization_type and telling it to refresh data)
  2. How I might hide the Flexmonster component while still using it for the above use-case? And still allowing it to render Highcharts.

 
I realize this is a bit odd, we love Flexmonster UI in other parts of our Reporting app, but for this use-case we really need a custom UI for selecting all these values and charts.
Thank you for your guidance!
Patrick
 

Public
Vera Didenko Vera Didenko Flexmonster March 10, 2022

Hello, Patrick,
 
Thank you for your response and for providing further details on your use case.
 
Please note that when integrating Flexmonster with third-party charting libraries, Flexmonster needs to be shown on the page.
 
Still, there is a way to display a Highcharts chart in the same container as the grid. Please refer to the following Support ticket where my colleague Illia explains the solution in detail: https://www.flexmonster.com/question/add-new-chart-type/.
 
For updating the rows/columns/values selection and refreshing the data visualization in Flexmonster, you could use the setReport() API call.
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
Patrick Berens March 10, 2022

Cool, thank you Vera for your help!
Patrick

Public
Vera Didenko Vera Didenko Flexmonster March 11, 2022

Hello, Patrick, 
 
We are happy to hear that you found our suggestion helpful.
 
As always, should any other questions arise, feel free to reach out.
 
Kind regards,
Vera

Please login or Register to Submit Answer