<?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.LinearGradient;
import org.zkoss.chart.ScrollablePlotArea;
import org.zkoss.chart.Subtitle;
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());

		chart.getTitle().setAlign("left");
		Subtitle subtitle = chart.getSubtitle();
		subtitle.setText("Source: " +
		"<a href=\"https://veret.gfi.uib.no/\"" +
				"target=\"_blank\">Universitetet i Bergen</a>");
		subtitle.setAlign("left");

		XAxis xAxis = chart.getXAxis();
		xAxis.setType("datetime");
		xAxis.getAccessibility().setRangeDescription("Range: Jan 1st 2023 to Jan 1st 2024.");

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

		LinearGradient linearGradient = new LinearGradient(0, 0, 0, 1);
		linearGradient.setStops("#ff0000", "#0000ff");
		chart.getSeries().setColor(linearGradient);
    }
}

package demo.area;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.StringReader;
import java.time.LocalDate;
import java.time.ZoneOffset;
import java.time.format.DateTimeFormatter;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;

import org.zkoss.chart.demo.WebResourceLoader;
import org.zkoss.chart.model.DefaultXYZModel;
import org.zkoss.chart.model.XYZModel;
import org.zkoss.json.JSONArray;
import org.zkoss.json.JSONValue;

public class AreaRangeData {
	private static XYZModel model;

	static {
		String readData = WebResourceLoader.readData("temp-florida-bergen-2023.csv");
		List<Number[]> data = new ArrayList<>();
		DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
		try (BufferedReader reader = new BufferedReader(new StringReader(readData))) {
			String line;
			boolean firstLine = true;
			while ((line = reader.readLine()) != null) {
				if (firstLine) {
					firstLine = false;
					continue;
				}
				String[] values = line.split(",");
				Number[] numberValues = new Number[3];
				numberValues[0] = LocalDate.parse(values[0], formatter).atStartOfDay().toInstant(
						ZoneOffset.UTC).toEpochMilli(); // Date (as a number, e.g., timestamp)
				numberValues[1] = Double.parseDouble(values[1]); // Min temperature
				numberValues[2] = Double.parseDouble(values[2]); // Max temperature
				data.add(numberValues);
			}
		} catch (IOException e) {
			e.printStackTrace();
		}

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