This example demonstrates multi-selection of data points on a Funnel chart, using custom JavaScript.
JavaScript Code - Use the chart-level attribute to define custom JavaScript, to set the attribute selectionMode for the chart. By default, a user can declaratively define links based upon the selection of a data point. If you wish to apply alternative selection handling on your chart, such as using multi-selection, this must be defined via JavaScript. You can also define an 'optionChange' listener on the chart, based upon the click action. In that 'optionChange' listener, define the action you want to occur when a data point selection is detected. In this example, a page item with the label 'Series' will be updated to display the data point name(s). The code snippet used is as follows:
function( options ) {
// Set Selection Mode to Multiple chart elements
options.selectionMode = "multiple";
// Initialize the component with the optionChange callback specified
options.optionChange = function( event, ui ) {
if ( ui[ "option" ] === "selection" ) {
var items = " ";
if( ui['value'] ){
for( var i = 0; i < ui['value'].length; i++ ){
if(ui['value'][i]) {
items += " " + ui['value'][i]['series'] + "
";
}
}
$s( "P22_SERIES_2", items );
}
}
};
return options;
}
For more information on the Funnel chart, refer to the Oracle JET Cookbook Funnel Chart: Selection example.