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!

[MansoorM]

function executeLink(api,event){

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

    //console.log('Product Selectd  ' , product_selected);

    var product = api.event.payload.data.elements[0];

    console.log('Product: ', product);

    //api.setState('selected_product', product);

    const payload = {

        route: "milestone-dashboard", // here goes you page name where you want to redirect

        fields: {

                product: product

}, // here are mandatory parameters

        params: null,

        redirect: null,

        passiveNavigation: null,

        title: null,

        multiInstField: null,

        targetRoute: null,

        external: null,

        navigationOptions: null

}

//Trigger redirect event

api.emit('NAV_ITEM_SELECTED', payload);

}

[MansoorM]

Yes, sorry the logs are not coming typo mistake