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



<window apply="demo.area.AreaRangeComposer">
	<charts id="chart" type="arearange" zoomType="x"
		title="Temperature variation by day"/>
</window>

package demo.area;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ScrollablePlotArea;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.XAxis;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class AreaRangeComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

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

		ScrollablePlotArea scrollablePlotArea = chart.getScrollablePlotArea();
		scrollablePlotArea.setMinWidth(600);
		scrollablePlotArea.setScrollPositionX(1);

		chart.setModel(AreaRangeData.getXYZModel());

		XAxis xAxis = chart.getXAxis();
		xAxis.setType("datetime");
		xAxis.getAccessibility().setRangeDescription("Range: Jan 1st 2017 to Dec 31 2017.");
		
		chart.getYAxis().setTitle("");
		
		Tooltip tooltip = chart.getTooltip();
		tooltip.setShared(true);
		tooltip.setValueSuffix("°C");
		tooltip.setCrosshairs(true);
		tooltip.setXDateFormat("%A, %b %e");
		
		chart.getLegend().setEnabled(false);
    }
}

package demo.area;

import java.io.BufferedInputStream;
import java.io.IOException;
import java.net.URL;
import java.util.stream.Collectors;

import org.zkoss.chart.model.DefaultXYZModel;
import org.zkoss.chart.model.XYZModel;
import org.zkoss.io.Files;
import org.zkoss.json.JSONArray;
import org.zkoss.json.JSONValue;

public class AreaRangeData {
	private static XYZModel model;

	private final static Number[][] fake = {
			
			{1388538000000.0, 1.1, 4.7},
			{1388624400000.0, 1.8, 6.4},
			{1388710800000.0, 1.7, 6.9},
			{1388797200000.0, 2.6, 7.4},
			{1388883600000.0, 3.3, 9.3},
			{1388970000000.0, 3.0, 7.9}
	};
	static {
		Number[][] data;
		try {
			JSONArray array = (JSONArray) JSONValue.parse(new String(
					Files.readAll(new BufferedInputStream(
							new URL("https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/range.json").openStream()))));
			data = array.stream()
					.map(ary -> ((JSONArray) ary).toArray(new Number[0])).collect(
							Collectors.toList()).toArray(new Number[0][0]);
		} catch (IOException e) {
			// use fake data.
			data = fake;
		}

		model = new DefaultXYZModel();
		for (Number[] value : data) {
			model.addValue("Temperatures", value[0], value[1], value[2]);
		}
	}
	public static XYZModel getXYZModel() {
		return model;
	}
}