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"/>