Custom component with data

#1

Hi all. I’m building a list of divs where each one has information about one user. Something like this:

42%20AM
Screen Shot 2021-02-11 at 7.50.42 AM.png715×271 109 KB

The easier way to obtain this information in ChartFactor is with the Raw Data Table, but I don’t want a table but the component above. My question is how can I get the data from the Raw Data Table to be used in a custom component? And if possible, would this component be affected when filtering ?

#2

If you only need the result of a query and not the visualization, then you just need to exclude pretty much the .graph() function and any option related with the visualization itself and subscribe to the execute:stop event which will be called everytime the query gets data (first time data or when a filter is applied). For a raw data query it would be something like this:

cf.provider('Your provider')
.source('your source')
.fields('user_name', 'user_profession', 'user_skills')
.element('any-id')
.on('execute:stop', function(event) {
    if (!event.error) {
       console.log('My data is', event.data)
   } 
})
.execute()
#3

Thanks @eduardo, this is what I was looking for. One more question though: any-id I know is usually the html element where the visualization is going to be hosted, but in this case there is no need for it right? Just asking to avoid future surprises that may be related to this.

#4

The element property has two purposes: It serves as the connection between the visualization and the html element and the most important is that is used as the id of a visualization. It is used for example to obtain the aktive (which is the visualization or query) instance:

const aktive = cf.getVisualization('any-id')

So you should not have two visualizations/queries with the same element id, otherwise one will overwrite the other. So to sum up: Yes, you ALWAYS need to use the .element('char-or-div-id') property.