0

FushionChart events prop seems to be not working properly in react-native-fusioncharts. Only the first key in the event object (key-value paired) will fire/emit.

In the example below, console.log("bI"); will be logged, but not any other event. Not even onInitialized since it depends on the renderComplete event.

But if we comment out beforeInitialize event, the next event would work and so on. onInitialized event will only work if we don't send the events prop or pass an empty object.

Update

Only occurs in iOS, and works fine in Android.

Update 2

Check point 2 in this blog, under "3. onMessage/postMessage".

The problem is that doing consecutive window.postMessage calls in iOS will result in losing your first calls as the url is overridden each time before the message is delivered so the last call wins


Scenario 1

// myChart.js
...
import ReactNativeFusionCharts from "react-native-fusioncharts";


const _libraryPath = Platform.select({
    android: { uri: "file:///android_asset/fusioncharts.html" },
    ios: require("./../../../assets/fusioncharts.html")
});

export default class MyChart extends PureComponent {
    refChart = null;
    _chartApi = null;

    render() {
        return (
            <ReactNativeFusionCharts
                ref={(ref) => {
                    this.refChart = ref;
                }}
                .... // <-- Add necessary props
                libraryPath={_libraryPath}

                onInitialized={(chartApi) => {
                    console.log("onInitialized - API");    // <-- Not emitting
                    this._chartApi = chartApi;
                }}
                events={{
                    beforeInitialize: () => {
                        console.log("bI");     // <-- Will emit
                    },
                    initialized: () => {
                        console.log("i");    // <-- Not emitting
                    },
                    chartClick: () => {
                         console.log("cclk");    // <-- Not emitting
                    }
                }}
            />
        );
    }

}

Scenario 2

// myChart.js
...
render() {
    return (
        <ReactNativeFusionCharts
            ref={(ref) => {
                this.refChart = ref;
            }}
            .... // <-- Add necessary props
            libraryPath={_libraryPath}

            onInitialized={(chartApi) => {
                console.log("onInitialized - API");    // <-- Not emitting
                this._chartApi = chartApi;
            }}
            events={{
                // beforeInitialize: () => {
                //     console.log("bI");
                // },
                // initialized: () => {
                //     console.log("i");
                // },
                chartClick: () => {
                     console.log("cclk");    // <-- Will emit
                }
            }}
        />
    );
}
...

Version:
react-native: 0.59.4
react-native-webview: 5.8.1
fusioncharts: 3.13.5
react-native-fusioncharts: 3.0.0

Yeshan Jay
  • 1,403
  • 1
  • 9
  • 18

1 Answers1

0

you can directly bind FusionCharts events inside the to react native fusioncharts directive take a look at this snippet -

<FusionCharts
            type={this.state.type}
            width={this.state.width}
            height={this.state.height}
            dataFormat={this.state.dataFormat}
            dataSource={this.state.dataSource}
            events={this.state.events}
            libraryPath={this.libraryPath} // set the libraryPath property
          />

For more details check out this link - https://github.com/fusioncharts/react-native-fusioncharts#working-with-events

Zapdos13
  • 855
  • 1
  • 8
  • 14