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



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

package demo.more;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Point;
import org.zkoss.chart.Responsive;
import org.zkoss.chart.Series;
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.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class FunnelComposer extends SelectorComposer<Window> {

	@Wire Charts chart;

	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		SeriesPlotOptions plotOptions = chart.getPlotOptions().getSeries();
		DataLabels dataLabels = plotOptions.getDataLabels();
		dataLabels.setEnabled(true);
		dataLabels.setFormat("<b>{point.name}</b> ({point.y:,.0f})");
		dataLabels.setSoftConnector(true);
		plotOptions.setNeckWidth("30%");
		plotOptions.setNeckHeight("25%");
		plotOptions.setCenter("40%", "50%");
		plotOptions.setWidth("80%");

		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.getLegend().setEnabled(false);

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