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



<window apply="demo.dynamic.DynamicUpdateComposer">
	<charts id="chart" type="spline" marginRight="10"
		title="Live random data" />
	<timer id="timer" delay="1000" running="true" repeats="true" />
</window>

package demo.dynamic;

import org.zkoss.chart.Accessibility;
import org.zkoss.chart.AnnounceNewData;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Options;
import org.zkoss.chart.PlotLine;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.json.JavaScriptValue;
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.Window;

import demo.util.TimeUtil;


public class DynamicUpdateComposer extends SelectorComposer<Window> {
	@Wire
	Charts chart;

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

		AnnounceNewData announceNewData = chart.getAccessibility()
				.getAnnounceNewData();
		announceNewData.setEnabled(true);
		announceNewData.setMinAnnounceInterval(15000);
		announceNewData.setAnnouncementFormatter(new JavaScriptValue(
		"function (allSeries, newSeries, newPoint) {\n"
		+ "		if (newPoint) {\n"
		+ "			return 'New point added. Value: ' + newPoint.y;\n"
		+ "		}\n"
		+ "		return false;\n"
		+ "}"
		));

		Options options = new Options();
		options.getGlobal().setUseUTC(false);
		chart.setOptions(options);
		chart.setAnimation(true);
		
		chart.getXAxis().setType("datetime");
		chart.getXAxis().setTickPixelInterval(150);
		
		chart.getYAxis().setTitle("Value");
		PlotLine plotLine = new PlotLine();
		plotLine.setValue(0);
		plotLine.setWidth(1);
		plotLine.setColor("#808080");
		chart.getYAxis().addPlotLine(plotLine);
		
		chart.getTooltip().setHeaderFormat("<b>{series.name}</b><br/>");
		chart.getTooltip().setPointFormat("{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}");
		
		chart.getLegend().setEnabled(false);
	
		chart.getExporting().setEnabled(false);

		Series series = chart.getSeries();
		series.setName("Random data");
		for (int i = -19; i <= 0; i++) {
			Point point = new Point(TimeUtil.getNow() + i*1000, Math.random());
			series.addPoint(point);
		}
	}

	@Listen("onTimer = #timer")
	public void updateData() {
		chart.getSeries().addPoint(new Point(TimeUtil.getNow(), Math.random()),
				true, true, true);
	}
}