<?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.ColumnPlotOptions;
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);
chart.getTitle().setAlign("left");
Subtitle subtitle = chart.getSubtitle();
subtitle.setAlign("left");
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;
}
}