How to Redirect to Another Page with Selected Data from Vertical Bar Chart in ServiceNow UI Builder?

[MansoorM]

Hello Community,

I am working on a drill-down page in ServiceNow UI Builder that includes a vertical bar chart. The chart has the following configuration:

• X-axis: Product name
• Y-axis: Account name

I need to implement a feature where clicking on a bar (representing a product) redirects the user to another page (e.g., "View page"). The "View page" requires one mandatory parameter and three optional parameters.

My requirements are:

1. When a user clicks on a product in the bar chart, the selected product name should be passed to the URL.
2. The user should be redirected to the "View page" with the selected product name as a parameter.

Could you please guide me on how to:

• Pass the selected product name to the URL.
• Redirect to another page with the selected data.

Any examples or detailed steps would be greatly appreciated.

Thank you!

[IronPotato]

all your data related to your chart is in:

event.payload.data

or

event.payload.params

from where ever you need the data.

[MansoorM]

function executeLink(event){

    console.log('visualization clicked ' , event);

    console.log('visualization clicked data' , event.payload.data);

    console.log('visualization clicked params', event.payload.params);

}

i tried to log all three but only one log is coming as shown in above image remaining two logs 2nd and 3rd log are coming

[IronPotato]

do you know how to access data in objects?

[MansoorM]

yes

[IronPotato]

since event is coming OK you should be able to get data that you need from there, you just need to provide correct path to your data. Just expand all nested arrays and objects