<zk>
<label multiline="true">
1. Select "line" in select box.
2. Select "bar" in select box.
You can see the plot data increased.
</label>
	<window title="Category Model" border="normal" apply="demo.ctrl.chart.CategoryController" hflex="1" vflex="1">
		<listbox id="chartTypes" mold="select" />
		<charts id="chart" width="600" height="400" />
	</window>
</zk>

public class CategoryController extends SelectorComposer<Window> {

	private static final long serialVersionUID = -4016316513324539800L;

	@Wire
	private Charts chart;
	@Wire
	private Listbox chartTypes;
	private String[] types = new String[] { "line", "spline", "area", "areaspline", "bar", "column", "waterfall" };

	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
		ListModelList<String> typeModel = new ListModelList<String>(Arrays.asList(types));
		chartTypes.setModel(typeModel);
		chartTypes.setItemRenderer(new ListitemRenderer<String>() {
			public void render(Listitem item, String data, int index) throws Exception {
				item.setLabel(data);
			}
		});
	}

	private ChartsModel getModel() {
		CategoryModel model = new DefaultCategoryModel();
		model.setValue("2012", "Q1", 30);
		model.setValue("2012", "Q2", 45);
		model.setValue("2012", "Q3", 22);
		model.setValue("2012", "Q4", 52);
		
		model.setValue("2013", "Q1", 12);
		model.setValue("2013", "Q2", 37);
		model.setValue("2013", "Q3", 55);
		model.setValue("2013", "Q4", 25);
		return model;
	}

	@Listen("onSelect=#chartTypes")
	public void changeChartType(SelectEvent<Listitem, String> event) {
		chart.setType(event.getSelectedObjects().iterator().next());
		chart.setModel(getModel());
	}
}