<?xml version="1.0" encoding="UTF-8"?>



<window apply="demo.bar.ColumnDrilldownComposer">
	<charts id="chart" type="column" title="Browser market shares. January, 2022"/>
</window>

package demo.bar;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Map.Entry;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.Subtitle;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.chart.plotOptions.SeriesPlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;

import demo.data.Browser;
import demo.data.BrowserMarketShare;


public class ColumnDrilldownComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		Subtitle subtitle = chart.getSubtitle();
		subtitle.setText("Click the columns to view versions. Source: <a href=\"http://statcounter.com\" target=\"_blank\">statcounter.com</a>");

		chart.getAccessibility().getAnnounceNewData().setEnabled(true);

		chart.getXAxis().setType("category");
		
		chart.getYAxis().setTitle("Total percent market share");
		
		chart.getLegend().setEnabled(false);

		SeriesPlotOptions series = chart.getPlotOptions().getSeries();
		series.setBorderWidth(0);
		DataLabels dataLabels = series.getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setFormat("{point.y:.1f}%");
		
		chart.getTooltip().setHeaderFormat("<span style=\"font-size:11px\">{series.name}</span><br>");
		chart.getTooltip().setPointFormat("<span style=\"color:{point.color}\">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>");
		
		initSeries();
	}
	
	private void initSeries() {
		Series series = chart.getSeries();
		series.setName("Browsers");
		series.setColorByPoint(true);

		List<Series> drilldowns = new ArrayList<Series>();

		Map<Browser.GROUP, Double> brands = BrowserMarketShare.getBrands();
		int count = 0;
		for (Entry<Browser.GROUP, Double> entry : brands.entrySet()) {
			Point browserGroupPoint = new Point(entry.getKey().getLabel(), entry.getValue());
			series.addPoint(browserGroupPoint);
			if (++count < brands.size()) {
				drilldowns.add(createBrowserGroupDrilldown(browserGroupPoint, entry));
			}
		}

		chart.getDrilldown().setSeries(drilldowns);
	}

	private Series createBrowserGroupDrilldown(Point point, Entry<Browser.GROUP, Double> entry) {
		Browser.GROUP browserGroup = entry.getKey();
		String browserGroupLabel = browserGroup.getLabel();
		point.setDrilldown(browserGroupLabel);
		Series drilldownSeries = new Series(browserGroupLabel);
		for (Browser browser : BrowserMarketShare.getVersions(browserGroup)) {
			drilldownSeries.addPoint(new Point(browser.getVersion(), browser.getPercentage()));
		}
		return drilldownSeries;
	}
}

package demo.data;

import java.util.LinkedHashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;


public class BrowserMarketShare {
	private static Map<Browser.GROUP, Double> brands;
	private static List<Browser> browsers;
	static {
		
		brands = new LinkedHashMap<Browser.GROUP, Double>();
		brands.put(Browser.CHROME, 63.06);
		brands.put(Browser.SAFARI, 19.84);
		brands.put(Browser.FIREFOX, 4.18);
		brands.put(Browser.EDGE, 4.12);
		brands.put(Browser.OPERA, 2.33);
		brands.put(Browser.IE, 0.45);
		brands.put(Browser.OTHER, 1.582);
		
		browsers = new LinkedList<Browser>();

		browsers.add(new Browser(Browser.CHROME, "v65.0", 0.1));
		browsers.add(new Browser(Browser.CHROME, "v64.0", 1.3));
		browsers.add(new Browser(Browser.CHROME, "v63.0", 53.02));
		browsers.add(new Browser(Browser.CHROME, "v62.0", 1.4));
		browsers.add(new Browser(Browser.CHROME, "v61.0", 0.88));
		browsers.add(new Browser(Browser.CHROME, "v60.0", 0.56));
		browsers.add(new Browser(Browser.CHROME, "v59.0", 0.45));
		browsers.add(new Browser(Browser.CHROME, "v58.0", 0.49));
		browsers.add(new Browser(Browser.CHROME, "v57.0", 0.32));
		browsers.add(new Browser(Browser.CHROME, "v56.0", 0.29));
		browsers.add(new Browser(Browser.CHROME, "v55.0", 0.79));
		browsers.add(new Browser(Browser.CHROME, "v54.0", 0.18));

		browsers.add(new Browser(Browser.FIREFOX, "v58.0", 1.02));
		browsers.add(new Browser(Browser.FIREFOX, "v57.0", 7.36));
		browsers.add(new Browser(Browser.FIREFOX, "v56.0", 0.35));
		browsers.add(new Browser(Browser.FIREFOX, "v55.0", 0.11));
		browsers.add(new Browser(Browser.FIREFOX, "v54.0", 0.1));
		browsers.add(new Browser(Browser.FIREFOX, "v52.0", 0.95));
		browsers.add(new Browser(Browser.FIREFOX, "v51.0", 0.15));
		browsers.add(new Browser(Browser.FIREFOX, "v50.0", 0.1));
		browsers.add(new Browser(Browser.FIREFOX, "v48.0", 0.31));
		browsers.add(new Browser(Browser.FIREFOX, "v47.0", 0.12));
		
		browsers.add(new Browser(Browser.IE, "v11.0", 6.2));
		browsers.add(new Browser(Browser.IE, "v10.0", 0.29));
		browsers.add(new Browser(Browser.IE, "v9.0", 0.27));
		browsers.add(new Browser(Browser.IE, "v8.0", 0.47));
		
		browsers.add(new Browser(Browser.SAFARI, "v11.0", 3.39));
		browsers.add(new Browser(Browser.SAFARI, "v10.1", 0.96));
		browsers.add(new Browser(Browser.SAFARI, "v10.0", 0.36));
		browsers.add(new Browser(Browser.SAFARI, "v9.1", 0.54));;
		browsers.add(new Browser(Browser.SAFARI, "v9.0", 0.13));;
		browsers.add(new Browser(Browser.SAFARI, "v5.1", 0.2));

		browsers.add(new Browser(Browser.EDGE, "v16", 2.6));
		browsers.add(new Browser(Browser.EDGE, "v15", 0.92));
		browsers.add(new Browser(Browser.EDGE, "v14", 0.4));
		browsers.add(new Browser(Browser.EDGE, "v13", 0.1));
		
		browsers.add(new Browser(Browser.OPERA, "v50.0", 0.96));
		browsers.add(new Browser(Browser.OPERA, "v49.0", 0.82));
		browsers.add(new Browser(Browser.OPERA, "v12.1", 0.14));
	}

	static public  Map<Browser.GROUP, Double> getBrands() {
		return brands;
	}

	static public List<Browser> getVersions(Browser.GROUP group) {
		List<Browser> result = new LinkedList<Browser>();
		for (Browser browser: browsers) {
			if(browser.getGroup() == group) {
				result.add(browser);
			}
		}
		return result;
	}
}