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



<window apply="demo.area.AreaStackedComposer">
	<charts id="chart" type="area" 
		title="Historic and Estimated Worldwide Population Growth by Region"
		subtitle="Source: Wikipedia.org"/>
</window>

package demo.area;

import org.zkoss.chart.Charts;
import org.zkoss.chart.plotOptions.AreaPlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.CategoryModel;
import org.zkoss.zul.SimpleCategoryModel;
import org.zkoss.zul.Window;


public class AreaStackedComposer extends SelectorComposer<Window> {

    @Wire
    Charts chart;

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

		chart.setModel(AreaStackedData.getCategoryModel());
		
		chart.getXAxis().setTickmarkPlacement("on");
		
		chart.getYAxis().setTitle("Billions");
		chart.getYAxis().getLabels().setFormat("{value}");
		
		chart.getTooltip().setShared(true);
		chart.getTooltip().setValueSuffix(" millions");
		
		AreaPlotOptions plotOptions = chart.getPlotOptions().getArea();
		plotOptions.setStacking("normal");
		plotOptions.setLineColor("#666666");
		plotOptions.setLineWidth(1);
		plotOptions.getMarker().setLineWidth(1);
		plotOptions.getMarker().setLineColor("#666666");
    }
}

package demo.area;

import org.zkoss.chart.model.CategoryModel;
import org.zkoss.chart.model.DefaultCategoryModel;



public class AreaStackedData {
	private static final CategoryModel model;
	static {
		model = new DefaultCategoryModel();
		model.setValue("Asia", "1750", new Integer(502));
		model.setValue("Asia", "1800", new Integer(635));
		model.setValue("Asia", "1850", new Integer(809));
		model.setValue("Asia", "1900", new Integer(947));
		model.setValue("Asia", "1950", new Integer(1402));
		model.setValue("Asia", "1999", new Integer(3634));
		model.setValue("Asia", "2050", new Integer(5268));
		model.setValue("Africa", "1750", new Integer(106));
		model.setValue("Africa", "1800", new Integer(107));
		model.setValue("Africa", "1850", new Integer(111));
		model.setValue("Africa", "1900", new Integer(133));
		model.setValue("Africa", "1950", new Integer(221));
		model.setValue("Africa", "1999", new Integer(767));
		model.setValue("Africa", "2050", new Integer(1766));
		model.setValue("Europe", "1750", new Integer(163));
		model.setValue("Europe", "1800", new Integer(203));
		model.setValue("Europe", "1850", new Integer(276));
		model.setValue("Europe", "1900", new Integer(408));
		model.setValue("Europe", "1950", new Integer(547));
		model.setValue("Europe", "1999", new Integer(729));
		model.setValue("Europe", "2050", new Integer(628));
		model.setValue("America", "1750", new Integer(18));
		model.setValue("America", "1800", new Integer(31));
		model.setValue("America", "1850", new Integer(54));
		model.setValue("America", "1900", new Integer(156));
		model.setValue("America", "1950", new Integer(339));
		model.setValue("America", "1999", new Integer(818));
		model.setValue("America", "2050", new Integer(1201));
		model.setValue("Oceania", "1750", new Integer(2));
		model.setValue("Oceania", "1800", new Integer(2));
		model.setValue("Oceania", "1850", new Integer(2));
		model.setValue("Oceania", "1900", new Integer(6));
		model.setValue("Oceania", "1950", new Integer(13));
		model.setValue("Oceania", "1999", new Integer(30));
		model.setValue("Oceania", "2050", new Integer(46));
	}
	
	public static CategoryModel getCategoryModel() {
		return model;
	}
}