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


<window apply="demo.charts3d.Column3DComposer">
	<charts id="chart" type="column" title="Sold passenger cars in Norway by brand, January 2021"/>
	<grid style="margin:50px; margin-top:20px" width="350px">
		<columns>
			<column align="center" hflex="7"></column>
			<column hflex="15"></column>
			<column hflex="3"></column>
		</columns>
		<rows>
			<row>
				<label>Alpha Angle</label>
				<slider id="sliderA" minpos="0" maxpos="45" step="1" />
				<label id="valA">15</label>
			</row>
			<row>
				<label>Beta Angle </label>
				<slider id="sliderB" minpos="0" maxpos="45" step="1" />
				<label id="valB">15</label>
			</row>
		</rows>
	</grid>
</window>

package demo.charts3d;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Series;
import org.zkoss.chart.Subtitle;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.options3D.Options3D;
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.Label;
import org.zkoss.zul.Slider;
import org.zkoss.zul.Window;


public class Column3DComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

	@Wire
	Slider sliderA;
	@Wire
	Slider sliderB;

	@Wire
	Label valA;
	@Wire
	Label valB;

	private boolean _animation = true;

	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
		chart.setSubtitle("Source: " +
				"<a href=\"https://ofv.no/registreringsstatistikk\"" +
				"target=\"_blank\">OFV</a>");

		Options3D opt3d = chart.getOptions3D();
		opt3d.setEnabled(true);
		opt3d.setAlpha(15);
		opt3d.setBeta(15);
		opt3d.setDepth(50);
		opt3d.setViewDistance(25);

		chart.getXAxis().setCategories("Toyota", "BMW", "Volvo", "Audi", "Peugeot", "Mercedes-Benz",
				"Volkswagen", "Polestar", "Kia", "Nissan");

		chart.getYAxis().setTitle("");

		Tooltip tooltip = chart.getTooltip();
		tooltip.setHeaderFormat("<b>{point.key}</b><br>");
		tooltip.setPointFormat("Cars sold: {point.y}");

		chart.getLegend().setEnabled(false);
		chart.getPlotOptions().getColumn().setDepth(25);

		Series series = chart.getSeries();
		series.setColorByPoint(true);
		series.setData(1318, 1073, 1060, 813, 775, 745, 537, 444, 416, 395);

		initSlider();
	}

	public void initSlider() {
		sliderA.setCurpos(15);
		sliderB.setCurpos(15);
	}

	@Listen("onScroll = slider#sliderA")
	public void updateValueA() {
		if (_animation == true) {
			chart.getSeries(0).setAnimation(false);
			_animation = false;
		}

		int curPosA = sliderA.getCurpos();
		chart.getChart().getOptions3D().setAlpha(curPosA);
		valA.setValue(new Integer(curPosA).toString());
	}

	@Listen("onScroll = slider#sliderB")
	public void updateValueB() {
		if (_animation == true) {
			chart.getSeries(0).setAnimation(false);
			_animation = false;
		}

		int curPosB = sliderB.getCurpos();
		chart.getChart().getOptions3D().setBeta(curPosB);
		valB.setValue(new Integer(curPosB).toString());
	}
}