Create your first ZK Charts
From Documentation
Revision as of 03:08, 5 March 2014 by Raymondchao (talk | contribs)
In the section we will show how to create your first ZK Chart step by step.
First, declare a chart component in zul file, and assign to ```type``` and ```title``` properties to it.
<charts id="chart" type="line" title="Season Average Temperature" />
Then give some additional settings in composer:
// Add "°C" to value in tooltip
chart.getTooltip().setValueSuffix("°C");
Legend legend = chart.getLegend();
// Set lengend's layout and alignment
legend.setLayout("vertical");
legend.setAlign("right");
legend.setVerticalAlign("middle");
// Set lenged's border width to 0
legend.setBorderWidth(0);
There has many ways to And we can specify chart data with model:
CategoryModel model = new SimpleCategoryModel();
model.setValue("Tokyo", "Spring", new Integer(11));
model.setValue("Tokyo", "Summer", new Integer(20));
model.setValue("Tokyo", "Fall", new Integer(16));
model.setValue("Tokyo", "Winter", new Integer(9));
model.setValue("New York", "Spring", new Integer(6));
model.setValue("New York", "Summer", new Integer(14));
model.setValue("New York", "Fall", new Integer(8));
model.setValue("New York", "Winter", new Integer(2));
chart.setModel(model);
< Get Complete Source Code of This Book >