Highcharts Feature: Responding to Clicks on Points and Series via AJAX

Supported by:

• wicked-charts-wicket6

---

In some use cases it may be required for the server to react on a user selecting a point or series. This can be achieved by adding an InteractionFunction to your chart options. The InteractionFunction triggers and AJAX request to the server. The server can read the provided InteractionEvent object to determine which point or series has been interacted with and react accordingly.

Interacting with a Series

The following code adds a click interaction to all series of a line chart. If the user clicks on a series, the server simply prints out the name of the clicked series.

options.setPlotOptions(new PlotOptionsChoice()
  .setLine(new PlotOptions()
    .setEvents(new Events()
      .setClick(new InteractionFunction(options) {
        @Override
        public void onInteraction(InteractionEvent event) {
          System.out
            .println(event.getSelectedSeries().getName());
        }}))));

Interacting with a Point

The following code adds a click interaction to a Point in a chart. If the user clicks on the Point, the server simply prints out the y value of the clicked Point and the name of the Series the Point is part of.

Series<Point> series = new PointSeries().setName("My Series");
series.addPoint(new Point(107).setEvents(new Events()
        .setClick(new InteractionFunction(options) {

          @Override
          public void onInteraction(InteractionEvent event) {
            System.out
                .println("Y-Value: " + event
                    .getSelectedPoint()
                    .getY());
            System.out
                .println("Series: " + event
                    .getSelectedSeries()
                    .getName());
          }

        });))
options.add(series);

AJAX with Wicket 6.x

Using Wicket 6, you can also access the Wicket AjaxRequestTarget on the server side to implement partial page updates. You simply have to cast the InteractionEvent to WicketInteractionEvent as follows:

events.setClick(new InteractionFunction(options){
  @Override
  public void onInteraction(InteractionEvent event) {
    WicketInteractionEvent wicketEvent = (WicketInteractionEvent) event;
    AjaxRequestTarget target = wicketEvent.getAjaxRequestTarget();
           
    // re-render some component
    target.add(...);
  }
}