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



<window apply="demo.area.AreaRangeLineComposer">
	<charts id="chart" title="April temperatures in Nesbyen, 2024"/>
</window>

package demo.area;

import demo.util.TimeUtil;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Color;
import org.zkoss.chart.Marker;
import org.zkoss.chart.Series;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.plotOptions.SeriesPlotOptions;
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 AreaRangeLineComposer 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/1-113585/Norge/Buskerud/Nesbyen/Nesbyen?q=2024-04\"" +
				"target=\"_blank\">YR</a>");
		chart.getSubtitle().setAlign("left");

		chart.getXAxis().setType("datetime");
		chart.getXAxis().getAccessibility().setRangeDescription("Range: April 1st 2022 to April 30th 2024.");
		chart.getYAxis().setTitle("");

		Tooltip tooltip = chart.getTooltip();
		tooltip.setCrosshairs(true);
		tooltip.setShared(true);
		tooltip.setValueSuffix("°C");

		SeriesPlotOptions series = chart.getPlotOptions().getSeries();
		series.setPointStart(TimeUtil.getUTCDate(2024, 4, 1));
		series.setPointIntervalUnit("day");

		Series series1 = chart.getSeries();
		series1.setName("Temperature");
		for (Double[] val : AreaRangeLineData.getAverages()) {
			series1.addPoint(val[0]);
		}
		series1.setZIndex(1);

		final Color color = chart.getColors().get(0);
		Marker marker = series1.getMarker();
		marker.setFillColor("white");
		marker.setLineWidth(2);
		marker.setLineColor(color);

		Series series2 = chart.getSeries(1);
		series2.setName("Range");
		for (Double[] val : AreaRangeLineData.getRanges()) {
			series2.addPoint(val[0], val[1]);
		}
		series2.setType("arearange");
		series2.setLineWidth(0);
		series2.setLinkedTo(":previous");
		series2.setColor(color);
		series2.setFillOpacity(0.3);
		series2.getMarker().setEnabled(false);
		series2.setZIndex(0);

		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				final String color = chart.getColors().get(0).stringValue();
				chart.getSeries().getMarker().setLineColor(color);
				chart.getSeries(1).getPlotOptions().setColor(color);
	    	}
		});
	}
}

package demo.area;


public class AreaRangeLineData {
	private static Double[][] ranges = {
			{-4.4, 13.1},
			{-0.5, 8.9},
			{-0.6, 5.4},
			{-4.8, 1.0},
			{-7.7, 2.5},
			{-2.6, 6.4},
			{1.1, 13.4},
			{1.9, 13.0},
			{0.6, 11.2},
			{2.9, 10.4},
			{2.5, 15.3},
			{1.5, 17.0},
			{0.3, 14.6},
			{2.3, 10.5},
			{-3.5, 11.0},
			{-4.8, 12.6},
			{-4.9, 8.7},
			{-4.5, 9.1},
			{1.5, 6.8},
			{-1.9, 8.4},
			{-4.2, 11.3},
			{-4.7, 12.5},
			{1.8, 10.0},
			{0.2, 8.0},
			{-1.0, 10.1},
			{-0.2, 8.8},
			{-1.7, 11.7},
			{-3.4, 9.1},
			{1.6, 13.8},
			{-0.9, 14.5} },
	averages = {
			{2.9},
			{3.4},
			{0.4},
			{-3.5},
			{-2.1},
			{1.6},
			{6.0},
			{7.1},
			{5.4},
			{6.4},
			{7.6},
			{8.5},
			{7.4},
			{6.1},
			{3.2},
			{3.7},
			{1.7},
			{2.9},
			{3.2},
			{2.5},
			{3.2},
			{4.4},
			{5.4},
			{4.4},
			{3.6},
			{4.8},
			{5.1},
			{0.9},
			{6.6},
			{7.2}};

	public static Double[][] getRanges() {
		return ranges;
	}

	public static Double[][] getAverages() {
		return averages;
	}
}