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



<window apply="demo.line.LineAjaxComposer">
	<charts id="chart" title="Daily sessions at www.highcharts.com"
		subtitle="Source: Google Analytics" />
	<popup id="anchor" width="0" height="0">
		<window id="msgBox" closable="true" sizable="true" border="normal"
			position="parent" width="200px" mode="popup">
			<label id="msg" multiline="true" />
		</window>
	</popup>
</window>

package demo.line;

import org.zkoss.chart.AxisLabels;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvent;
import org.zkoss.chart.Legend;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.YAxis;
import org.zkoss.chart.plotOptions.SeriesPlotOptions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Label;
import org.zkoss.zul.Popup;
import org.zkoss.zul.Window;

import demo.util.TimeUtil;

public class LineAjaxComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;
	
	@Wire
	Popup anchor;
	
	@Wire
	Window msgBox;

	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
	
		chart.setModel(LineAjaxData.getXYModel());

		chart.getScrollablePlotArea().setMinWidth(700);

		XAxis xAxis = chart.getXAxis();
		xAxis.setType("datetime");
		xAxis.setTickInterval(7 * 24 * 3600 * 1000); // one week
		xAxis.setTickWidth(0);
		xAxis.setGridLineWidth(1);
		
		AxisLabels xAxisLabels = xAxis.getLabels();
		xAxisLabels.setAlign("left");
		xAxisLabels.setX(3);
		xAxisLabels.setY(-3);
		
		YAxis leftYAxis = chart.getYAxis();
		leftYAxis.setTitle("");
		AxisLabels leftYAxisLabels = leftYAxis.getLabels();
		leftYAxisLabels.setAlign("left");
		leftYAxisLabels.setX(3);
		leftYAxisLabels.setY(16);
		leftYAxisLabels.setFormat("{value:.,0f}");
		leftYAxis.setShowFirstLabel(false);

		YAxis rightYAxis = chart.getYAxis(1);
		rightYAxis.setLinkedTo(0);
		rightYAxis.setGridLineWidth(0);
		rightYAxis.setOpposite(true);
		rightYAxis.setTitle("");
		AxisLabels rightYAxisLabels = rightYAxis.getLabels();
		rightYAxisLabels.setAlign("right");
		rightYAxisLabels.setX(-3);
		rightYAxisLabels.setY(16);
		rightYAxisLabels.setFormat("{value:.,0f}");
		rightYAxis.setShowFirstLabel(false);
		
		Legend legend = chart.getLegend();
		legend.setAlign("left");
		legend.setVerticalAlign("top");
		legend.setBorderWidth(0);

		Tooltip tooltip = chart.getTooltip();
		tooltip.setShared(true);
		tooltip.setCrosshairs(true);

		SeriesPlotOptions plotOptions = chart.getPlotOptions().getSeries();
		plotOptions.setCursor("pointer");
		plotOptions.setClassName("popup-on-click");
		plotOptions.getMarker().setLineWidth(1);

		Series series = chart.getSeries(0);
		series.setLineWidth(4);
		series.getMarker().setRadius(4);

	}
	@Listen("onPlotClick = #chart")
	public void showMessage(ChartsEvent event) {
		// Open an invisible popup at where the point clicked. 
		anchor.open(chart, "at_pointer");
		Point point = event.getPoint();
		msgBox.setTitle(event.getSeries().getName());
		// Locate the window's position by popup.
		msgBox.setTop(anchor.getTop());
		msgBox.setLeft(anchor.getLeft());
		Label msg = (Label) msgBox.getFellow("msg");
		String formattedDate = TimeUtil.getFormattedTime((Long) event.getCategory(),
				"EEEEEEEEE, MMM dd, yyyy");
		msg.setValue(formattedDate + ":\n" + point.getY() + " visits");
		msgBox.setVisible(true);
	}
	
	@Listen("onClose=#msgBox")
	public void onClose(Event event) {
		// Hide the window instread of closing it.
		msgBox.setVisible(false);
		event.stopPropagation();
	}
}

package demo.line;

import org.zkoss.chart.model.DefaultXYModel;
import org.zkoss.chart.model.XYModel;

import demo.util.TimeUtil;



public class LineAjaxData {
	private static final XYModel model;
	static {
		model = new DefaultXYModel();
		model.addValue("Users", TimeUtil.parse("12-18-2017"), 40.585);
		model.addValue("Users", TimeUtil.parse("12-19-2017"), 43.039);
		model.addValue("Users", TimeUtil.parse("12-20-2017"), 44.926);
		model.addValue("Users", TimeUtil.parse("12-21-2017"), 41.256);
		model.addValue("Users", TimeUtil.parse("12-22-2017"), 36.844);
		model.addValue("Users", TimeUtil.parse("12-23-2017"), 28.955);
		model.addValue("Users", TimeUtil.parse("12-24-2017"), 26.113);
		model.addValue("Users", TimeUtil.parse("12-25-2017"), 28.433);
		model.addValue("Users", TimeUtil.parse("12-26-2017"), 32.687);
		model.addValue("Users", TimeUtil.parse("12-27-2017"), 35.689);
		model.addValue("Users", TimeUtil.parse("12-28-2017"), 33.656);
		model.addValue("Users", TimeUtil.parse("12-29-2017"), 34.559);
		model.addValue("Users", TimeUtil.parse("12-30-2017"), 29.197);
		model.addValue("Users", TimeUtil.parse("12-31-2017"), 26.495);
		model.addValue("Users", TimeUtil.parse("01-01-2018"), 28.291);
		model.addValue("Users", TimeUtil.parse("01-02-2018"), 35.472);
		model.addValue("Users", TimeUtil.parse("01-03-2018"), 38.363);
		model.addValue("Users", TimeUtil.parse("01-04-2018"), 41.645);
		model.addValue("Users", TimeUtil.parse("01-05-2018"), 40.268);
		model.addValue("Users", TimeUtil.parse("01-06-2018"), 32.846);
		model.addValue("Users", TimeUtil.parse("01-07-2018"), 33.560);
		model.addValue("Users", TimeUtil.parse("01-08-2018"), 39.327);
		model.addValue("Users", TimeUtil.parse("01-09-2018"), 42.947);
		model.addValue("Users", TimeUtil.parse("01-10-2018"), 44.179);
		model.addValue("Users", TimeUtil.parse("01-11-2018"), 41.938);
		model.addValue("Users", TimeUtil.parse("01-12-2018"), 40.964);
		model.addValue("Users", TimeUtil.parse("01-13-2018"), 32.176);
		model.addValue("Users", TimeUtil.parse("01-14-2018"), 28.915);
		model.addValue("Users", TimeUtil.parse("01-15-2018"), 37.077);
		model.addValue("Users", TimeUtil.parse("01-16-2018"), 41.477);
		model.addValue("Users", TimeUtil.parse("01-17-2018"), 41.840);
		model.addValue("Unique Visitors", TimeUtil.parse("12-18-2017"), 48.351);
		model.addValue("Unique Visitors", TimeUtil.parse("12-19-2017"), 51.499);
		model.addValue("Unique Visitors", TimeUtil.parse("12-20-2017"), 53.359);
		model.addValue("Unique Visitors", TimeUtil.parse("12-21-2017"), 49.018);
		model.addValue("Unique Visitors", TimeUtil.parse("12-22-2017"), 43.332);
		model.addValue("Unique Visitors", TimeUtil.parse("12-23-2017"), 33.419);
		model.addValue("Unique Visitors", TimeUtil.parse("12-24-2017"), 30.020);
		model.addValue("Unique Visitors", TimeUtil.parse("12-25-2017"), 33.183);
		model.addValue("Unique Visitors", TimeUtil.parse("12-26-2017"), 38.782);
		model.addValue("Unique Visitors", TimeUtil.parse("12-27-2017"), 42.566);
		model.addValue("Unique Visitors", TimeUtil.parse("12-28-2017"), 39.972);
		model.addValue("Unique Visitors", TimeUtil.parse("12-29-2017"), 40.414);
		model.addValue("Unique Visitors", TimeUtil.parse("12-30-2017"), 33.565);
		model.addValue("Unique Visitors", TimeUtil.parse("12-31-2017"), 30.738);
		model.addValue("Unique Visitors", TimeUtil.parse("01-01-2018"), 32.822);
		model.addValue("Unique Visitors", TimeUtil.parse("01-02-2018"), 42.081);
		model.addValue("Unique Visitors", TimeUtil.parse("01-03-2018"), 45.652);
		model.addValue("Unique Visitors", TimeUtil.parse("01-04-2018"), 49.572);
		model.addValue("Unique Visitors", TimeUtil.parse("01-05-2018"), 47.936);
		model.addValue("Unique Visitors", TimeUtil.parse("01-06-2018"), 37.539);
		model.addValue("Unique Visitors", TimeUtil.parse("01-07-2018"), 38.527);
		model.addValue("Unique Visitors", TimeUtil.parse("01-08-2018"), 46.847);
		model.addValue("Unique Visitors", TimeUtil.parse("01-09-2018"), 51.286);
		model.addValue("Unique Visitors", TimeUtil.parse("01-10-2018"), 53.245);
		model.addValue("Unique Visitors", TimeUtil.parse("01-11-2018"), 50.733);
		model.addValue("Unique Visitors", TimeUtil.parse("01-12-2018"), 49.046);
		model.addValue("Unique Visitors", TimeUtil.parse("01-13-2018"), 37.106);
		model.addValue("Unique Visitors", TimeUtil.parse("01-14-2018"), 33.218);
		model.addValue("Unique Visitors", TimeUtil.parse("01-15-2018"), 44.192);
		model.addValue("Unique Visitors", TimeUtil.parse("01-16-2018"), 49.612);
		model.addValue("Unique Visitors", TimeUtil.parse("01-17-2018"), 50.285);
	}

	public static XYModel getXYModel() {
		return model;
	}
}