Event callback not working

#1

We’re building a React app along with ChartFactor and I’m trying to subsscribe to the datazoom event of a bars visualization in one component in order to update a window by showing the first and last item of the selected range. It works well when I’m try with a simple bars in a standalone html page, but not in the application. It just doesn’t seems to be listening the event, could it be that maybe is loosing the event?

The subscription is simply done with: bars.on('datazoom', updateEdgesWindow)

#2

Hi @rscoleman. Is hard to tell without looking at the code. How are you handling the chart creation and event subscription? Is the chart (aktive) created already before the component is rendered and then you execute when rendering? In case the chart is created within the component make sure is not re-executed everytime that is rendered. A good place to do this is within componentDidMount()

#3

This is weird, I just realized of this: I’m also using the onclick event to display extra info of the clicked chart. I put a console log and it printed several times! So it seems that I’m having several subscriptions with the same callback! I need to fix this, could it be the cause?

I’m using componentDidMount() to define the chart aql, but after the component is rendered I call the execute() of the chart and register to several events. But the datazoom still doesn’t trigger.

#4

My guess is that the instances has too many events attached, specifically the click, so there’s no room for others. Each instance has a limit of 10 events subscriptions since is enough for all cases. Haven’t you received the warning: Too many events attached to this visual...?

If you are using version 1.14 of the Toolkit, access the visual from the console and get the events you are subscribed to like this:

cf.getVisualization('div-id').get('events')
#5

Hi @eduardo! Indeed, I had like 8 clicks events attached so there was no room for others! My problem was that I had warnings disabled in the developers tools console, so lesson learned!

It looks like it was attaching a new click event everytime at some point as u mentioned. One last question. Is there a way that I can create my own events using chartfactor? I would like for example to trigger some custom events from some components and handle them from the store.

#6

Yes, you can use ChartFactor as an event handler by defining new events and firing yourself at a given moment by using the cf object.

First you will subscribe to your custom event like this:

const myEventCallback = e => console.log('My data is', e.data)

cf.on("my-event", myEventCallback)

Then you just need to trigger the event wherever you need

cf.dispatch({ name: "my-event", data: [1,2,3] })

The dispatched object can contain any information you need. The only requirement is that the name property is the same name you used for your event.