Manipulating Chart Model

From Documentation
Manipulating Chart Model


WarningTriangle-32x32.png 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[1] and MVVM[2], which are both fully supported patterns.

ZK provides chart model [3] 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 method.

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!

ChartMVVM.png

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 >


Last Update : 2014/03/06

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.