Chart Events"

From Documentation
Line 2: Line 2:
  
 
{{Template:UnderConstruction}}
 
{{Template:UnderConstruction}}
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. There are three kind of events in ZK Charts: ChartsEvent, Charts
+
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.  
  
=== Chart Event ===
+
== 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 <tt>onPlotClick</tt> event and retrieve the point being clicked. Then update the point's position like below:
  
=== Series Event===
+
==== shift.zul ====
 +
<source lang="xml" high="2">
 +
<window apply="ShiftComposer">
 +
    <charts id="chart" type="bubble" />
 +
</window>
 +
</source>
 +
 
 +
==== ShiftComposer.zul ====
 +
<source lang="java" high="11,12,13,14,15,16,17">
 +
public class ShiftComposer extends SelectorComposer<Window> {
 +
    @Wire
 +
    Charts chart;
 +
 
 +
    public void doAfterCompose(Window comp) throws Exception {
 +
    super.doAfterCompose(comp);
 +
 
 +
    initPoints();
 +
    }
 +
   
 +
    @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());
 +
    }
 +
   
 +
    // Initialize series data
 +
    private void initPoints() {
 +
        for (int i = 0; i < 10; i ++) {
 +
        chart.getSeries(i).addPoint(random(), random(), i * 5);
 +
        }
 +
    }
 +
   
 +
    // Returns random integer ranged from 0 to 100.
 +
    private double random() {
 +
    return Math.round((Math.random() * 100));
 +
    }
 +
}
 +
</source>
  
 
{| border="1"
 
{| border="1"

Revision as of 11:10, 5 March 2014

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" />
</window>

ShiftComposer.zul

public class ShiftComposer extends SelectorComposer<Window> {
    @Wire
    Charts chart;

    public void doAfterCompose(Window comp) throws Exception {
    	super.doAfterCompose(comp);

    	initPoints();
    }
    
    @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());
    }
    
    // Initialize series data
    private void initPoints() {
        for (int i = 0; i < 10; i ++) {
    	    chart.getSeries(i).addPoint(random(), random(), i * 5);
        }
    }
    
    // Returns random integer ranged from 0 to 100.
    private double random() {
    	return Math.round((Math.random() * 100));
    }
}
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.

< Get Complete Source Code of This Book >


Last Update : 2014/03/05

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