Handling Chart Events

ZK Charts fire events when user is interacting with the chart, we can therefore declare a method to listen to the event and handle the event data.

ChartsEvent

ChartsEvent represents an event cause by user's interaction. If we want to shift the point's position when user clicks the bubble, we can listen the onPlotClick event and retrieve the point being clicked. Then update the point's position like below:

Shifting Points Example

shift.zul

<window apply="ShiftComposer">
    <charts id="chart" type="bubble" />
</window>

ShiftComposer.java

public class ShiftComposer extends SelectorComposer<Window> {
    @Wire
    Charts chart;
    
    public void doAfterCompose(Window comp) throws Exception {
        super.doAfterCompose(comp);
        // initial series data
        initPoints();
        // hide some unnecessary options
        hideOptions();
    }
     
    @Listen("onPlotClick = #chart")
    public void shiftPoint(ChartsEvent event) {
        // retrieve the point object.
        Point point = event.getPoint();
        // shift the point by updating its x value.
        point.setX(point.getX().intValue() + random() / 10);
    }

    private void initPoints() {
        for (int i = 0; i < 10; i ++) {
            chart.getSeries(i).addPoint(random(), random(), i * 5);
        }
    }
 
    private void hideOptions() {
    	// remove chart title
    	chart.setTitle("");
        // remove y axis title
        chart.getYAxis().setTitle("");
        // hide the legend.
        chart.getLegend().setEnabled(false);
        // hide the tooltip.
        chart.getTooltip().setEnabled(false);
        // hide the exporting button.
        chart.getExporting().setEnabled(false);
    }
     
    private double random() {
        // returns random integer ranged from 10 to 100.
        return Math.round(((Math.random()) * 90 + 10));
    }
}

Congratulations! Now the user can interact with the chart. Here is what it shows:

When user clicks the maroon bubble, the bubble will shift to the right a bit.

Table of ChartsEvent and Description

EventName	Description
onPlotClick	Fires when the series is clicked, and it will pass the nearest point as a parameter.
onPlotCheckboxClick	Fires when the checkbox next to the series' name in the legend is clicked.
onPlotLegendItemClick	Fires when the legend item belonging to the series is clicked. (Not applicable to pies).
onPlotShow	Fires when the series is shown after chart generation time, by clicking the legend item.
onPlotHide	Fires when the series is hidden after chart generation time, by clicking the legend item.
onPlotMouseOver	Fires when the mouse enters the graph.
onPlotMouseOut	Fires when the mouse leaves the graph.
onPlotSelect	Fires when selecting a point from a series. The zkcharts doesn't send this event before you enable "point select" by Charts.getPlotOptions().getSeries().setAllowPointSelect(true); Reference: http://api.highcharts.com/highcharts#plotOptions.series.point.events
onPlotUnSelect	Fires when unselecting a point from a series.
onPlotDrillUp	Fires when drilling up from a drilldown series.
onPlotDrillDown	Fires when a drilldown point is clicked, before the new series is added.
onSelection	When you allow zooming by Charts.setZoomType(), it's fired when you drag your pointer within the chart. ZK will pass a ChartsSelectionEvent into an event listener.
onClick	Fires when you click within a chart, ZK will pass ChartsClickEvent.

Note: see ChartsEvents for more details.

ClickEvent

What if we want to select the bubble and move it to the location where the mouse was clicked? It can be done by modifying the previous sample code as below:

    ...

    public void doAfterCompose(Window comp) throws Exception {
        super.doAfterCompose(comp);
        
        // initial series data
        initPoints();
        // hide some unnecessary options
        hideOptions();
        // allow point select
        chart.getPlotOptions().getBubble().setAllowPointSelect(true);
    }
     
    @Listen("onClick = #chart")
    public void movePoint(ChartsClickEvent event) {
    	for (Point point: chart.getSelectedPoints()) {
    		point.update(event.getXAxis(), event.getYAxis(), point.getHigh());
    		point.setSelected(false);
    	}
    }

    ...

Note: You can use ChartsClickEvent which extends MouseEvent to get the x and y axis values of where the mouse was clicked.

< Get Complete Source Code of This Book >