Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How to import FlexmonsterHighcharts from react-flexmonster

Answered
Yusuf Yildiz asked on June 12, 2020

I can see that FlexmonsterHighcharts is defined under /lib/flexmonster.highcharts.js. However I can’t see any way to fetch that into my React code.

import * as FlexmonsterReact from ‘react-flexmonster’;
works fine but can’t figure out whether I can get FlexmonsterHighcharts to do FlexmonsterHighcharts.getData

 
I’ve also tried to add <script src=”https://cdn.flexmonster.com/lib/flexmonster.highcharts.js”></script>
But this one clashes with flexmonster.full.js and it doesn’t work.
 
What’s the best way to handle this scenario?
Ideally, I wanna import FlexmonsterHighcharts  from the react-flexmonster and use it. But I’m also fine with mix and match as long as it works.
 
I couldn’t find a fully functional react, flexmonster and highcharts combination example. Thanks for the help in advance.  

7 answers

Public
Vera Didenko Flexmonster June 15, 2020

Hello, 
 
Thank you for reaching out to us.
 
We kindly suggest including Flexmonster’s HighCharts connector in index.js the following way: 

import 'flexmonster/lib/flexmonster.highcharts.js';

Then it should be available throughout the React application. The highcharts.getData() function can be accessed through the FlexmonsterReact reference, for instance: 

import React, { Component } from "react";
import Highcharts from "highcharts";
import * as FlexmonsterReact from "react-flexmonster";



export default class FlexmonsterAndHighcharts extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}

reportComplete = () => {
this.refs.pivot.flexmonster.off(this.reportComplete);
this.createChart();
};

createChart = () => {
this.refs.pivot.flexmonster.highcharts.getData(
{
type: "area"
},
function(data) {
console.log(data);
Highcharts.chart("highcharts-container", data);
},
function(data) {
Highcharts.chart("highcharts-container", data);
}
);
};

render() {
return (
<div>
<FlexmonsterReact.Pivot
ref="pivot"
toolbar={true}
width="100%"
report="https://cdn.flexmonster.com/reports/report.json"
reportcomplete={this.reportComplete}
/>
<div id="highcharts-container" />
</div>
);
}
}

 
 
Please let us know if this works fine for you. 
Waiting for your reply. 
 
 
Kind regards, 
Vera

Public
Yusuf Yildiz June 16, 2020

Vera,
Thanks for your answer but unfortunately I’m running into the same issue I’ve had before. If I don’t include flexmonster.highcharts.js, at least my flexmonster works.
But If I add it, there are two javascript errors and things don’t work anymore. I’ve tried adding the script to the container window, I tried to import it into my react package. Regardless of the method, there are crashes and it doesn’t work.
ScreenHunter 2161.png -> shows the maximum call stack size exceeded error. 
ScreenHunter 2162.png -> I tried to unminify the file so I could give you the exact line but it’s not clear. Maybe you can read it.

                    f.hsa = function (c, a) {
if (a) {
"string" == typeof a && (a = f.Dl(a));
var b = a;
c != f.RK &&
c != f.uq &&
c != f.Pj &&
c != f.NK &&
(b = function () {
for (var d = [], g = 0; g < arguments.length; g++) d[g] = arguments[g];
e.rd(function () {
a.apply(null, d);
}, 1);
});
f.P().addEventListener(c, b);
}
};

Problem happens in  a.apply(null, d); line.
I’ve tried to ignore this and still called FlexmonsterHighcharts.getData and I got the following exception.

this.instance.getData({
slice: slice
}, function(data) {
if (_prepareDataFunction != undefined) {
callbackHandler(_prepareDataFunction(data, _options), data);
} else {
_options.withDrilldown = options.withDrilldown && data.meta["rAmount"] > 0 && data.meta["cAmount"] > 0; //not enough data
callbackHandler(prepareData(data, _options), data);
}
}, _updateHandler
);

Uncaught TypeError: Cannot read property ‘getData’ of undefined
this.instance is null.
 
It’s clear that I am not able to make each other aware of themselves.

FlexmonsterReact.highcharts isn’t available and FlexmonsterHighcharts doesn’t have a reference to this.instance which I assume should be FlexmonsterReact instance.

 
I’m stuck and can’t really bring them together in React. Isn’t there some sort of a configuration to enable this at the package level so we don’t mix and match?
If it’s necessary I can give you a code snippet even though I think the problem is with the way highcharts-flexmonster library is imported. 
Looking forward to your answer.
 
 

Public
Vera Didenko Flexmonster June 16, 2020

Hello, Yusuf,
 
Thank you for your detailed response.
 
We would like to explain that the highcharts.getData() function needs to be called from the Flexmonster instance
When it comes to React, we advise creating a React reference (ref) to the Flexmonster component and using it to access the Flexmonster instance. This way the Flexmonster API calls should be accessible.
 
In addition, to use the Highcharts connector’s functions it is necessary to include the connector in your React project. 
One way is to include it via a CDN link in index.html. Alternatively, you can refer to it in index.js from the npm module.
We would like to kindly explain that we have not managed to reproduce the issue you encountered when including the connector. 
 
We have added a Flexmonster and Highcharts example to our React sample project on GitHub for reference.
You are welcome to check it out by the following link: https://github.com/flexmonster/pivot-react/blob/master/ES6/src/PivotTableAndHighcharts.js
When the sample project is run, the Highcharts example should be accessible by the following link: http://localhost:3000/highcharts.
 
Please let us know if this helps to get everything working. If not, could you please provide a code sample where the issue is reproducible?
This will greatly help us to make further progress in solving the problem.
 
Looking forward to your response.
 
Kind regards, 
Vera
 

Public
Yusuf Yildiz June 16, 2020

Vera,
Thanks for the reply. I was finally able to call getData method.
But I’m still experiencing the other issue I mentioned. However, I don’t think it’s necessarily related to your library.
We’re utilizing mobx observables and the assignment below fails with the “Uncaught RangeError: Maximum call stack size exceeded” error

this.props.store.flexmonster = this.flexmonsterRef.current.flexmonster;

 
If I assign it to a regular(not observable) variable, this exception doesn’t occur.
If I don’t add flexmonster.highcharts.js, assignment doesn’t fail either. This assignment works if I remove the highcharts script.
 
So I believe this is a combination of mobx observable and flexmonster.highcharts.
 
I’m not sure if you can test such a scenario locally. If you can, I’d be glad to hear your findings.
 
If not, is it possible for me to receive the unminified version of flexmonster.full.js 2.8.7 version?
 
That way I can debug and understand why it fails.
 

            e.rd = function (f, c) {
f = setTimeout(f, c); --This is Where the infinite loop seems to be triggered
k.FD.push(f);
return f;
};

As you can see my unminified version doesn’t really tell me what’s going on.
 
Any input will be appreciated.
 
Thanks,
Yusuf

Public
Vera Didenko Flexmonster June 17, 2020

Hello, Yusuf,
 
Thank you for your detailed answer. 
 
We are glad to hear that you are able to call the getData method. 
 
Regarding the issue when using mobx observables in combination with flexmonster.highcharts.js

It seems the issue lies either with mobx observables or flexmonster.highcharts.js.
We would like to kindly mention that although we don’t provide the unminified version of Flexmonster, the Highcharts connector’s code is open.
This makes it possible to modify the connector’s code and make any necessary adjustments. 

With this in mind, our team kindly suggests one of the following: 

  1. Assigning the Flexmonster reference to a regular variable (not observable).
  2. Providing a code sample where the issue is reproducible so that we could test it on our end.
    It is also possible to fork our sample React project on GitHub and modify it so that the issue is reproducible: https://github.com/flexmonster/pivot-react
    The sample contains a React + Highcharts example as well: https://github.com/flexmonster/pivot-react/blob/master/ES6/src/PivotTableAndHighcharts.js
  3. Looking into the flexmonster.highcharts.js source code and checking if any adjustments could be made to resolve the issue.

 
Please let us know if this helps. 
Looking forward to your answer. 
 
Kind regards, 
Vera

Public
Yusuf Yildiz June 19, 2020

Hi Vera,
I was able to fix the issue on our side by changing the variable to be observable.ref and not an observable.
 
This was due to a logical operation below:
this.flexmonsterRef.current.flexmonster.highcharts.instance === this.flexmonsterRef.current.flexmonster
Observable tried to decorate everything as observable and got into this infinite loop. This explains why we only saw it when highcharts was enabled.
There’s no issue on your side but in case someone else experiences the issue the solution is not to use observable but observable.ref. Let’s set it in the record.
 
Thanks,
Yusuf

Public
Vera Didenko Flexmonster June 22, 2020

Hello, Yusuf,
 
Thank you for sharing your solution with us. 
 
We are glad to hear that you managed to solve the problem. 
 
As always, if any questions arise, please feel free to reach out.
 
Kind regards, 
Vera

Please login or Register to Submit Answer