asked on December 13, 2019
My customers want to have multiple graphs and crosstabs displayed on the same page, each of them being a Flexmonster component, but all of them sharing the same MySQL ocsv datasource.
As the MySQL ocsv datasource can be quite large, I would like to be able to load it only once, and then refresh all the Flexmonster components when the datasource when it is ready.
Please tell me if this is possible and how to proceed.
⋅ December 17, 2019
Hello, Eric,
Thank you for writing to us.
At the moment it is not possible to share the same data source between several Flexmonster instances.
For your case, our team kindly suggests the following:
1) Caching the data on the server-side
2) Loading the data source for each Flexmonster instance one at a time instead of simultaneously
3) Considering a different data source:
We would like to point out that some client machines may not handle loading a large data source into the browser at once for each Flexmonster instance.
For this reason, we recommend considering using MS Analysis Server, Elasticsearch, or Mondrian.
In the case of MS Analysis Server/Elasticsearch/Mondrian, not all data is loaded into the browser at once. You have the ability to load just part of the data necessary for the specified report for each of your Flexmonster instances.
Only the part of the data needed for the current representation in each Flexmonster instance will be sent to the client side.
When more data is needed to be shown, a query will be formed and a different set of data will be sent to Flexmonster.
For more information about performance, please see the following threads from our forum:
3.1) https://www.flexmonster.com/question/load-field-data-when-it-is-needed/
3.2) https://www.flexmonster.com/question/how-much-will-the-flex-monster-pivot-grid-takes-to-load-the-data-of-1m-rows-with-20-column
Please let us know if you have any further questions.
Best regards,
Vera
⋅ December 17, 2019
Hello Vera, thanks for feedback.
In the meantime, I also saw this post:
https://www.flexmonster.com/question/how-to-change-save-button-behavior-in-v24-so-no-data-is-saved/
Our goal is similar, we want to provide to end users, not familiar with crosstabs or who simply want "ready to use" crosstabs and graphs, a page where multiple predefined stats and graphs would be displayed.
So I am thinking of the following solution.
Step 1:
A "power user" builds all these "ready to use" crosstabs and graphs, and saves each of them as a JSON FlexMonster report file.
Step 2:
These report files are saved in our own web app, which uses the WordPress Media Library where each file can be identified by an id.
Step 3:
The "power user" builds a ready to use statistics page by entering one or more WordPress shortcodes in it:
[kps_statistics_viewer reportId=N extraReportsIds=O,P,Q]
where N, O, P and Q are identifiers of report files saved in step 2 and which all use the same datasource.
Step 4:
When a end user requests this page, we processes these shortcodes.
We first check that N, O, P and Q are valid FlexMonster report files and that they all use the same data source.
If not, we display an error message, which is more for the "power user" to correct the shortcode.
If the shortcode is valid, we generate an HTML div in the page, with a FlexMonster component having the class "statisticViewer_reportId_N_extraReportsIds_O-P-Q".
Step 5:
On DOM ready, we use JQuery to process all divs with a class starting with "statisticViewer_reportId_".
For each of these divs:
1: if extraReportsIds are provided in the class name, we generate a context menu or toolbar icon with an item for each of these additional reports, O, P and Q in my example, and we load all these report files in an array indexed by report Id
2: we initialize the FlexMonster component with the report file identified by reportId N in the class name
3: when the user clicks on an item we add to the component, the FlexMonster component is refreshed with the slices and other parms of report associated to selected menu item, without reloading the data source which is the same.
I know how to initialize a FlexMonster component with a saved JSON file.
How can we add custom buttons or custom menus to a FlexMonster component?
How can we just refresh the slices and other parms of a FlexMonster component, but not the datasource, so the component is refreshed using already loaded datasource?
As we will have multiple FlexMonster components on the same page, do we have to be careful with some things in particular?
Thanks in advance for feedback.
⋅ December 18, 2019
Hello, Eric,
Thank you for your questions and for describing your use case in such detail.
1. About adding custom buttons or custom menus:
1.1) We kindly recommend customizing the Toolbar to add new Tabs or extend the existing Tabs' menus.
Please see our customizing the Toolbar guide for reference.
1.2) Also, new options can be added to the context menu.
Here is our customizing the context menu tutorial for guidance.
2. About refreshing the slices and other parameters without reloading the data source:
If the data source URL is the same, Flexmonster will not reload the data when a new report is set or new options are applied.
2.1) The slice can be changed with the runQuery() API call or by using getReport() and setReport()
2.2) New options can be set via the setOptions() API call or by using getReport() and setReport()
2.3) In addition, please see Flexmonster's API call list for more options.
3. What to be careful about if multiple Flexmonster components are on the same page:
3.1) If additional styles are applied during runtime, please keep in mind that they could be applied to all Flexmonster instances because their style elements are the same.
3.2) Also if query selectors by tag name or class name are used, elements from all Flexmonster instances could be returned because their elements' tag and class names are the same.
Otherwise, everything should work fine.
Please let us know if you have any further questions.
Best regards,
Vera
⋅ December 18, 2019
Hello Vera, it sounds like I have everything that I need to go ahead. It will probably takes me several weeks to complete this development, as I am working on other topics as well.
I will come back to you if I encounter any issue during this development.
⋅ December 19, 2019
Hello, Eric,
Thank you for your reply.
We are happy to hear that you have everything that you need to go ahead.
You are welcome to write to us in case any additional questions arise.
Best regards,
Vera
⋅ December 21, 2019
Hello Vera,
I have almost everything in place and there is just 1 last thing to fix.
I generate a toolbar with an icon with menu items, and I would like the menu items wide enough to show their entire label. Menu items seem to have a fixed width of 155px (see attached screen capture). How can I fix this.
Please advise.
⋅ December 24, 2019
Hello, Eric,
Thank you for your question.
We kindly advise adjusting the width with CSS.
Here is a JSFiddle example for illustration: https://jsfiddle.net/flexmonster/zpcL8rb2/
Also, please consider that Flexmonster's Toolbar is open source and you can add any desired changes to it.
Hope this helps.
Please let us know if additional questions arise.
Best regards,
Vera
⋅ January 21, 2020
Hello Vera,
I can set a larger toolbar menu item width with CSS, but the result is not so fine.
So I have decided to go another way, and to use Jquery to set the grid title to the report menu item label when the mouse hovers a toolbar menu item.
Unfortunately, I have not been able to do it since it sounds like the functions I bind to "hover" or "mouseenter" and "mouseleave" events are not processed.
Please give me a working JSFiddle example on how to bind an event on toolbar menu items.
⋅ January 23, 2020
Hello,
Thank you for your feedback.
In case the grid title has to be displayed while an appropriate tab of the drop-down menu is focused, we recommend using an approach illustrated within the following JSFiddle.
Such an implementation is based on tracking hovering through the mouseenter and mouseleave events provided by the JQuery framework.
We hope it works for you.
Kind regards,
Illia
⋅ January 24, 2020
Hello Illia, thanks for pointing me in the right direction, I have been able to achieve exactly what I wanted.
This question is now closed
