Getting data for visualization only works the first time

#1

Hi guys!

I have the following situation: We are building an application using react. In one component we use a ChartFactor aql to query our server so we can get the data and update our component. We perform the query when the component is mounted (in the useEffect hook). The thing is that the data is perfectly loaded only the first time, but whenever I apply a filter (we use the Interaction Manager) the data is not updated. Do you have any idea what the issue could be?

#2

Hi @aldrid84. I don’t quite understand. Can you maybe put an example of the aql? When a filter is applied through the IM, the CF Toolkit will automatically affect that visualization (if applies), so there is no need to do anything to let that visualization know that a filter has been applied. We’ll need more info about what you are trying to do.

#3

Check if the filters match with the fields of your query or if it is the same source. That happened to me once.

#4

@jasouvec Well, the filter belongs to the same source, so I don’t think that’s the problem.
@eduardo Here is an example of the aql:

  // Get how many customer feedbacks are registered
 // in a specific data
    const metric = cf.Metric()
    const chart = cf.provider('Elasticsearch')

    chart
        .source('customer_feedback')
        .metrics(metric)
        .element(element)
        .execute()
        .then(data => {
           const count = data.data[0].current.count
           containerRef.current.innerText = count
      })

Basically the idea is to update the text of containerRef whenever a date filter is applied from a Trend visualization. containerRef is a reference from the useRef hook.

#5

I think I know where your problem is. You are updating the text of your containerRef only after the first execution (using the then after the execute). If you want to know everytime the visualization executes after the first time you can use the execute:stop event. Look at the documentation here.

#6

Did this work @aldrid84? I’ve tried what @eduardo mentioned and yes, the event is triggered whenever a filter is applied, it even works when the visualization is executed for the first time so I don’t have to append the .then() after the .execute() anymore.

The problem is that I checked what the event returns and the data is not there! How can I get the updated data if it is not returned from the event itself?

#7

true @william, I was checking and data is not returned in the event body. We’ll plan to include that in future releases. For now as a workaround what you can do is to obtain the data from the internal query:

const chart = cf.provider('the-provider').source('the-source')

chart.groupby(..)
       .metrics(...)
      .element(...)
      .graph(...)
      .on('execute:stop', () => {
       // Here you will have the latest updated data
        const data = chart.get('aql')._data
     })
     .execute()

I need to mention that if the visualization is a Raw Data Table you will have to use the rdt:data-update event.

Change font color to Bars