Skip to content

Events

ChartFactor visualizations and queries can be handled also through events. There are 2 types of events defined: Data events and Visualization events.

Data Events

Within these groups we have 3 events: beforequery, dataupdate, afterprocess. The first one is going to be fired when the .execute() method is invoked, so it means that the visualization or query is starting. Then dataupdate will be fired when the provider has queried the server and has the data ready to be processed for the visualization (if any). Lastly, afterprocess will indicate that everything is ready, which can be that the visualization is rendered or just that data is ready to be consumed.

Note

These events must be listened BEFORE the .execute() method

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var startStopCallback = function(e){
    console.log('This event was fired:', e.name)
}

var dataCallback = function(e){
    console.log('We got new data', e.data)
}

myChart.on('beforequery', startStopCallback)
myChart.on('dataupdate', dataCallback)
myChart.on('afterprocess', startStopCallback)
myChart.execute()

One of the most common uses for these events is to place indicators like loaders, or flags.

Visualization Events

These events are related directly with the visualization, so to subscribe to them, we’ll need to do it AFTER the .execute() method:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var myCallback = function(e){
    console.log("I'm the event:", e.name)
    console.log('I belongs to this element:', e.chart)
    console.log('I have the data:', e.data)
    console.log('I have other metadata', e.nativeData)
}
myChart.execute()
myChart.on('click', myCallback)
myChart.on('mouseover', myCallback)
myChart.on('mouseleave', myCallback)
myChart.on('datazoom', myCallback) // Only to those chart with a dataZoom

As we can see, these 4 events return the same structure. So in event.data we can find the data for the element being hovered, clicked or zoomed. This is what we use then to build filters and apply them to other visuals and queries. Specifically the click event. You can see how to build filters here.

event.nativeData will differ from one event to another and it contains a set of metadata related to the visual, like the seriesIndex, componentTypes and others.

ChartFactor supports other visualizations events for specific visualizations like for example the Time Range Filter, Text Search, Range Filter and others. You can check the respective visualization guides for more information.

Unregister Events

We can unsubscribe from any of the previous events with the off method.

1
myChart.off('eventname', myCallback)

Events Persistency

As explained here, visuals are re-used based on the their elements. Any event attached to a visual, will persist over any other re-usage of the element as long as the initial visual is not removed. So for example, if we have a Bars chart, and then we modify it by adding a couple of options or changing filters, metrics…etc, and on top of that we switch to use a Pie chart instead, after the .execute() method all events that were subscribed to the Bars will be fired for the Pie as well, so there’s no need to register them again.