Interacting with the Zoomdata Radial Menu

The Zoomdata radial menu is a native control that can be added to custom charts to provide users with a set of standard chart interactions. Your chart must be running an aggregated data query to leverage the radial menu.

The following is a list of default actions provided the radial menu:

Action Description
Zoom Open a panel to select a new attribute to drill into. The selection automatically changes the group-by field in the query and adds a filter condition matching the clicked data point
Filter Open a panel to select other charts in the dashboard to filter with a condition matching the clicked data point
Filter All Automatically filters all other charts in the dashboard from the same source with a condition matching the clicked data point
Details Opens a panel with a Raw Data table chart displaying the full set of records matching the clicked data point
Trend Switches the current chart to the out of the box Line Chart: Multiple Metrics chart and adds the clicked data point as a filter
Remove Removes the clicked data point by adding a filter to the query to exclude it

To show the radial menu in a chart, use controller.menu.show. The show methods takes an object as its only argument with the following properties:

Option Description
x The x coordinate on the screen where the menu should render
y The y coordinate on the screen where the menu should render
data Function that returns a Zoomdata data element

Optional properties:

Option Description
event Takes a native browser event to specify the menu position. An alternative to x and y properties.
menu Used to customize the list of actions that display in the menu. Custom actions along with their callbacks can be defined. Here’s an example menu: { items: ['Exclude', 'Zoom', 'Filter', 'Filter All', 'Info', 'Trend', 'Custom'], 'Custom': function() { // some custom action } }

Example:

myChart.on('click', function(param) {
  controller.menu.show({
    x: param.x,
    y: param.y,
    data: function() {
      return param.zdDataElement;
    },
  });
});

In the above example, we have a reference to chart instance stored in the myChart variable. We hook into the click event of the chart and provide a handler function. The handler function receives an object argument param with the x and y screen coordinate where the radial menu should display. Additionally, we can also access the Zoomdata data element for the clicked point. You can assign these properties to an object passed when calling the controller.menu.show method.

To hide the radial menu, click anywhere on the chart or explicitly call controller.menu.hide with no arguments.

Adding Custom Options to the Radial Menu

It is possible to customize the radial menu with custom actions that call arbitrary handler functions provided to the show method.

Example:

myChart.on('click', function(param) {
  controller.menu.show({
    x: param.x, 
    y: param.y, 
    data: function() {
      return param.zdDataElement; 
    },
    menu: {
      items: ['Zoom', 'Filter All', 'Info', 'Custom'],
      Custom: function() {
        // Add custom logic
      },
    },
  });
});

In the above example, we have limited the radial menu to only show 3 of the default actions: “Zoom”, “Filter All”, and “Info”. We have also added our own “Custom” action and provided a handler function that executes when users click on the “Custom” action.