Handling Chart Events

From Documentation
Revision as of 16:11, 5 March 2014 by Raymondchao (talk | contribs) (Created page with "{{ZKChartsEssentialsPageHeader}} {{Template:UnderConstruction}} ZK Chart will fire events when user is interacting with chart, so we can declare a method to listen the event and...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Handling Chart Events


WarningTriangle-32x32.png This page is under construction, so we cannot guarantee the accuracy of the content!

ZK Chart will fire events when user is interacting with chart, so we can declare a method to listen 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 clicking, we can listen the onPlotClick event and retrieve the point being clicked. Then update the point's position like below:

shift.zul

<window apply="ShiftComposer">
    <charts id="chart" type="bubble" title="" />
</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.update(point.getX().intValue() + random() / 10, point.getY());
    }
    
    private void initPoints() {
        for (int i = 0; i < 10; i ++) {
    	    chart.getSeries(i).addPoint(random(), random(), i * 5);
        }
    }

    private void hideOptions() {
        // 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);
        // Initialize series data
    }
    
    private double random() {
        // Returns random integer ranged from 0 to 100.
    	return Math.round((Math.random() * 100));
    }
}

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

File:PlotClickEventBefore.png

When use click the maroon, it will shift to the right a bit.

File:PlotClickEventAfter.png

Table of ChartsEvent and Description

EventName Description
onPlotClick Fires when the series is clicked.
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.
onPlotDrillUp Fires when drilling up from a drilldown series.
onPlotDrillDown Fires when a drilldown point is clicked, before the new series is added.

ClickEvent

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

    ...
    private Point selectedPoint; // Record selected point.
    ...
    @Listen("onPlotClick = #chart")
    public void selectPoint(ChartsEvent event) {
        // Retrieve the clicked point.
        Point point = event.getPoint();
        // Select the point if it haven't selected.
    	if (selectedPoint != point) {
    		selectedPoint = point;
    		selectedPoint.select();
    	}
    }
    
    @Listen("onClick = #chart")
    public void movePoint(ChartsClickEvent event) {
        // Do nothing if there is no selected point
        if (selectedPoint == null)
            return;
        // Move the selected point to the location where user clicked.
        selectedPoint.update(event.getXAxis(), event.getYAxis(), selectedPoint.getHigh());
        selectedPoint = null;
    }
    ....

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

< Get Complete Source Code of This Book >


Last Update : 2014/03/05

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.