ZK Charts Essentials/Getting Started with ZK Charts/Create your first ZK Charts

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

In the section we will show how to create your first ZK Charts component step by step.

First, declare a chart component in zul file, and assign 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 >