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


<window apply="demo.more.ErrorBarComposer">
	<charts id="chart" zoomType="xy" title="Temperature vs Rainfall"/>
</window>

package demo.more;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Point;
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.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;


public class ErrorBarComposer extends SelectorComposer<Window> {

    @Wire
    Charts chart;

    public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
	
		chart.getXAxis().setCategories("Jan", "Feb", "Mar", "Apr", "May",
			"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
	
		// Primary y Axis
		YAxis yAxis1 = chart.getYAxis();
		yAxis1.getLabels().setFormat("{value} °C");
		yAxis1.setTitle("Temperature");
		
		// Secondary y Axis
		YAxis yAxis2 = chart.getYAxis(1);
		yAxis2.setTitle("Rainfall");
		yAxis2.getLabels().setFormat("{value} mm");
		yAxis2.setOpposite(true);
		setYAxisesColor();
		
		chart.getTooltip().setShared(true);
		
		Series series1 = chart.getSeries();
		series1.setName("Rainfall");
		series1.setType("column");
		series1.setYAxis(1);
		series1.setData(49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4);
		series1.getTooltip().setPointFormat("<span style=\"font-weight: bold; color: {series.color}\">{series.name}</span>: <b>{point.y:.1f} mm</b> ");
		
		Series series2 = chart.getSeries(1);
		series2.setName("Rainfall error");
		series2.setType("errorbar");
		series2.setYAxis(1);
		series2.setData(Point.of(48, 51),
		Point.of(68, 73),
		Point.of(92, 110),
		Point.of(128, 136),
		Point.of(140, 150),
		Point.of(171, 179),
		Point.of(135, 143),
		Point.of(142, 149),
		Point.of(204, 220),
		Point.of(189, 199),
		Point.of(95, 110),
		Point.of(52, 56));
		series2.getTooltip().setPointFormat("(error range: {point.low}-{point.high} mm)<br/>");
		
		Series series3 = chart.getSeries(2);
		series3.setName("Temperature");
		series3.setType("spline");
		series3.setData(7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3,
			18.3, 13.9, 9.6);
		series3.getTooltip().setPointFormat("<span style=\"font-weight: bold; color: {series.color}\">{series.name}</span>: <b>{point.y:.1f}°C</b> ");
		
		Series series4 = chart.getSeries(3);
		series4.setName("Temperature error");
		series4.setType("errorbar");
		series4.setData(Point.of(6, 8),
		Point.of(5.9, 7.6),
		Point.of(9.4, 10.4),
		Point.of(14.1, 15.9),
		Point.of(18.0, 20.1),
		Point.of(21.0, 24.0),
		Point.of(23.2, 25.3),
		Point.of(26.1, 27.8),
		Point.of(23.2, 23.9),
		Point.of(18.0, 21.1),
		Point.of(12.9, 14.0),
		Point.of(7.6, 10.0));
		series4.getTooltip().setPointFormat("(error range: {point.low}-{point.high}°C)<br/>");
		
		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);
		String[] themeColors = ThemeColors.getThemeColors(Theme.DEFAULT);
		String color1 = themeColors[0];
		String color2 = themeColors[1];
		yAxis1.getLabels().setStyle("color: '" + color2 + "'");
		yAxis1.getTitle().setStyle("color: '" + color2 + "'");
		yAxis2.getLabels().setStyle("color: '" + color1 + "'");
		yAxis2.getTitle().setStyle("color: '" + color1 + "'");
	}
}