<?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.stream.Collectors;

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

		chart.getTitle().setAlign("left");
		chart.getSubtitle().setAlign("left");

		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(new Stop(0, "rgb(199, 113, 243)"), new Stop(0.7, "rgb(76, 175, 254)"));
		plotOptions.setColor(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(44,175,254,0)");
				chart.getPlotOptions().getArea().setFillColor(fillColor);
	    	}
		});
	}
}

package demo.line;

import java.util.stream.Collectors;

import org.zkoss.chart.demo.WebResourceLoader;
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;
		JSONArray array = (JSONArray) JSONValue.parse(WebResourceLoader.readData("usdeur.json"));
		localData = array.stream()
				.map(ary -> ((JSONArray) ary).toArray(new Number[0])).collect(
						Collectors.toList()).toArray(new Number[0][0]);
		data = localData;
	}

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