highcharts/highcharts-react-native

load event not executing

mustapha-khan opened this issue · 16 comments

I have a bare expo react native app in which i m rendering an area chart with event object as shown below:

events: {
        load: function () {
          console.log(" =- =- =--=  event fired =- -= =- =- =-");
        },
      },

However the log is not printing .
Do we need to load any module for events to work ?

No extra module is needed.

Where you would like to have result of console.log? Replace with alert() to have call action in app.

No extra module is needed.

Where you would like to have result of console.log? Replace with alert() to have call action in app.

the result should be printed on powershell window on which react native app is running . . .
further the alert does not work either

Will test it this week, before release a new version (compatible with 8.0.4)

@mustapha-khan

I tested console.log in expo app and it does not work, I agree. But when I use alert or action on an axis, it works without any problems. I prepared you a simple test below (result is add the line on xAxis).

Options:

chartOptions: {
               chart: {
                    events: {
                        load: function () {
                            alert('triggered);
                            this.xAxis[0].addPlotLine({
                                value: 2,
                                color: 'red',
                                width: 2,
                                id: 'plot-line-1'
                            });
                        }
                    }
                },
}

Let me know if it worked or no.

Same Issue . when i use alert(time_entry) not working

same here
not working @sebastianbochan

Same Issue . when i use alert(time_entry) not working

Probably the variable is undefined.

Alert does not work when you refer to undefined variable.

Could you test with static text?

same here
not working @sebastianbochan

Do you refer to the external variable or static text?

Do you refer to the external variable or static text?

using static text

At this moment we're rebuilding the wrapper, but will test it in our beta-version and will let you know.

Can you provide any timeline for beta version ? @sebastianbochan

If all test will pass, the beta version will be available on monday (27.07).

We just finished testing the wrapper and released the beta version which is available here https://github.com/highcharts/highcharts-react-native/tree/beta-3

Any feedback will be really helpful.

Please keep in mind, that all packages should be in the latest versions of them. Number of versions are declared also in the package.json file.

@mustapha-khan please attach your code, because I tested it and still not able to reproduce the issue.

The new 3.0 version is released.

Im closing this ticket. If you will encounter any problems, please create a new ticket. In this case we will avoid confusing and keep the newest version on track.

Hi, I want to report a strange problem on the triggering on load

I couldn't trigger this event at first. However, when I don't use any of the variable outside the scope of the callback, it works:

            load: function () {
                alert(`triggered`);   // Successfully triggered
            }

When I add an variable i outside the function, and reference it in the callback function, it does not work:

const i = 123;

            load: function () {
                alert(`triggered ${i}`);   // Not triggered
            }

I wonder the cause might be calling the callback from the webview?

@hanayashiki I think the Webview is the general reason here. Maybe the variable references are sanitized or something. Unfortunately hard to guess.

I was able to make a small modification here in HighchartsReactNative.js in order to get the onLoad callback working properly:

                        style={this.props.webviewStyles}
                        onLoad={this.props.onLoad}
                    />

I added onLoad={this.props.onLoad} to the main <WebView />. Once you've made that small modification you can pass an onLoad prop to <HighchartsReactNative onLoad={() => console.log('chart loaded')} /> and it will fire as expected.