Establishing Cross Interaction

In this section, we will get an idea of how we can control the cross interaction between different canvases, since by default it is disabled.

To do so, we will use the cars.json data and the following canvases as an example:

main
run-button
run-button
reset-button
          canvas1
          	.width(400)
          	.height(300)
			.rows(['Miles_per_Gallon'])
			.columns(['Origin'])
    		.color('Origin')
			.data(dataModelInstance)
    		.mount("#chart1")
    canvas2
          	.width(400)
          	.height(300)
			.rows(['Miles_per_Gallon'])
			.columns(['Cylinders'])
    		.color('Origin')
			.data(dataModelInstance)
    		.mount("#chart2")
  

Enabling Cross Interactivity

By default cross interactivity is disabled between canvases. To enable cross interactivity between two canvases, canvas1 and canvas2:

 ActionModel.for(canvas1, canvas2)
     .enableCrossInteractivity();

This enables cross interaction between the canvases so that any interaction that occurs in one canvas gets dispatched to other canvases as well.

main
run-button
run-button
reset-button
      ActionModel.for(canvas1, canvas2)
     .enableCrossInteractivity();

Enabling Cross Interactivity with policies

An optional policy can also be passed while enabling cross interactivity. This policy can be used to control the canvases on which the behavioural actions and side effects get dispatched.

To enable cross interactivity but only when any behavioural action is triggered from canvas1, we can use the following policy within the enableCrossInteractivity method:

 ActionModel.for(canvas1, canvas2)
     .enableCrossInteractivity({
         behaviours: {
             '*': (propPayload, context) => {
                 return propPayload.sourceCanvas === canvas1.alias();
             }
         }
     });

Here * stands for any behavioural action name. This means that all behaviours in canvas1 will trigger interactions in canvas2. We can choose to give any of the existing behaviours in place of *.

The line propPayload.sourceCanvas === canvas1.alias() ensures that the source for the interactions during cross interactivity will only be canvas1

main
run-button
run-button
reset-button
        ActionModel.for(canvas1, canvas2)
          .enableCrossInteractivity({
          behaviours: {
            '*': (propPayload, context) => propPayload.sourceCanvas === canvas1.alias()
          }
        });

Similarly, we can also enable cross interactivity with specific side effects. For instance, in the following code, we will enable only the tooltip sideeffect whenever there is an interaction in canvas1:

 ActionModel.for(canvas1, canvas2)
     .enableCrossInteractivity({
         sideEffects: {
             tooltip: (propPayload, context) => {
                 return propPayload.sourceCanvas === canvas1.alias();
             }
         }
     });
main
run-button
run-button
reset-button
        ActionModel.for(canvas1, canvas2)
     .enableCrossInteractivity({
         sideEffects: {
             tooltip: (propPayload, context) => {
                 return propPayload.sourceCanvas === canvas1.alias();
             }
         }
     });

Registering Propagation Behaviour

While enabling cross interactivity, we can choose what kind of behaviour will be exhibited when a particular behaviour changes in a canvas. By default, when any behavioural action is dispatched, then the same behavioural action gets propagated to all the other canvases.

In the following code, we maintain that whenever the select or brush behaviour changes in canvas1 or canvas2, rest of the canvas will exhibit the filter behaviour(if cross interactivity is enabled):

 ActionModel.for(canvas1, canvas2).registerPropagationBehaviourMap({
     select: 'filter',
     brush: 'filter'
 });
main
run-button
run-button
reset-button
        ActionModel.for(canvas1, canvas2)
       	  .enableCrossInteractivity()
          .registerPropagationBehaviourMap({
             select: 'filter',
             brush: 'filter'
         });

Now, when we click or drag on any bars in the charts, the second chart gets filtered instead of getting highlighted.

Wrapping Up

We have learnt how to establish cross interactivity between the canvases. To summarize:

  • We can enable cross interactivity by using the enableCrossInteractivity method
  • This method optionally allows a set of policies based on which these interactions can be modified
  • We can also configure what kind of behaviours trigger what kind of interactions in other canvases by the registerPropagationBehaviourMap