Drill Down

Here we talk about 2 ways to achieve a drill-down function. One is simply using ZK Charts built-in feature, and another is implemented manually.

Built-in Drilldown

The simplest way to implement drilldown is to use the built-in feature. ZK Charts demo has a good example please refer to http://www.zkoss.org/zkchartsdemo/column_drilldown

But under this way, it only can display one series after you drill down a series. If you need to display multiple series, you need to adopt the approach mentioned below.

Drill Down Manually

The main benefit to implement drill-down by yourselves is flexibility, and this way can show multiple series after drilling down a series. But you have to take care all things during drill-down like UI update and data loading.

Remember Drill-down Level

You might have multiple levels of data to drill down, and the controller needs to know which level the chart's data is to decide loading corresponding data. We can store the drill-down level as an attribute of Charts component.

package org.zkoss.zkcharts.essentials;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvent;
import org.zkoss.chart.model.DefaultCategoryModel;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Button;

/**
 * An example to demonstrate drill-down manually by listening "onPlotClick"<br/>
 * Listening "onPlotDrillDown" is a possible solution, but it will throw an exception when there are multiple series.
 * @author hawk
 *
 */
public class DisplayMultipleSeriesComposer extends SelectorComposer<Component> {

    @Wire
    private Charts chart;
    @Wire("#back")
    private Button backButton;
    
    private DefaultCategoryModel model = new DefaultCategoryModel();
    private String DRILLDOWN_LEVEL = "LEVEL"; 
    
    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        chart.getYAxis().setTitle("Values");
        initModel();
        chart.setAttribute(DRILLDOWN_LEVEL, new Integer(0)); 
        updateDrilldownStatus();
    }
...
}

• Line 33: We store drill-down level as an attribute of the Charts. You can store any information to indicate the drill-down status.

Load Drill-down Data

Now we can implement the drill-down behavior by listening onPlotClick event and replace model's data upon which market of a series you click.

An event listener in DisplayMultipleSeriesComposer.java

    /**
     * Switch the chart's model with corresponding data.  
     */
    @Listen("onPlotClick = #chart")
    public void drilldown(ChartsEvent e){
    	Integer level = (Integer)chart.getAttribute(DRILLDOWN_LEVEL);
    	if (level == 0){
	    	model.clear();
	    	if (MARKET1.equals(e.getCategory())){
	    		loadDrilldownModel1();
	    	}else{
	    		loadDrilldownModel2();
	    	}
	    	level++;
	    	chart.setAttribute(DRILLDOWN_LEVEL, level);
	    	updateDrilldownStatus();
    	}
    }

Drill-up Button

Since we don't use the built-in drill-down feature, we need to create our own drill-up button.

displayMultipleSeries.zul

<zk>
	<window apply="org.zkoss.zkcharts.essentials.DisplayMultipleSeriesComposer" >
	    <charts id="chart" type="column" title="Market Share" 
	        subtitle="Click the columns to view regions" width="600"/>
	    <button id="back" label="back to All Market" visible="false" 
	    style="position: absolute; z-index:100; left:460px; top:40px"/>
	</window>
</zk>

• Line 4: The drill-up button is only visible after drilling down a series.
• Line 5: We move the button to the up-right corner to make it similar with built-in drill-up button.

When users click the drill-up button, we reload back to original data and change the button's visibility and cursor's style..

An event listener for drill-up button in DisplayMultipleSeriesComposer.java

    @Listen("onClick = #back")
    public void reloadMarket(){
    	Integer level = (Integer)chart.getAttribute(DRILLDOWN_LEVEL);
    	if (level == 1){
    		model.clear();
    		initModel();
    		level--;
    		chart.setAttribute(DRILLDOWN_LEVEL, level);
    		updateDrilldownStatus();
    	}
    }

    private void updateDrilldownStatus(){
    	Integer level = (Integer)chart.getAttribute(DRILLDOWN_LEVEL);
    	if (level == 0){
    		chart.getPlotOptions().getSeries().setCursor("pointer");
    		backButton.setVisible(false);
    	}else{
    		chart.getPlotOptions().getSeries().setCursor("normal");
    		backButton.setVisible(true);
    	}
    }

< Get Complete Source Code of This Book >