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


<window apply="demo.more.PyramidComposer">
	<charts id="chart" type="pyramid" title="Sales pyramid"/>
</window>

package demo.more;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Point;
import org.zkoss.chart.Responsive;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.model.DefaultSingleValueCategoryModel;
import org.zkoss.chart.model.SingleValueCategoryModel;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.chart.plotOptions.SeriesPlotOptions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class PyramidComposer extends SelectorComposer<Window> {
	
	@Wire
    Charts chart;

    @SuppressWarnings({ "unchecked", "rawtypes" })
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		Series series = chart.getSeries();
		series.setName("Unique users");
		series.setData(
				Point.of("Website visits", 15654),
				Point.of("Downloads", 4064),
				Point.of("Requested price list", 1987),
				Point.of("Invoice sent", 976),
				Point.of("Finalized", 846));

		chart.getTitle().setX(-50);
		SeriesPlotOptions seriesPlotOptions = chart.getPlotOptions().getSeries();
		DataLabels labels = seriesPlotOptions.getDataLabels();
		labels.setEnabled(true);
		labels.setFormat("<b>{point.name}</b> ({point.y:,.0f})");
		labels.setSoftConnector(true);
		seriesPlotOptions.setCenter("40%", "50%");
		seriesPlotOptions.setWidth("80%");

		chart.getLegend().setEnabled(false);

		Responsive.Rule rule = chart.getResponsive().getRule();
		rule.getCondition().setMaxWidth(500);
		SeriesPlotOptions plotOptions = rule.getChartOptions().getPlotOptions()
				.getSeries();
		plotOptions.getDataLabels().setInside(true);
		plotOptions.setCenter("50%", "50%");
		plotOptions.setWidth("100%");

		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				Theme theme = chart.getTheme();
				if (Theme.DARK_UNICA.equals(theme)) {
					seriesPlotOptions.getDataLabels().setColor("silver");
				} else {
					seriesPlotOptions.getDataLabels().setColor("black");
				}
			}
		});
    }
}