asked on July 12, 2022
HI,
We have upgraded the Flexmonster to 2.9.27 . After doing so, the integrated Echarts and google charts are not loading for our react application . Kindly provide us a solution to resolve this issue. Please find the attachments of the issue with the newer version and old working version.
regards,
Akshay
⋅ July 13, 2022
Hello, Akshay!
Thank you for writing to us.
We were unable to reproduce similar behavior with Flexmonster 2.9.27, so we need more information to help you. Could you please send us browser console logs and code snippets containing React components with Flexmonster and charts?
Looking forward to hearing from you.
Best Regards,
Maksym
⋅ July 13, 2022
Hello, Maksym
Thank you for the response,
We updated the flexmonster from 2.6.3 to 2.9.27 with react version 17.0.2. The code which we using presently is working fine for the older version on flexmonster 2.6.3 . After we upgraded it to flexmonster 2.9.27, we are facing this issue that the e-charts and google-charts are not loading on the application.
We are not getting any console errors in the browser
images are also attached with charts and with charts in pervious message
Sending you the files that we are using to run the charts in the application.
This file below was used when we were using Flexmonster 2.6.3
flexmoster.jsx - file attached
entity_analytic_widgets.jsx - file attached
This file below is what we are using after upgrading to Flexmonster 2.9.27
with the 2.9.27 flexmonster.jsx
We are able to get raw data that can be seen on an excel format on the application, but that data to be fed to Flexmonster to get graphical renderings is where we are stuck. Please help us with the solution, at the earliest.
Thanks in advance
Regards,
Akshay
⋅ July 14, 2022
Hello, Akshay!
Thank you for sharing the code.
Our team examined the components you have sent us and noticed that the line responsible for passing the chart props via the flexmonsterUpdateCallback method is commented out in the latest version (with-the-2.9.27-flexmonster.jsx, line 48):
// 'reportcomplete': this.flexmonsterUpdateCallback,
Previously, the charts were loaded by flexmonsterUpdateCallback on the reportcomplete event, which makes sense, as this event signalizes that Flexmonster was successfully loaded. Without this line of code, `flexmonsterUpdateCallback` will not be called, which explains why the charts are empty.
We suggest using the fmOptions configuration from the code used with older versions of Flexmonster.
let fmOptions = {
'width': '100%',
'element': 'pivotContent',
'global': { 'options': { 'configuratorActive': false } },
'componentFolder': window.location.protocol + '//' + location.host + '/flexmonster/',
'height': '95%',
'reportcomplete': this.flexmonsterUpdateCallback,
'licenseKey': 'license key here'
}
Please let us know if this helps to solve the issue.
Best Regards,
Maksym
⋅ July 14, 2022
Hello Maksym,
Earlier also, we had run the code as is (without commenting the said line). Since it did not work, then we tried commenting it out. After your suggestion, we again uncommented and tried running but same issue.
Please find attached the file, which we are reworking and see the appropriate partial output we could achieve. Likewise, we are making changes to get the charts displayed.
I Hope you are able to understand our workaround. Now, if you feel we are doing something wrong, please do suggest the better/correct way.
Thanks and regards,
Akshay
⋅ July 19, 2022
Hello, Ashkay!
Our apologies for the late response.
Please check the attached sample project with a similar chart dashboard using React wrappers of Echarts and Google Charts libraries. We suggest using this project as a guideline for chart implementation. Use the following commands to install all dependencies and run the project:
npm i
npm start
Our sample project uses the reportcomplete event to initialize chart loading (see src/components/ReactFlexmonsterExamples/Pivot.js):
reportcomplete={this.reportComplete}
This event triggers two getData API calls for initializing Echart and Google Chart. In the case of Echarts, additional data preprocessing is done. After this, the data is passed into the chart dashboard component (src/components/ReactFlexmonsterExamples/ChartDashboard.js) as React props.
Hope you will find this example helpful. Feel free to write us if further assistance is needed.
Best Regards,
Maksym
⋅ July 26, 2022
Hello, Akshay!
Hope you are doing well.
We wonder whether you had time to check the project with Echarts and Googlecharts integration with React Flexmonster. Please let us know if this example helped you with charting libraries integration in your project.
Best Regards,
Maksym
⋅ August 2, 2022
Hi, Akshay!
Our team would like to know if you looked at our example project with charting libraries integrations.
Was this project helpful in configuring them in your project?
Best Regards,
Maksym
⋅ August 2, 2022
Hi Maksym
The example project gave some idea of what we had to change. We had to make changes in the flexmonster. jsx file, that was initially shared. In the file, we have changed the document get element by id line from hide to show and in the return statement also we changed the hide to show. In show echart function we have added to lines for hiding the data tables and only to show the chart.
Thanks a lot for the help. We have resolved the issue.
Regards,
Akshay
⋅ August 2, 2022
Hi, Akshay!
Thank you for your reply.
We are glad to hear that everything works for you now.
Please contact us if any other questions arise.
Best Regards,
Maksym