<window apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('pkg$.TestVM')">
    <charts onCreate="@command('initChart', chart=self)"
        zoomType="xy"
        title="Temperature vs Rainfall"
        model="@load(vm.model)" />      
</window>

package pkg$;

import org.zkoss.bind.annotation.*;
import org.zkoss.chart.*;
import org.zkoss.chart.model.*;

public class TestVM {

    @Command
    public void initChart(@BindingParam("chart") Charts chart) {        
        chart.getXAxis()
            .setCategories(
                "Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
        
        // Primary y Axis
        YAxis yAxis = chart.getYAxis();
        yAxis.getLabels().setFormat("{value}°C");
        yAxis.getLabels().setStyle("color: '#89A54E'");
        yAxis.setTitle("Temperature");
        yAxis.getTitle().setStyle("color: '#89A54E'");
        
        Series temp = chart.getSeries();
        temp.setName("Temperature");
        temp.setColor("#89A54E");
        temp.setType("spline");
        temp.getPlotOptions()
            .getTooltip()
            .setPointFormat("<span style=\"font-weight: bold;" +
            "color: {series.color}\">{series.name}</span>: <b>{point.y:.1f}°C</b>");
        
        Series error = chart.getSeries(1);
        error.setName("Temperature error");
        error.setType("errorbar");
        error.getPlotOptions()
            .getTooltip()
            .setPointFormat("(error range: {point.low}-{point.high}°C)<br/>");        
    }
    
    public ChartsModel getModel() {
        XYModel model = new DefaultXYModel();
        model.setAutoSort(false);
               
        // Temperature
        model.addValue("Temperature", 0.0, 7.0);
        model.addValue("Temperature", 1.0, 6.9);
        model.addValue("Temperature", 2.0, 9.5);
        model.addValue("Temperature", 3.0, 14.5);
        model.addValue("Temperature", 4.0, 18.2);
        model.addValue("Temperature", 5.0, 21.5);
        model.addValue("Temperature", 6.0, 25.2);
        model.addValue("Temperature", 7.0, 26.5);
        model.addValue("Temperature", 8.0, 23.3);
        model.addValue("Temperature", 9.0, 18.3);
        model.addValue("Temperature", 10.0, 13.9);
        model.addValue("Temperature", 11.0, 9.6);

        // Temperature error
        model.addValue("Temperature error", 6.0, 8.0);      // x = low point, y = high point
        model.addValue("Temperature error", 5.9, 7.6);
        model.addValue("Temperature error", 9.4, 10.4);
        model.addValue("Temperature error", 14.1, 15.9);
        model.addValue("Temperature error", 18.0, 20.1);
        model.addValue("Temperature error", 21.0, 24.0);
        model.addValue("Temperature error", 23.2, 25.3);
        model.addValue("Temperature error", 26.1, 27.8);
        model.addValue("Temperature error", 23.2, 23.9);    // x duplicated, earlier entry overwritten
        model.addValue("Temperature error", 18.0, 21.1);    // x duplicated, earlier entry overwritten
        model.addValue("Temperature error", 12.9, 14.0);
        model.addValue("Temperature error", 7.6, 10.0);
        
        return model;
    }

}