<?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.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Series;
import org.zkoss.chart.YAxis;
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.getXAxis().setCategories(WeatherData.getCategories());
		
		// 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);
		setYAxisesColor();
		chart.getTooltip().setShared(true);
		
		Legend legend = chart.getLegend();
		legend.setLayout("vertical");
		legend.setAlign("left");
		legend.setX(120);
		legend.setVerticalAlign("top");
		legend.setY(80);
		legend.setFloating(true);
		
		initSeries();
		
	}
	private void initSeries() {
		Series rainfall = new Series("Rainfall");
		rainfall.setType("column");
		rainfall.setYAxis(1);
		rainfall.setData(WeatherData.getRainfall());
		rainfall.getPlotOptions().getTooltip().setValueSuffix(" mm");
		chart.addSeries(rainfall);
		
		Series pressure = new Series("Sea-Level Pressure");
		pressure.setType("spline");
		pressure.setYAxis(2);
		pressure.setData(WeatherData.getPressure());
		pressure.getMarker().setEnabled(false);
		SplinePlotOptions plotOptions2 = new SplinePlotOptions();
		plotOptions2.setDashStyle("shortdot");
		plotOptions2.getTooltip().setValueSuffix(" mb");
		pressure.setPlotOptions(plotOptions2);
		chart.addSeries(pressure);
		
		Series temperature = new Series("Temperature");
		temperature.setType("spline");
		temperature.setData(WeatherData.getTemperature());
		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 color1 = chart.getColors().get(0).stringValue();
		String color2 = chart.getColors().get(1).stringValue();
		String color3 = chart.getColors().get(2).stringValue();
		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, temperature, 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};
		temperature = 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[] getTemperature() {
		return temperature;
	}
	public static Number[] getPressure() {
		return pressure;
	}
	public static String[] getCategories() {
		return categories;
	}
}