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



<window apply="demo.combo.ComboMultiAxesComposer">
	<charts id="chart"  zoomType="xy" subtitle="Source: WorldClimate.com" 
		title="Average Monthly Weather Data for Tokyo" />
</window>

package demo.combo;


import org.zkoss.chart.AxisLabels;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Legend;
import org.zkoss.chart.PlotData;
import org.zkoss.chart.Responsive;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.ThemeColors;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.impl.PlotEngineImpl;
import org.zkoss.chart.plotOptions.SplinePlotOptions;
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;

import demo.data.WeatherData;


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

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

		chart.getTitle().setAlign("left");
		chart.getSubtitle().setAlign("left");

		chart.getXAxis().setCategories(WeatherData.getCategories());
		chart.getXAxis().setCrosshair(true);

		// Primary y Axis
		YAxis yAxis1 = chart.getYAxis();
		yAxis1.getLabels().setFormat("{value}°C");
		yAxis1.setTitle("Temperature");
		yAxis1.setOpposite(true);
		
		// Secondary y Axis
		YAxis yAxis2 = chart.getYAxis(1);
		yAxis2.setGridLineWidth(0);
		yAxis2.setTitle("Rainfall");
		yAxis2.getLabels().setFormat("{value} mm");

		// Third y Axis
		YAxis yAxis3 = chart.getYAxis(2);
		yAxis3.setGridLineWidth(0);
		yAxis3.setTitle("Sea-Level Pressure");
		yAxis3.getLabels().setFormat("{value} mb");

		yAxis3.setOpposite(true);

		chart.getTooltip().setShared(true);
		
		Legend legend = chart.getLegend();
		legend.setLayout("vertical");
		legend.setAlign("left");
		legend.setX(80);
		legend.setVerticalAlign("top");
		legend.setY(55);
		legend.setFloating(true);
		legend.setBackgroundColor("rgba(255,255,255,0.25)");


		setYAxisesColor();

		initSeries();

		Responsive.Rule rule = chart.getResponsive().getRule();
		rule.getCondition().setMaxWidth(500);
		PlotData chartOptions = rule.getChartOptions();
		Legend legend1 = chartOptions.getLegend();
		legend1.setFloating(false);
		legend1.setLayout("horizontal");
		legend1.setAlign("center");
		legend1.setVerticalAlign("bottom");
		legend1.setX(0);
		legend1.setY(0);

		YAxis chartOptionsYAxis = chartOptions.getYAxis(0);
		AxisLabels yAxisLabels = chartOptionsYAxis.getLabels();
		yAxisLabels.setAlign("right");
		yAxisLabels.setX(0);
		yAxisLabels.setY(-6);
		chartOptionsYAxis.setShowLastLabel(false);

		YAxis chartOptionsYAxis1 = chartOptions.getYAxis(1);
		AxisLabels yAxisLabels1 = chartOptionsYAxis1.getLabels();
		yAxisLabels1.setAlign("left");
		yAxisLabels1.setX(0);
		yAxisLabels1.setY(-6);
		chartOptionsYAxis1.setShowLastLabel(false);
		chartOptions.getYAxis(2).setVisible(false);
	}
	private void initSeries() {
		Series rainfall = new Series();
		rainfall.setName("Rainfall");
		rainfall.setType("column");
		rainfall.setYAxis(1);
		rainfall.setData(WeatherData.getRainfall());
		rainfall.getTooltip().setValueSuffix(" mm");
		chart.addSeries(rainfall);
		
		Series pressure = new Series();
		pressure.setName("Sea-Level Pressure");
		pressure.setType("spline");
		pressure.setYAxis(2);
		pressure.setData(WeatherData.getPressure());
		pressure.getMarker().setEnabled(false);
		pressure.setDashStyle("shortdot");
		pressure.getTooltip().setValueSuffix(" mb");
		chart.addSeries(pressure);
		
		Series temperature = new Series();
		temperature.setName("Temperature");
		temperature.setType("spline");
		temperature.setData(WeatherData.getTemperature2());
		temperature.getPlotOptions().getTooltip().setValueSuffix(" °C");
		chart.addSeries(temperature);

		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				setYAxisesColor();
	    	}
		});
	}

	private void setYAxisesColor() {
		YAxis yAxis1 = chart.getYAxis();
		YAxis yAxis2 = chart.getYAxis(1);
		YAxis yAxis3 = chart.getYAxis(2);

		String[] themeColors = ThemeColors.getThemeColors(Theme.DEFAULT);
		String color1 = themeColors[0];
		String color2 = themeColors[1];
		String color3 = themeColors[2];
		yAxis1.getLabels().setStyle("color: '" + color3 + "'");
		yAxis1.getTitle().setStyle("color: '" + color3 + "'");
		yAxis2.getLabels().setStyle("color: '" + color1 + "'");
		yAxis2.getTitle().setStyle("color: '" + color1 + "'");
		yAxis3.getLabels().setStyle("color: '" + color2 + "'");
		yAxis3.getTitle().setStyle("color: '" + color2 + "'");
	}
}

package demo.data;


public class WeatherData {
	private static String[] categories;
	private static Number[] rainfall, precipitation, temperature, temperature2, pressure;
	static {
		categories = new String[] {
				"Jan", "Feb", "Mar", "Apr",
				"May","Jun", "Jul", "Aug",
				"Sep", "Oct", "Nov", "Dec"
		};
		rainfall = new Double[] {
				49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4};
		precipitation = new Double[] {
				27.6, 28.8, 21.7, 34.1, 29.0, 28.4, 45.6, 51.7, 39.0,
				60.0, 28.6, 32.1};
		temperature = new Double[] {
				-13.6, -14.9, -5.8, -0.7, 3.1, 13.0, 14.5, 10.8, 5.8,
				-0.7, -11.0, -16.4};
		temperature2 = new Double[] {
				7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6};
		pressure = new Number[] {
				1016, 1016, 1015.9, 1015.5,
				1012.3, 1009.5, 1009.6, 1010.2,
				1013.1, 1016.9, 1018.2, 1016.7};
	}

	public static Number[] getRainfall() {
		return rainfall;
	}

	public static Number[] getPrecipitation() {
		return precipitation;
	}
	public static Number[] getTemperature() {
		return temperature;
	}
	public static Number[] getTemperature2() {
		return temperature2;
	}
	public static Number[] getPressure() {
		return pressure;
	}
	public static String[] getCategories() {
		return categories;
	}
}