Here we describe how to implement a chart model (org.zkoss.zul.ChartModel). For the concept of component, model and render, please refer to the Model-driven Display section.

Depending on the type of chart you want, you could implement one of org.zkoss.zul.PieModel, org.zkoss.zul.XYModel, org.zkoss.zul.GanttModel, org.zkoss.zul.HiLoModel, etc. In addition, there are default implementations for them you could use directly, such as org.zkoss.zul.SimplePieModel, org.zkoss.zul.SimpleXYModel, etc.

For example, we could have a composer as follows.

public class ProgrammerModelComposer extends SelectorComposer<Component> {
    public void doAfterCompose(Component comp) throws Exception {
        PieModel piemodel = new SimplePieModel();
        piemodel.setValue("C/C++", new Double(12.5));
        piemodel.setValue("Java", new Double(50.2));
        piemodel.setValue("VB", new Double(20.5));
        piemodel.setValue("PHP", new Double(15.5));
        ((Chart) comp).setModel(piemodel);
    }
}

Then, you could use it in a ZUML document:

<chart title="Pie Chart" width="500" height="250" type="pie" threeD="false" fgAlpha="128"
 apply="foo.ProgrammerModelComposer"/>