Charts give users an insight into data at a glance to gain meaningful insight. We frequently use charts in dashboards to help customers get the "big picture", once they have that, they would likely want to drill down to the detailed information about specific data point. The chart components in Oracle Visual Builder expose selection events that include the id of the selected item. But sometimes you want more than just the id. If you hover over an item you'll see more info (such as the actual data point info and series). In this blog we'll show you how to get to this data.
By default the selection event associated with charts get the id of each selected row as an input to the action chain associate to the event. In the video demo below you can see how to transfer the rest of the data into the action chain.
To do that, we are modifying the action chain definition and adding an additional input parameter called detail – we'll use a generic object type for this parameter.
Then in the event definition where we call the action chain we are going to add a mapping of the $event.detail to this new parameter. The result is that when we run the page this parameter has the full set of data passed from the chart event. Inspecting it in the browser's dev tools console we can see the inner structure of the data.
This can then be used in the action chain in order to refer to various values. In the video we are getting the series info, but you can also get the other attributes of the selected item (such as the name, salary, and department).
For example to get to the name of the selected item's series we can use this expression in the action chain – [[ $variables.detail.selectionData[0].seriesData.name ]]