Handling Chart Events"
Raymondchao (talk | contribs) |
|||
(18 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{{ZKChartsEssentialsPageHeader}} | {{ZKChartsEssentialsPageHeader}} | ||
− | 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. | + | ZK Charts fire events when a user is interacting with the chart, we can, therefore, declare a method to listen to the event and handle the event data. |
− | + | =ChartsEvent= | |
− | <javadoc directory="zkcharts">org.zkoss.chart.ChartsEvent</javadoc> represents an event | + | <javadoc directory="zkcharts">org.zkoss.chart.ChartsEvent</javadoc> represents an event triggered by user's interaction. Please check out <tt>event.zul</tt> in the example project to see events firing. |
− | ==== shift.zul | + | ==Shifting Points Example == |
+ | If we want to shift the point's position when user clicks the bubble, we can listen the <tt>onPlotClick</tt> event and retrieve the point being clicked. Then update the point's position like below: | ||
+ | === shift.zul === | ||
<source lang="xml" high="2"> | <source lang="xml" high="2"> | ||
<window apply="ShiftComposer"> | <window apply="ShiftComposer"> | ||
− | <charts id="chart" type="bubble | + | <charts id="chart" type="bubble" /> |
</window> | </window> | ||
</source> | </source> | ||
− | + | === ShiftComposer.java === | |
<source lang="java" high="13, 14,15,16,17, 18, 19"> | <source lang="java" high="13, 14,15,16,17, 18, 19"> | ||
public class ShiftComposer extends SelectorComposer<Window> { | public class ShiftComposer extends SelectorComposer<Window> { | ||
@Wire | @Wire | ||
Charts chart; | Charts chart; | ||
− | + | ||
public void doAfterCompose(Window comp) throws Exception { | public void doAfterCompose(Window comp) throws Exception { | ||
− | + | super.doAfterCompose(comp); | |
− | // | + | // initial series data |
− | + | initPoints(); | |
− | // | + | // hide some unnecessary options |
hideOptions(); | hideOptions(); | ||
} | } | ||
− | + | ||
@Listen("onPlotClick = #chart") | @Listen("onPlotClick = #chart") | ||
public void shiftPoint(ChartsEvent event) { | public void shiftPoint(ChartsEvent event) { | ||
− | // | + | // retrieve the point object. |
Point point = event.getPoint(); | Point point = event.getPoint(); | ||
− | // | + | // shift the point by updating its x value. |
− | point. | + | point.setX(point.getX().intValue() + random() / 10); |
} | } | ||
− | + | ||
private void initPoints() { | private void initPoints() { | ||
for (int i = 0; i < 10; i ++) { | for (int i = 0; i < 10; i ++) { | ||
− | + | chart.getSeries(i).addPoint(random(), random(), i * 5); | |
} | } | ||
} | } | ||
− | + | ||
private void hideOptions() { | private void hideOptions() { | ||
− | // | + | // remove chart title |
+ | chart.setTitle(""); | ||
+ | // remove y axis title | ||
chart.getYAxis().setTitle(""); | chart.getYAxis().setTitle(""); | ||
− | // | + | // hide the legend. |
chart.getLegend().setEnabled(false); | chart.getLegend().setEnabled(false); | ||
− | // | + | // hide the tooltip. |
chart.getTooltip().setEnabled(false); | chart.getTooltip().setEnabled(false); | ||
− | // | + | // hide the exporting button. |
chart.getExporting().setEnabled(false); | chart.getExporting().setEnabled(false); | ||
− | |||
} | } | ||
− | + | ||
private double random() { | private double random() { | ||
− | // | + | // returns random integer ranged from 10 to 100. |
− | + | return Math.round(((Math.random()) * 90 + 10)); | |
} | } | ||
} | } | ||
Line 64: | Line 67: | ||
[[File:PlotClickEventBefore.png]] | [[File:PlotClickEventBefore.png]] | ||
− | When user clicks the maroon bubble, the bubble will shift to the right a bit. | + | When a user clicks the maroon bubble, the bubble will shift to the right a bit. |
[[File:PlotClickEventAfter.png]] | [[File:PlotClickEventAfter.png]] | ||
− | + | = Table of ChartsEvent and Description = | |
{| border="1" | {| border="1" | ||
|- | |- | ||
Line 74: | Line 77: | ||
|- | |- | ||
||onPlotClick | ||onPlotClick | ||
− | ||Fires when the series is clicked. | + | ||Fires when the series is clicked, and it will pass the nearest point as a parameter. |
|- | |- | ||
||onPlotCheckboxClick | ||onPlotCheckboxClick | ||
Line 84: | Line 87: | ||
||onPlotShow | ||onPlotShow | ||
||Fires when the series is shown after chart generation time, by clicking the legend item. | ||Fires when the series is shown after chart generation time, by clicking the legend item. | ||
+ | (Not applicable to pies). | ||
|- | |- | ||
||onPlotHide | ||onPlotHide | ||
− | ||Fires when the series is hidden after chart generation time, by clicking the legend item. | + | ||Fires when the series is hidden after chart generation time, by clicking the legend item. <br/> |
+ | (Not applicable to pies). | ||
|- | |- | ||
||onPlotMouseOver | ||onPlotMouseOver | ||
Line 93: | Line 98: | ||
||onPlotMouseOut | ||onPlotMouseOut | ||
||Fires when the mouse leaves the graph. | ||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 <tt>Charts.getPlotOptions().getSeries().setAllowPointSelect(true);</tt> Reference: http://api.highcharts.com/highcharts#plotOptions.series.point.events | ||
+ | |- | ||
+ | |- | ||
+ | ||onPlotUnselect | ||
+ | ||Fires when unselecting a point from a series. | ||
|- | |- | ||
||onPlotDrillUp | ||onPlotDrillUp | ||
Line 99: | Line 113: | ||
||onPlotDrillDown | ||onPlotDrillDown | ||
||Fires when a drilldown point is clicked, before the new series is added. | ||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 <tt>ChartsSelectionEvent</tt> into an event listener. | ||
+ | |- | ||
+ | ||onClick | ||
+ | ||Fires when you click within a chart, ZK will pass <tt>ChartsClickEvent</tt>. | ||
|} | |} | ||
− | '''Note:''' see <javadoc directory="zkcharts">org.zkoss.chart.ChartsEvents</javadoc> for more details. | + | '''Note:''' |
+ | * see <javadoc directory="zkcharts">org.zkoss.chart.ChartsEvents</javadoc> for more details. | ||
+ | * <tt>ChartsEvents.ON_PLOT_HIDE</tt> and <tt>ChartsEvents.ON_PLOT_SHOW</tt> are not applicable on a pie chart because a legend represents a point instead of a series. | ||
+ | |||
− | ==ClickEvent== | + | ==ClickEvent Usage== |
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: | 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: | ||
− | <source lang="java" high="16, | + | <source lang="java" high="11, 14, 15, 16, 17, 18"> |
... | ... | ||
− | + | ||
− | + | 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") | @Listen("onClick = #chart") | ||
public void movePoint(ChartsClickEvent event) { | public void movePoint(ChartsClickEvent event) { | ||
− | + | for (Point point: chart.getSelectedPoints()) { | |
− | + | point.update(event.getXAxis(), event.getYAxis(), point.getHigh()); | |
− | + | point.setSelected(false); | |
− | + | } | |
− | |||
− | |||
} | } | ||
− | + | ||
+ | ... | ||
</source> | </source> | ||
− | '''Note:''' You can use < | + | '''Note:''' |
+ | * You can use <javadoc directory="zkcharts">org.zkoss.chart.ChartsClickEvent</javadoc> which extends <javadoc directory="zk">org.zkoss.zk.ui.event.MouseEvent</javadoc> to get the x and y axis values of where the mouse was clicked. | ||
+ | |||
{{ZKChartsEssentialsPageFooter}} | {{ZKChartsEssentialsPageFooter}} |
Revision as of 07:46, 10 June 2019
ZK Charts fire events when a 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 triggered by user's interaction. Please check out event.zul in the example project to see events firing.
Shifting Points Example
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:
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 a 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.
(Not applicable to pies). |
onPlotHide | Fires when the series is hidden after chart generation time, by clicking the legend item. (Not applicable to pies). |
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.
- ChartsEvents.ON_PLOT_HIDE and ChartsEvents.ON_PLOT_SHOW are not applicable on a pie chart because a legend represents a point instead of a series.
ClickEvent Usage
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 >