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



<window apply="demo.dynamic.DynamicClickToAddComposer">
	<charts id="chart" type="scatter" margin="70, 50, 60, 80" 
		title="User supplied data"
		subtitle="Click the plot area to add a point. Click a point to remove it." />
</window>

package demo.dynamic;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsClickEvent;
import org.zkoss.chart.ChartsEvent;
import org.zkoss.chart.PlotLine;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.YAxis;
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;


public class DynamicClickToAddComposer extends SelectorComposer<Window> {
	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.getAccessibility().getAnnounceNewData().setEnabled(true);

		XAxis xAxis = chart.getXAxis();
		xAxis.setGridLineWidth(1);
		xAxis.setMinPadding(0.2);
		xAxis.setMaxPadding(0.2);
		xAxis.setMinRange(60);
		
		YAxis yAxis = chart.getYAxis();
		yAxis.setTitle("Value");
		yAxis.setMinPadding(0.2);
		yAxis.setMaxPadding(0.2);
		yAxis.setMinRange(60);

		PlotLine plotLine = new PlotLine();
		plotLine.setValue(0);
		plotLine.setWidth(1);
		plotLine.setColor("#808080");
		yAxis.addPlotLine(plotLine);
		
		chart.getLegend().setEnabled(false);
		chart.getExporting().setEnabled(false);
		
		chart.getPlotOptions().getSeries().setLineWidth(1);
		
		chart.getSeries().addPoint(20, 20);
		chart.getSeries().addPoint(80, 80);
	}
	
	@Listen("onClick = #chart")
	public void addPoint(ChartsClickEvent event) {
		chart.getSeries().addPoint(event.getXAxis(), event.getYAxis());
	}
	
	@Listen("onPlotClick = #chart")
	public void removePoint(ChartsEvent event) {
		event.getPoint().remove();
	}
}