# ZkCharts drilldown back button

aUser
137 1 4

Hello, I would like to intercept the event that is send by the back button on a chart component with drilldowns. For example in this demo a back button is created once the user selects a pie, then once the back button is pressed the orginal series is displayed. What is the event send by the back button?

I tried putting on zk.xml of my project

<listener>
<listener-class>demo.EventListener</listener-class>
</listener>


as someone said here but when i press the back button of my chart no event is sent.

I would like to know when the back button is pressed because when the chart has to display the first level of series, i'd like to update the chart title.

Thank you

delete retag edit

Sort by » oldest newest most voted

MDuchemin
2213 1 5

Hey there :)

There might be a few reasons why your events are not working. Could be that you have declared the composer in the wrong place, missed the apply="MyComposer" attribute in zul file, or a bunch of other things.

Rather than trying to guess, here's a sample on zkfiddle: https://zkfiddle.org/sample/1s3f71t/1-chart-drill-events

NOTE!!! ZKfiddle doesn't have the chart dependencies, so you'll need to copy that to your local project to run it. But that should give you a general idea of how these pieces fit together.

Have a look and let me know if you find what was missing on your side ;)

From a fast test it really looks like it was the Composer.. I was using the GenericForwardComposer, now I tried SelectorComposer and the events are fired.. I guess I have to understand the difference between these Composers, thank you very much for the input though!!

( 2021-08-19 16:14:03 +0800 )edit

MDuchemin
2213 1 5

Hi there,

Listeners declared in zk.xml are lifecyle listeners. They are global and are not appropriate for component listening.

Instead, you should be using either a composer (MVC) or a ViewModel (MVVM) to create either an event listener or a command binding. See here for the MVC option: https://www.zkoss.org/wiki/ZKChartsEssentials/WorkingwithZKCharts/HandlingChart_Events

Assuming that you are using the default drill down / drill up, the event you are looking for is the ChartsEvents.ON_PLOT_DRILL_UP event. (there is also a ONPLOTDRILL_DOWN version which can be used to listen to the drill down action.

MDuchemin
2213 1 5

Hey there,

GenericForwardComposer will use method names like public void onChange\$mytextbox(Event event) { to register events

SelectorComposer uses annotations (@Wire, @Listen, ...) to match components / listeners with methods and fields.

I'm personally biased toward selectorComposer. ;)

MDuchemin
2213 1 5

On the drill up button customization part:

Options options = chart.getOptions();
if(options == null) {
options = new Options();
}
options.getLang().setDrillUpText("foo bar {series.name}");
chart.setOptions(options);


details here: https://api.highcharts.com/highmaps/lang.drillUpText

{series.name} is an internal variable from highcharts, it contains the series name (if you want to display that) ;)

Thank you very much! I was looking at the options only, didn't think about the lang object.. My bad

( 2021-08-20 18:45:21 +0800 )edit

happy to hear it's going good now ^^

As a general rule, since ZK charts is a wrapper for highcharts, if you don't know how to do something, searching for "highcharts do X Y Z" is a good way to find useful info about which property might be involved.

( 2021-08-23 09:31:57 +0800 )edit

MDuchemin
2213 1 5

Hey there,

Thanks for the extra info. I found the root cause and posted this issue in the tracker: https://tracker.zkoss.org/browse/ZKCHARTS-126

( 2021-08-31 18:47:29 +0800 )edit

aUser
137 1 4

Hello,

I'm using the MVC approach and following your instructions this is what I tried:

@Listen("onPlotDrillDown = charts")
public void drillDownEvent(ChartsEvent event) {
System.out.println("drilldown, " + event);
}

@Listen("onPlotDrillUp = charts")
public void drillUpEvent(ChartsEvent event) {
System.out.println("drillup, " + event);
}


I also tried using a specific ID (in my case however I need the component selector because i have multiple charts with unpredictable IDs) but no event is fired anyway.

Any ideas? :S

aUser
137 1 4

May I also ask if it is possible to change the label of the back button once a drilldown point is clicked? What I tried is:

Series series = chart.getSeries();
series.setName("My custom label");


but this only appends to the Back to string. I would like to change the Back to label in order to have for example My custom label insted of Back to My custom label, is that possible?

aUser
137 1 4

Sorry for bringing this thread up even if marked as resolved..

Suppose for example that I have a chart of type pie with some drilldowns, I do some drilldowns and drillups with no problems.

Now suppose that I want to change the chart's type to be of type column.. I think I found a problem here. From the jar zkcharts-7.2.1.2.jar, the class Charts.java clears the _drilldownLevels list in the invalidate function when the chart's type is changed and when I try to do again the drilldowns and drillups with the new chart's type, I get this error:

java.util.NoSuchElementException: null
at org.zkoss.chart.Charts.service(Charts.java:2585)
....


This validate function is only called (as far as I tried) when I have one or more of these listeners..

@Listen(ChartsEvents.ON_PLOT_DRILL_DOWN + " = #chart")
public void drillDownEvent(ChartsEvent event) {
System.out.println("drilldown event");
}

@Listen(ChartsEvents.ON_PLOT_DRILL_UP + " = #chart")
public void drillUpEvent(ChartsEvent event) {
System.out.println("drillup event");
}


If I remove these, all works fine and the invalidate function is not called, but for what I have to do I need to have these listeners.

If this list is cleared, then I get the above error because the data is "not consistent" if you will. In this case do I have to copy again some data? It seems kinda strange honestly

The only reason i bring up this thread is because is related to the events I was asking for, if needed however I can create another question.

MDuchemin
2213 1 5

Regarding the NPE, could you post a longer code sample of what you are trying to do when changing the charts type?

How I would address this will depend on how you create your chart data. For example, are you using a chart model, or manually setting charts points? Do you replace the series when you change the type, etc.

I was able to track down what you mentioned with the _drilldownLevels list not being initialized, and I think it's a reasonable case to open a bug ticket, so here it is: https://tracker.zkoss.org/browse/ZKCHARTS-125

From what I did until now, i set points manually to series. When I change the chart's type I don't change the series or its potins. When I have to add/remove points from the same Series, I simply clear the series' data and add the new Points, even though I'm not 100% sure this is the best way

( 2021-08-27 17:43:32 +0800 )edit

aUser
137 1 4

Hello,

I created this fiddle. It's literally the Pie with drillDowns from here. If you run the fiddle, do a drillDown and then a drillUp, now press the "change type" button and the chart becomes of type Column. Now do a drillDown with this type and it works fine, but when you do the drillUp it should throw an error.

[hide preview]