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



<window apply="demo.line.LineTimeSeriesComposer">
	<charts id="chart" zoomType="x" 
		title="USD to EUR exchange rate over time"
		subtitle="Click and drag in the plot area to zoom in"/>
</window>

package demo.line;

import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Color;
import org.zkoss.chart.LinearGradient;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.plotOptions.AreaPlotOptions;
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;

import demo.util.TimeUtil;


public class LineTimeSeriesComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

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

		XAxis xAxis = chart.getXAxis();
		xAxis.setType("datetime");

		chart.getYAxis().setTitle("Exchange rate");
		
		chart.getLegend().setEnabled(false);
		
		AreaPlotOptions plotOptions = chart.getPlotOptions().getArea();
		LinearGradient fillColor = new LinearGradient(0, 0, 0, 1);
		fillColor.setStops(chart.getColors().get(0).stringValue(), "rgba(124,181,236,0)");
		plotOptions.setFillColor(fillColor);
		plotOptions.getMarker().setRadius(2);;
		plotOptions.setLineWidth(1);
		plotOptions.setShadow(false);
		plotOptions.getStates().getHover().setLineWidth(1);
		plotOptions.setThreshold(null);

		Series series = chart.getSeries();
		series.setType("area");
		series.setName("USD to EUR");
		series.setData(Arrays.stream(LineTimeSeriesData.getData())
				.map(numbers -> new Point(numbers[0], numbers[1]))
				.collect(Collectors.toList()).toArray(new Point[0]));
		
		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				LinearGradient fillColor = new LinearGradient(0, 0, 0, 1);
				fillColor.setStops(chart.getColors().get(0).stringValue(), "rgba(124,181,236,0)");
				chart.getPlotOptions().getArea().setFillColor(fillColor);
	    	}
		});
	}
}

package demo.line;

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

import org.zkoss.io.Files;
import org.zkoss.json.JSONArray;
import org.zkoss.json.JSONValue;


public class LineTimeSeriesData {
	static final Number[][] data;

	private final static Number[][] fake = {{1167609600000l, 0.7537},
			{1167696000000l, 0.7537}, {1167782400000l, 0.7559},
			{1167868800000l, 0.7631}, {1167955200000l, 0.7644},
			{1168214400000l, 0.769}, {1168300800000l, 0.7683},
			{1168387200000l, 0.77}, {1168473600000l, 0.7703},
			{1168560000000l, 0.7757}, {1168819200000l, 0.7728},
			{1168905600000l, 0.7721}, {1168992000000l, 0.7748}};
	static {
		Number[][] localData;
		try {
			JSONArray array = (JSONArray) JSONValue.parse(new String(
					Files.readAll(new BufferedInputStream(
							new URL("https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/usdeur.json").openStream()))));
			localData = array.stream()
					.map(ary -> ((JSONArray) ary).toArray(new Number[0])).collect(
							Collectors.toList()).toArray(new Number[0][0]);
		} catch (IOException e) {
			// use fake data.
			localData = fake;
		}
		data = localData;
	}

	public static Number[][] getData() {
		return data;
	}
}