Description & Source Code

A simple example of a bar chart.
This sample demostrated how to add rotation to category labels.

<vlayout apply="org.zkoss.bind.BindComposer" 
	viewModel="@id('vm') @init('')">
	<chart id="mybarchart" width="520" height="400" 
		fgAlpha="255" paneColor="#ffffff" bgColor="#ffffff" type="bar" 
		threeD="@bind(vm.threeD)" orient="@bind(vm.orient)"
		model="@bind(vm.model)" engine="@bind(vm.engine)"/>
<vlayout apply="org.zkoss.bind.BindComposer">
 	<groupbox closable="false" sclass="z-demo-config">
        <caption label="Type Control" />
            <checkbox label="Toggle 3D Bar Chart" checked="false"
            	onCheck="@global-command('configChanged', threeD=self.checked)"/>
            <checkbox label="Horizontal" checked="true"
            	onCheck="@global-command('configChanged', orient=self.checked?'horizontal':'vertical')"/>

import org.zkoss.bind.annotation.BindingParam;
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 BarChartVM {

	BarChartEngine engine;
	CategoryModel model;
	boolean threeD = false;
	String orient = "horizontal";

	public void init() {
		// prepare chart data
		engine = new BarChartEngine();
		model = ChartData.getModel();

	public BarChartEngine getEngine() {
		return engine;

	public CategoryModel getModel() {
		return model;

	public String getOrient() {
		return orient;

	public boolean isThreeD() {
		return threeD;
	public void onConfigChanged(
			@BindingParam("threeD") Boolean threeD,
			@BindingParam("orient") String orient){
		if(threeD != null){
			this.threeD = threeD;
		if(orient != null){
			this.orient = orient;

import java.util.Calendar;

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

public class ChartData {

	public static CategoryModel getModel(){
		int year = Calendar.getInstance().get(Calendar.YEAR) + 1900;
		CategoryModel model = new SimpleCategoryModel();
		model.setValue(Integer.toString(year - 2), "Q1", new Integer(17));
		model.setValue(Integer.toString(year - 2), "Q2", new Integer(36));
		model.setValue(Integer.toString(year - 2), "Q3", new Integer(39));
		model.setValue(Integer.toString(year - 2), "Q4", new Integer(49));
		model.setValue(Integer.toString(year - 1), "Q1", new Integer(20));
		model.setValue(Integer.toString(year - 1), "Q2", new Integer(35));
		model.setValue(Integer.toString(year - 1), "Q3", new Integer(40));
		model.setValue(Integer.toString(year - 1), "Q4", new Integer(55));
		model.setValue(Integer.toString(year), "Q1", new Integer(40));
		model.setValue(Integer.toString(year), "Q2", new Integer(60));
		model.setValue(Integer.toString(year), "Q3", new Integer(70));
		model.setValue(Integer.toString(year), "Q4", new Integer(90));
		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');