ZK Charts Demo - Ajax Loaded Data, Clickable Points

Processing...

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



<window apply="demo.line.LineAjaxComposer">
	<charts id="chart" title="Daily visits"
		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.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());

		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:,f}");
		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:,f}");
		rightYAxis.setShowFirstLabel(false);
		
		Legend legend = chart.getLegend();
		legend.setAlign("left");
//		legend.setVerticalAlign("bottom");
		legend.setY(20);
		legend.setFloating(true);
		legend.setBorderWidth(0);

		Tooltip tooltip = chart.getTooltip();
		tooltip.setShared(true);
		tooltip.setCrosshairs(true);
		tooltip.setHeaderFormat("{point.key:%A, %b %e, %Y}<br/>");
		
		
		SeriesPlotOptions plotOptions = chart.getPlotData().getPlotOptions().getSeries();
		plotOptions.setCursor("pointer");
		plotOptions.getMarker().setLineWidth(1);
		
		SeriesPlotOptions allVisitsPlotOptions = chart.getSeries().getPlotOptions();
		allVisitsPlotOptions.setLineWidth(4);
		allVisitsPlotOptions.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("Visits", TimeUtil.parse("03-09-2013"), 5691);
		model.addValue("Visits", TimeUtil.parse("03-10-2013"), 5403);
		model.addValue("Visits", TimeUtil.parse("03-11-2013"), 15574);
		model.addValue("Visits", TimeUtil.parse("03-12-2013"), 16211);
		model.addValue("Visits", TimeUtil.parse("03-13-2013"), 16427);
		model.addValue("Visits", TimeUtil.parse("03-14-2013"), 16486);
		model.addValue("Visits", TimeUtil.parse("03-15-2013"), 14737);
		model.addValue("Visits", TimeUtil.parse("03-16-2013"), 5838);
		model.addValue("Visits", TimeUtil.parse("03-17-2013"), 5542);
		model.addValue("Visits", TimeUtil.parse("03-18-2013"), 15560);
		model.addValue("Visits", TimeUtil.parse("03-19-2013"), 18940);
		model.addValue("Visits", TimeUtil.parse("03-20-2013"), 16970);
		model.addValue("Visits", TimeUtil.parse("03-21-2013"), 17580);
		model.addValue("Visits", TimeUtil.parse("03-22-2013"), 17511);
		model.addValue("Visits", TimeUtil.parse("03-23-2013"), 6601);
		model.addValue("Visits", TimeUtil.parse("03-24-2013"), 6158);
		model.addValue("Visits", TimeUtil.parse("03-25-2013"), 17353);
		model.addValue("Visits", TimeUtil.parse("03-26-2013"), 17660);
		model.addValue("Visits", TimeUtil.parse("03-27-2013"), 16921);
		model.addValue("Visits", TimeUtil.parse("03-28-2013"), 15964);
		model.addValue("Visits", TimeUtil.parse("03-29-2013"), 12028);
		model.addValue("Visits", TimeUtil.parse("03-30-2013"), 5835);
		model.addValue("Visits", TimeUtil.parse("03-31-2013"), 4799);
		model.addValue("Visits", TimeUtil.parse("04-01-2013"), 13037);
		model.addValue("Visits", TimeUtil.parse("04-02-2013"), 16976);
		model.addValue("Visits", TimeUtil.parse("04-03-2013"), 17100);
		model.addValue("Visits", TimeUtil.parse("04-04-2013"), 15701);
		model.addValue("Visits", TimeUtil.parse("04-05-2013"), 14378);
		model.addValue("Visits", TimeUtil.parse("04-06-2013"), 5889);
		model.addValue("Visits", TimeUtil.parse("04-07-2013"), 6779);
		model.addValue("Visits", TimeUtil.parse("04-08-2013"), 16068);
		model.addValue("Unique Visitors", TimeUtil.parse("03-09-2013"), 4346);
		model.addValue("Unique Visitors", TimeUtil.parse("03-10-2013"), 4112);
		model.addValue("Unique Visitors", TimeUtil.parse("03-11-2013"), 11356);
		model.addValue("Unique Visitors", TimeUtil.parse("03-12-2013"), 11876);
		model.addValue("Unique Visitors", TimeUtil.parse("03-13-2013"), 11966);
		model.addValue("Unique Visitors", TimeUtil.parse("03-14-2013"), 12086);
		model.addValue("Unique Visitors", TimeUtil.parse("03-15-2013"), 10916);
		model.addValue("Unique Visitors", TimeUtil.parse("03-16-2013"), 4507);
		model.addValue("Unique Visitors", TimeUtil.parse("03-17-2013"), 4202);
		model.addValue("Unique Visitors", TimeUtil.parse("03-18-2013"), 11523);
		model.addValue("Unique Visitors", TimeUtil.parse("03-19-2013"), 14431);
		model.addValue("Unique Visitors", TimeUtil.parse("03-20-2013"), 12599);
		model.addValue("Unique Visitors", TimeUtil.parse("03-21-2013"), 13094);
		model.addValue("Unique Visitors", TimeUtil.parse("03-22-2013"), 13234);
		model.addValue("Unique Visitors", TimeUtil.parse("03-23-2013"), 5213);
		model.addValue("Unique Visitors", TimeUtil.parse("03-24-2013"), 4806);
		model.addValue("Unique Visitors", TimeUtil.parse("03-25-2013"), 12639);
		model.addValue("Unique Visitors", TimeUtil.parse("03-26-2013"), 12768);
		model.addValue("Unique Visitors", TimeUtil.parse("03-27-2013"), 12389);
		model.addValue("Unique Visitors", TimeUtil.parse("03-28-2013"), 11686);
		model.addValue("Unique Visitors", TimeUtil.parse("03-29-2013"), 8891);
		model.addValue("Unique Visitors", TimeUtil.parse("03-30-2013"), 4513);
		model.addValue("Unique Visitors", TimeUtil.parse("03-31-2013"), 3661);
		model.addValue("Unique Visitors", TimeUtil.parse("04-01-2013"), 9503);
		model.addValue("Unique Visitors", TimeUtil.parse("04-02-2013"), 12666);
		model.addValue("Unique Visitors", TimeUtil.parse("04-03-2013"), 12635);
		model.addValue("Unique Visitors", TimeUtil.parse("04-04-2013"), 11394);
		model.addValue("Unique Visitors", TimeUtil.parse("04-05-2013"), 10530);
		model.addValue("Unique Visitors", TimeUtil.parse("04-06-2013"), 4521);
		model.addValue("Unique Visitors", TimeUtil.parse("04-07-2013"), 5109);
		model.addValue("Unique Visitors", TimeUtil.parse("04-08-2013"), 11599);
	}

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