ZK Charts Essentials/Working with ZK Charts/Manipulating Chart Model

This page is under construction, so we cannot guarantee the accuracy of the content!

Manipulating Model

Models are the perfect way for developers to interact with the charts as they shield developers from complexities that they need not know or interact with. In addition to this ZK model support many design patterns including MVC and MVVM, which are both fully supported patterns.

ZK provides chart model to handle data in chart. Manipulating chart model with chart is the same as other ZK components handling their supporting models. We've used MVC approach to create the chart in previous section - Create your first ZK Charts. In the section, we will create another example to manipulate chart model in MVVM approach.

We get started from creating an XYModel and put the data we want to handle:

ChartData.java

public class ChartData {

    static public XYModel getXYModel() {
        // Use the predefined implementation SimpleXYModel to create an model.
        XYModel model = new SimpleXYModel();

        model.addValue("2001", new Integer(20), new Integer(120));
        model.addValue("2001", new Integer(40), new Integer(135));
        model.addValue("2001", new Integer(60), new Integer(140));
        model.addValue("2001", new Integer(80), new Integer(160));
		 
        model.addValue("2002", new Integer(30), new Integer(120));
        model.addValue("2002", new Integer(50), new Integer(135));
        model.addValue("2002", new Integer(70), new Integer(140));
        model.addValue("2002", new Integer(90), new Integer(160));

        return model;
    }
}

Declare a POJO VM as well as the property's getter methods.

ChartVM.java

public class ChartVM {

    public XYModel getModel() {
        return ChartData.getXYModel();
    }
}

Reference the ViewModel in ZUL:

chart.zul

<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('ChartVM')">
    <charts type="bar" model="@bind(vm.model)" />
</window>

Enjoy the presentation!

Supported Model

Type	Model
line	CategoryModel or XYModel
spline	CategoryModel or XYModel
area	CategoryModel or XYModel
areaspline	CategoryModel or XYModel
arearange	XYZModel
areasplinerange	XYZModel
bar	CategoryModel or XYModel
column	CategoryModel or XYModel
pie	SingleValueCategoryModel
scatter	XYModel
bubble	XYModel or XYZModel
gauge	DialModel
polar	XYModel
errorbar	XYModel
waterfall	CategoryModel or XYModel
funnel	SingleValueCategoryModel

The exmaple of chart model can be found in Chart Example.

References

< Get Complete Source Code of This Book >