Create your first ZK Charts"
From Documentation
Raymondchao (talk | contribs) |
Raymondchao (talk | contribs) |
||
Line 23: | Line 23: | ||
super.doAfterCompose(comp); | super.doAfterCompose(comp); | ||
+ | // Create a simple category model | ||
CategoryModel model = new SimpleCategoryModel(); | CategoryModel model = new SimpleCategoryModel(); | ||
+ | // Add value to the model | ||
model.setValue("Tokyo", "Spring", new Integer(11)); | model.setValue("Tokyo", "Spring", new Integer(11)); | ||
model.setValue("Tokyo", "Summer", new Integer(20)); | model.setValue("Tokyo", "Summer", new Integer(20)); | ||
model.setValue("Tokyo", "Fall", new Integer(16)); | model.setValue("Tokyo", "Fall", new Integer(16)); | ||
− | model.setValue("Tokyo", "Winter", new Integer( | + | model.setValue("Tokyo", "Winter", new Integer(-2)); |
model.setValue("New York", "Spring", new Integer(6)); | model.setValue("New York", "Spring", new Integer(6)); | ||
− | model.setValue("New York", "Summer", new Integer( | + | model.setValue("New York", "Summer", new Integer(12)); |
− | model.setValue("New York", "Fall", new Integer( | + | model.setValue("New York", "Fall", new Integer(10)); |
model.setValue("New York", "Winter", new Integer(2)); | model.setValue("New York", "Winter", new Integer(2)); | ||
+ | // Set model to the chart | ||
chart.setModel(model); | chart.setModel(model); | ||
} | } |
Revision as of 06:50, 5 March 2014
In the section we will show how to create your first ZK Charts component step by step.
First, declare a chart component in a ZUML document. Assign type and title properties to it.
<window apply="ChartComposer">
<charts id="chart" type="line" title="Season Average Temperature" />
</window>
Then specify chart data with model in the composer:
public class ChartComposer extends SelectorComposer<Window> {
@Wire
Charts chart;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
// Create a simple category model
CategoryModel model = new SimpleCategoryModel();
// Add value to the model
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(-2));
model.setValue("New York", "Spring", new Integer(6));
model.setValue("New York", "Summer", new Integer(12));
model.setValue("New York", "Fall", new Integer(10));
model.setValue("New York", "Winter", new Integer(2));
// Set model to the chart
chart.setModel(model);
}
}
After that, you can obtain an amazing chart to visualize your data.
< Get Complete Source Code of This Book >