Use a Visualization as a Selector or to Target an Info Window

You can use a custom visualization extended from CustomVisBase as a selector to filter or highlight another visualization or target an information window. This Selector API currently works in a dashboard or in a document that has been converted from a dashboard with the filter enabled.

The following sections describe how to get object data for a selection and how to submit a selection request.

Get the Selection Object (Selection Data Information) for the Attribute or Metric That Will Act as a Selector

To submit a request for an attribute or metric selection, you need to get the necessary information first. The information is encapsulated in an object called attributeSelector or metricSelector. You can get this object by sending an additional parameter, called hasSelection, when requesting data using DataInterface.getRawData(format, params).

Use the following code for data in a tree format:

Copy

var rawadata = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.TREE, {hasSelection: true});

Use the following code for data in row format:

Copy

var rawData = this.dataInterface.getRawData(mstrmojo.models.template.DataInterface. ENUM_RAW_DATA_FORMAT.ROWS_ADV, {hasSelection: true});

The hasSelection parameter is not applicable for a simple row format when you use mstrmojo.models.template.DataInterface.ENUM_RAW_DATA_FORMAT.ROWS.

The returned JSON data looks similar to the following:

Copy

{"headers":[
{"name":"Northeast","tname":"Customer Region","attributeSelector":{"n":"Northeast", 
"tid":"8D679D3B11D3E4981000E787EC6DE8A4","eid":"h1;
8D679D3B11D3E4981000E787EC6DE8A4","isSelectAttr":true}},
{"name":"2007 Q1","tname":"Quarter","attributeSelector":{"n":"2007 Q1",
"tid":"8D679D4A11D3E4981000E787EC6DE8A4","eid":"h20071;
8D679D4A11D3E4981000E787EC6DE8A4","isSelectAttr":true}}],
"values":[{"v":"$244,603","rv":244602.52300000002,"name":"Cost"}],
"metricSelector":{"8D679D3B11D3E4981000E787EC6DE8A4":[{"n":"Northeast",
"id":"h1;8D679D3B11D3E4981000E787EC6DE8A4"}],
"8D679D4A11D3E4981000E787EC6DE8A4":[{"n":"2007 Q1","id":"h20071;8D679D4A11D3E4981000E787EC6DE8A4"}]}}

Submit a Selection Request

(Optional) Attach the selection object to a D3 unit. Sometimes you may want to store each selection object on a D3 unit. For example, in the D3 Bubble Chart sample, you can retrieve the selection object and store it in the node.
Copy
```
classes.push({packageName: name, className: node.name, value: Math.max(node.value, 0), formattedValue: node.formattedValue, selection: node.attributeSelector});
```

Pass the selection object and submit a selection request. Call applySelection(selectInfo) to pass the selection object and submit a request:

Copy

CustomVisBase.prototype.applySelection(selectInfo)

selectInfo accepts either an array or one selection object. Using the D3 Bubble Chart sample as an example, if you want to filter/highlight another visualization when clicking on a bubble, you should use code similar to that shown below.

Copy

var me = this;
newNode.append("circle")
  .style("fill", function (d) {
    return resolveColor(d.packageName);
  })
  .on("click", function (d) {
    // use the selector API when clicking on a bar
    if(window.webkit &amp;&amp; window.webkit.messageHandlers &amp;&amp; window.webkit.messageHandlers.selectionDataJSONString) { //for mobile
      d.selection.messageType = "selection"; //for mobile
      window.webkit.messageHandlers.selectionDataJSONString.postMessage(d.selection); //for mobile
    }
    else {
      me.applySelection(d.selection); //for web
    }
});

You can maintain your own selection collection and trigger the applySelection() function when you want. You can also use the clearSelections() and getSelections() APIs to clear and get current selections on the visualization. If you would like to clear the selections for the target grid or visualization, you will need to call clearSelections() and endSelections().

The sample code below illustrates how to clear selections on the visualization and targets. To add clear selections functionality to a visualization, you need to add a listener to some action. In this code, the click listener is added to the main svg node in the visualization. The code then checks to ensure that the element the user is clicking on is the main node with class “bubble”. If it is, all selections are cleared.

Copy

svg = d3.select(this.domNode).append("svg");
  .attr("class", "bubble")
  .on("click", function(d) {
    if(event.target.classList.contains('bubble'){
      if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.selectionDataJSONString) { //for mobile
        d.selection.messageType = "deselection"; //for mobile
        window.webkit.messageHandlers.selectionDataJSONString.postMessage(d.selection); //for mobile
      } else {
      me.clearSelections(); //for web
      me.endSelections(); //for web
      }
      return true;
    } else {
      return true;
    }

Enable the Use as filter menu option

By default, the Use as filter option is not shown in the context menu. To display it, you must call addFilterMenuItem() anywhere in plot().
Copy
```
this.addUseAsFilterMenuItem();
```