Skip to main content

Event Handling

You can handle specific events while viewing charts, for example, handle mouse events or any other event with the echartsInstance instance.

For more examples and detailed description, please check Apache ECharts documentation about Events and Actions.

Mouse click​

To prevent the event handling multiple times, all previous event handlers may be disabled.

/**
 * On Mouse Click
 */
echartsInstance.off("click");
echartsInstance.on("click", (params) => {
  notifySuccess(["Event", "On Click"]);
  echartsInstance.resize(); // to redraw visualization
});
/**
 * On Double Click
 */
echartsInstance.off("dblclick");
echartsInstance.on("dblclick", (params) => {
  echartsInstance.resize();
});

Update of time range​

The Data Zoom feature allows you to select a time period on the chart for zooming in. Once the time range is selected, the event can trigger the update of the dashboard's time range using the locationService parameter similar to the native functionality in Grafana.

Data Zoom feature for Random Walk.
Data Zoom feature for Random Walk.

Example​

docs/volkovlabs-echarts-panel/js/data-zoom.js
loading...