A simple example of a line chart.
Using ZK's engine, users can easily customize the line, points and color of chart.

<vlayout apply="org.zkoss.bind.BindComposer" 
	viewModel="@id('vm') @init('demo.chart.line.LineChartVM')">
	<chart id="chart" title="Half-Year Report" width="520" height="350" paneColor="#FFFFFF"
		type="line" yAxis="Amount"
		model="@bind(vm.model)" engine="@bind(vm.engine)" threeD="@bind(vm.threeD)"
		onClick="@command('showMessage',msg=event.areaComponent.tooltiptext)"/>
	<hlayout visible="@bind(not empty vm.message)">
		You clicked on :<label value="@bind(vm.message)"/>
	</hlayout>
</vlayout>

<vlayout apply="org.zkoss.bind.BindComposer" 
	viewModel="@id('vm') @init('demo.chart.line.LineChartConfigVM')">
	<checkbox label="Toggle 3D Chart" 
		checked="@bind(vm.threeD)" 
		onCheck="@global-command('configChanged',threeD=vm.threeD,showLine=vm.showLine,showShape=vm.showShape)"/>
	<checkbox label="Show Line Shape" 
		checked="@bind(vm.showShape)" visible="@bind(not vm.threeD)"
		onCheck="@global-command('configChanged',showShape=vm.showShape)"/>		
	<checkbox label="Show Lines (Actual, Establishment)" 
		checked="@bind(vm.showLine)" visible="@bind(not vm.threeD)"
		onCheck="@global-command('configChanged',showLine=vm.showLine)"/>
	<vlayout spacing="5px" visible="@bind(not vm.threeD)" >
		Line Width : 
		<spinner constraint="no negative,no zero,no empty,min 1, max 10" width="100px" instant="true" 
			value="@bind(vm.width)"
			onChange="@global-command('configChanged',width=vm.width)"/>
	</vlayout>
</vlayout>

package demo.chart.line;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zul.CategoryModel;

public class LineChartVM {

	CategoryModel model;
	LineChartEngine engine;
	String message;
	
	boolean threeD;

	@Init
	public void init() {
		engine = new LineChartEngine();
		model = ChartData.getModel();
	}

	public LineChartEngine getEngine() {
		return engine;
	}

	public CategoryModel getModel() {
		return model;
	}
	
	public String getMessage() {
		return message;
	}

	public boolean isThreeD() {
		return threeD;
	}

	@Command("showMessage") 
	@NotifyChange("message")
	public void onShowMessage(
			@BindingParam("msg") String message){
		this.message = message;
	}
	
	@GlobalCommand("configChanged") 
	@NotifyChange({"threeD","engine"})
	public void onConfigChanged(
			@BindingParam("threeD") Boolean threeD,
			@BindingParam("showLine") Boolean showLine,
			@BindingParam("showShape") Boolean showShape,
			@BindingParam("width") Integer width){
		if (threeD != null) {
			this.threeD = threeD;
		}

		if (showLine != null) {
			engine.setShowLine(showLine);
		}

		if (showShape != null) {
			engine.setShowShape(showShape);
		}

		if (width != null) {
			engine.setWidth(width);
		}
	}
}

package demo.chart.line;

public class LineChartConfigVM {

	boolean threeD = false;
	boolean showLine = true;
	boolean showShape = true;
	int width = 2;

	public boolean isThreeD() {
		return threeD;
	}

	public void setThreeD(boolean threeD) {
		this.threeD = threeD;
	}

	public int getWidth() {
		return width;
	}

	public void setWidth(int width) {
		this.width = width;
	}

	public boolean isShowLine() {
		return showLine;
	}

	public void setShowLine(boolean showLine) {
		this.showLine = showLine;
	}

	public boolean isShowShape() {
		return showShape;
	}

	public void setShowShape(boolean showShape) {
		this.showShape = showShape;
	}

}

package demo.chart.line;

import java.awt.BasicStroke;

import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.renderer.category.LineAndShapeRenderer;
import org.zkoss.zkex.zul.impl.JFreeChartEngine;
import org.zkoss.zul.Chart;

import demo.chart.ChartColors;

/*
 * you are able to do many advanced chart customization by extending ChartEngine
 */
public class LineChartEngine extends JFreeChartEngine {

	public int width = 2;
	public boolean showLine = true;
	public boolean showShape = true;

	public boolean prepareJFreeChart(JFreeChart jfchart, Chart chart) {
		LineAndShapeRenderer renderer = (LineAndShapeRenderer) ((CategoryPlot) jfchart.getPlot()).getRenderer();
		renderer.setSeriesStroke(0, new BasicStroke(width));
		renderer.setSeriesStroke(1, new BasicStroke(width));
		renderer.setSeriesStroke(2, new BasicStroke(width));

		renderer.setSeriesLinesVisible(0, chart.isThreeD());
		renderer.setSeriesLinesVisible(1, showLine);
		renderer.setSeriesLinesVisible(2, showLine);

		renderer.setSeriesShapesVisible(0, showShape);
		renderer.setSeriesShapesVisible(1, showShape);
		renderer.setSeriesShapesVisible(2, showShape);
		
		renderer.setSeriesPaint(0, ChartColors.COLOR_1);
		renderer.setSeriesPaint(1, ChartColors.COLOR_2);
		renderer.setSeriesPaint(2, ChartColors.COLOR_3);
		return false;
	}

	public void setWidth(int width) {
		this.width = width;
	}

	public void setShowLine(boolean showLine) {
		this.showLine = showLine;
	}

	public void setShowShape(boolean showShape) {
		this.showShape = showShape;
	}
}

package demo.chart.line;

import org.zkoss.zul.CategoryModel;
import org.zkoss.zul.SimpleCategoryModel;

public class ChartData {
	
	public static CategoryModel getModel() {
		CategoryModel model = new SimpleCategoryModel();
		String[] category = { "Predict", "Actual", "Establishment" };
		model.setValue(category[0], "Jan", new Integer(25));
		model.setValue(category[0], "Feb", new Integer(35));
		model.setValue(category[0], "Mar", new Integer(45));
		model.setValue(category[0], "Apr", new Integer(48));
		model.setValue(category[0], "May", new Integer(53));
		model.setValue(category[0], "Jun", new Integer(62));

		model.setValue(category[1], "Jan", new Integer(28));
		model.setValue(category[1], "Feb", new Integer(33));
		model.setValue(category[1], "Mar", new Integer(40));
		model.setValue(category[1], "Apr", new Integer(53));
		model.setValue(category[1], "May", new Integer(58));
		model.setValue(category[1], "Jun", new Integer(75));

		model.setValue(category[2], "Jan", new Integer(40));
		model.setValue(category[2], "Feb", new Integer(55));
		model.setValue(category[2], "Mar", new Integer(65));
		model.setValue(category[2], "Apr", new Integer(57));
		model.setValue(category[2], "May", new Integer(63));
		model.setValue(category[2], "Jun", new Integer(68));
		return model;
	}
}

package demo.chart;

import java.awt.Color;

import org.apache.commons.lang.StringUtils;

public class ChartColors {
	//main colors
	public static Color COLOR_1 = new Color(0x3E454C);
	public static Color COLOR_2 = new Color(0x2185C5);
	public static Color COLOR_3 = new Color(0x7ECEFD);
	public static Color COLOR_4 = new Color(0xFFF6E5);
	public static Color COLOR_5 = new Color(0xFF7F66);
	//additional colors
	public static Color COLOR_6 = new Color(0x98D9FF);
	public static Color COLOR_7 = new Color(0x4689B1);
	public static Color COLOR_8 = new Color(0xB17C35);
	public static Color COLOR_9 = new Color(0xFDC77E);
	
	public static String toHtmlColor(Color color) {
		return "#" + toHexColor(color);
	}

	public static String toHexColor(Color color) {
		return StringUtils.leftPad(Integer.toHexString(color.getRGB() & 0xFFFFFF), 6, '0');
	}
	
}