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



<window apply="demo.combo.ComboDualAxesComposer">
	<charts id="chart"  zoomType="xy"
		title="Average Monthly Precipitation and Temperature in Karasjok, 2021" />
</window>

package demo.combo;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.ThemeColors;
import org.zkoss.chart.YAxis;
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 ComboDualAxesComposer extends SelectorComposer<Window> {
	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.getTitle().setAlign("left");
		chart.setSubtitle("Source: " +
				"<a href=\"https://www.yr.no/nb/historikk/graf/5-97251/Norge/Troms%20og%20Finnmark/Karasjok/Karasjok?q=2021\"" +
				"target=\"_blank\">YR</a>"
				);
	
		chart.getXAxis().setCategories(WeatherData.getCategories());
		chart.getXAxis().setCrosshair(true);

		String[] themeColors = ThemeColors.getThemeColors(Theme.DEFAULT);

		// Primary y axis
		YAxis yAxis1 = chart.getYAxis();
		yAxis1.getLabels().setFormat("{value}°C");
		yAxis1.getLabels().setStyle("color: " + themeColors[1]);
		yAxis1.setTitle("Temperature");
		yAxis1.getTitle().setStyle("color: " + themeColors[1]);
		
		// Secondary y axis
		YAxis yAxis2 = chart.getYAxis(1);
		yAxis2.setTitle("Precipitation");
		yAxis2.getTitle().setStyle("color: " + themeColors[0]);
		yAxis2.getLabels().setFormat("{value} mm");
		yAxis2.getLabels().setStyle("color: " + themeColors[0]);
		yAxis2.setOpposite(true);
		
		chart.getTooltip().setShared(true);
		
		Legend legend = chart.getLegend();
		legend.setAlign("left");
		legend.setX(80);
		legend.setVerticalAlign("top");
		legend.setY(80);
		legend.setFloating(true);
		legend.setBackgroundColor("rgba(255,255,255,0.25)");
		initSeries();
	}
	
	private void initSeries() {
		Series precipitation = new Series();
		precipitation.setName("Precipitation");
		precipitation.setType("column");
		precipitation.setYAxis(1);
		precipitation.setData(WeatherData.getPrecipitation());
		precipitation.getTooltip().setValueSuffix(" mm");
		chart.addSeries(precipitation);

		Series temperature = new Series();
		temperature.setName("Temperature");
		temperature.setType("spline");
		temperature.setData(WeatherData.getTemperature());
		temperature.getTooltip().setValueSuffix("°C");
		chart.addSeries(temperature);
	}
}

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;
	}
}