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 |
| 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', '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', '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.
