<?xml version="1.0" encoding="UTF-8"?>



<window apply="demo.line.SplineIrregularTimeComposer">
	<charts id="chart" type="spline" title="Snow depth at Vikjafjellet, Norway"
		subtitle="Irregular time data in Highcharts JS"/>
</window>

package demo.line;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Color;
import org.zkoss.chart.Marker;
import org.zkoss.chart.Series;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class SplineIrregularTimeComposer extends SelectorComposer<Window> {

    @Wire
    Charts chart;

    public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.getXAxis().setType("datetime");
		// Don't display the dummy year
		chart.getXAxis().getDateTimeLabelFormats().setMonth("%e. %b");
		chart.getXAxis().getDateTimeLabelFormats().setYear("%b");
		chart.getXAxis().setTitle("Date");

		chart.getYAxis().setTitle("Snow depth (m)");
		chart.getYAxis().setMin(0);

		chart.getTooltip().setHeaderFormat("<b>{series.name}</b><br/>");
		chart.getTooltip().setPointFormat("{point.x:%e. %b}: {point.y:.2f} m");

		Marker marker = chart.getPlotOptions().getSpline().getMarker();
		marker.setSymbol("circle");
		marker.setFillColor("var(--highcharts-background-color, #ffffff)");
		marker.setEnabled(true);
		marker.setRadius(2.5);
		marker.setLineWidth(1);
		marker.setLineColor((Color) null);

		chart.setColors("#6CF", "#39F", "#06C", "#036", "#000");

		Series series1 = chart.getSeries();
		series1.setName("Winter 2021-2022");
		for (Number[] val : SplineIrregularTimeData.getData(0)) {
			series1.addPoint(val[0], val[1]);
		}
		Series series2 = chart.getSeries(1);
		series2.setName("Winter 2022-2023");
		for (Number[] val : SplineIrregularTimeData.getData(1)) {
			series2.addPoint(val[0], val[1]);
		}
		Series series3 = chart.getSeries(2);
		series3.setName("Winter 2023-2024");
		for (Number[] val : SplineIrregularTimeData.getData(2)) {
			series3.addPoint(val[0], val[1]);
		}
    }
}

package demo.line;

import java.time.LocalDate;
import java.time.LocalTime;
import java.time.ZoneId;
import java.time.ZonedDateTime;


public class SplineIrregularTimeData {
	static final Number[][][] data = {
		{
			{getDate(1970, 10,  5), 0},
			{getDate(1970, 10, 12), 0.1},
			{getDate(1970, 10, 21), 0.15},
			{getDate(1970, 10, 22), 0.19},
			{getDate(1970, 10, 27), 0.17},
			{getDate(1970, 10, 30), 0.27},
			{getDate(1970, 11,  2), 0.25},
			{getDate(1970, 11,  4), 0.27},
			{getDate(1970, 11,  5), 0.26},
			{getDate(1970, 11,  6), 0.25},
			{getDate(1970, 11,  7), 0.26},
			{getDate(1970, 11,  8), 0.26},
			{getDate(1970, 11,  9), 0.25},
			{getDate(1970, 11, 10), 0.25},
			{getDate(1970, 11, 11), 0.25},
			{getDate(1970, 11, 12), 0.26},
			{getDate(1970, 11, 22), 0.22},
			{getDate(1970, 11, 23), 0.22},
			{getDate(1970, 11, 24), 0.22},
			{getDate(1970, 11, 25), 0.24},
			{getDate(1970, 11, 26), 0.24},
			{getDate(1970, 11, 27), 0.24},
			{getDate(1970, 11, 28), 0.24},
			{getDate(1970, 11, 29), 0.24},
			{getDate(1970, 11, 30), 0.22},
			{getDate(1970, 11, 31), 0.18},
			{getDate(1971, 0,  1), 0.17},
			{getDate(1971, 0,  2), 0.23},
			{getDate(1971, 0,  9), 0.5},
			{getDate(1971, 0, 10), 0.5},
			{getDate(1971, 0, 11), 0.53},
			{getDate(1971, 0, 12), 0.48},
			{getDate(1971, 0, 13), 0.4},
			{getDate(1971, 0, 17), 0.36},
			{getDate(1971, 0, 22), 0.69},
			{getDate(1971, 0, 23), 0.62},
			{getDate(1971, 0, 29), 0.72},
			{getDate(1971, 1,  2), 0.95},
			{getDate(1971, 1, 10), 1.73},
			{getDate(1971, 1, 15), 1.76},
			{getDate(1971, 1, 26), 2.18},
			{getDate(1971, 2,  2), 2.22},
			{getDate(1971, 2,  6), 2.13},
			{getDate(1971, 2,  8), 2.11},
			{getDate(1971, 2,  9), 2.12},
			{getDate(1971, 2, 10), 2.11},
			{getDate(1971, 2, 11), 2.09},
			{getDate(1971, 2, 12), 2.08},
			{getDate(1971, 2, 13), 2.08},
			{getDate(1971, 2, 14), 2.07},
			{getDate(1971, 2, 15), 2.08},
			{getDate(1971, 2, 17), 2.12},
			{getDate(1971, 2, 18), 2.19},
			{getDate(1971, 2, 21), 2.11},
			{getDate(1971, 2, 24), 2.1},
			{getDate(1971, 2, 27), 1.89},
			{getDate(1971, 2, 30), 1.92},
			{getDate(1971, 3,  3), 1.9},
			{getDate(1971, 3,  6), 1.95},
			{getDate(1971, 3,  9), 1.94},
			{getDate(1971, 3, 12), 2},
			{getDate(1971, 3, 15), 1.9},
			{getDate(1971, 3, 18), 1.84},
			{getDate(1971, 3, 21), 1.75},
			{getDate(1971, 3, 24), 1.69},
			{getDate(1971, 3, 27), 1.64},
			{getDate(1971, 3, 30), 1.64},
			{getDate(1971, 4,  3), 1.58},
			{getDate(1971, 4,  6), 1.52},
			{getDate(1971, 4,  9), 1.43},
			{getDate(1971, 4, 12), 1.42},
			{getDate(1971, 4, 15), 1.37},
			{getDate(1971, 4, 18), 1.26},
			{getDate(1971, 4, 21), 1.11},
			{getDate(1971, 4, 24), 0.92},
			{getDate(1971, 4, 27), 0.75},
			{getDate(1971, 4, 30), 0.55},
			{getDate(1971, 5,  3), 0.35},
			{getDate(1971, 5,  6), 0.21},
			{getDate(1971, 5,  9), 0},
		}, {
			{getDate(1970, 10, 3), 0},
			{getDate(1970, 10, 9), 0},
			{getDate(1970, 10, 12), 0.03},
			{getDate(1970, 10, 15), 0},
			{getDate(1970, 10, 24), 0},
			{getDate(1970, 10, 27), 0.06},
			{getDate(1970, 10, 30), 0.05},
			{getDate(1970, 11, 3), 0.05},
			{getDate(1970, 11, 6), 0.07},
			{getDate(1970, 11, 9), 0.09},
			{getDate(1970, 11, 15), 0.09},
			{getDate(1970, 11, 18), 0.13},
			{getDate(1970, 11, 21), 0.17},
			{getDate(1970, 11, 24), 0.32},
			{getDate(1970, 11, 27), 0.62},
			{getDate(1971, 0, 3), 0.60},
			{getDate(1971, 0, 9), 0.63},
			{getDate(1971, 0, 12), 0.74},
			{getDate(1971, 0, 15), 0.80},
			{getDate(1971, 0, 18), 0.97},
			{getDate(1971, 0, 21), 0.87},
			{getDate(1971, 0, 24), 0.98},
			{getDate(1971, 0, 27), 0.87},
			{getDate(1971, 0, 30), 0.98},
			{getDate(1971, 1, 3), 1.09},
			{getDate(1971, 1, 6), 1.24},
			{getDate(1971, 1, 9), 1.26},
			{getDate(1971, 1, 12), 1.21},
			{getDate(1971, 1, 15), 1.12},
			{getDate(1971, 1, 18), 1.35},
			{getDate(1971, 1, 21), 1.65},
			{getDate(1971, 1, 24), 1.64},
			{getDate(1971, 1, 27), 1.58},
			{getDate(1971, 2, 3), 1.55},
			{getDate(1971, 2, 6), 1.62},
			{getDate(1971, 2, 9), 1.55},
			{getDate(1971, 2, 12), 1.69},
			{getDate(1971, 2, 15), 1.70},
			{getDate(1971, 2, 18), 1.95},
			{getDate(1971, 2, 21), 1.91},
			{getDate(1971, 2, 27), 2.08},
			{getDate(1971, 2, 30), 2.17},
			{getDate(1971, 3, 3), 2.09},
			{getDate(1971, 3, 12), 2.04},
			{getDate(1971, 3, 15), 1.91},
			{getDate(1971, 3, 18), 1.93},
			{getDate(1971, 3, 21), 1.79},
			{getDate(1971, 3, 24), 1.72},
			{getDate(1971, 3, 27), 1.79},
			{getDate(1971, 4, 3), 1.74},
			{getDate(1971, 4, 6), 1.66},
			{getDate(1971, 4, 9), 1.56},
			{getDate(1971, 4, 12), 1.37},
			{getDate(1971, 4, 15), 1.20},
			{getDate(1971, 4, 18), 1.18},
			{getDate(1971, 4, 21), 0.93},
			{getDate(1971, 4, 24), 0.77},
			{getDate(1971, 4, 27), 0.63},
			{getDate(1971, 4, 30), 0.47},
			{getDate(1971, 5, 3), 0.22},
			{getDate(1971, 5, 6), 0.0}
	}, {
			{getDate(1970, 9, 10), 0},
			{getDate(1970, 10, 18), 0.2},
			{getDate(1970, 10, 21), 0.08},
			{getDate(1970, 10, 25), 0.60},
			{getDate(1970, 11, 3), 0.11},
			{getDate(1970, 11, 6), 0.49},
			{getDate(1970, 11, 18), 0.38},
			{getDate(1970, 11, 21), 0.70},
			{getDate(1970, 11, 25), 0.81},
			{getDate(1970, 11, 30), 0.77},
			{getDate(1971, 0, 9), 0.65},
			{getDate(1971, 0, 12), 0.71},
			{getDate(1971, 0, 21), 0.86},
			{getDate(1971, 0, 24), 1.07},
			{getDate(1971, 0, 27), 1.19},
			{getDate(1971, 0, 30), 1.12},
			{getDate(1971, 1, 3), 1.31},
			{getDate(1971, 1, 6), 1.43},
			{getDate(1971, 1, 9), 1.33},
			{getDate(1971, 1, 12), 1.41},
			{getDate(1971, 1, 15), 1.49},
			{getDate(1971, 1, 18), 1.46},
			{getDate(1971, 1, 21), 1.55},
			{getDate(1971, 1, 24), 1.58},
			{getDate(1971, 1, 27), 1.61},
			{getDate(1971, 2, 3), 1.80},
			{getDate(1971, 2, 6), 1.64},
			{getDate(1971, 2, 15), 1.66},
			{getDate(1971, 2, 16), 1.91},
			{getDate(1971, 2, 21), 1.86},
			{getDate(1971, 2, 23), 2.08},
			{getDate(1971, 2, 31), 2.01},
			{getDate(1971, 3, 11), 1.86},
			{getDate(1971, 3, 15), 1.82},
			{getDate(1971, 3, 19), 1.81},
			{getDate(1971, 3, 25), 1.79},
			{getDate(1971, 4, 5), 1.43},
			{getDate(1971, 4, 8), 1.13},
			{getDate(1971, 4, 12), 0.98},
			{getDate(1971, 4, 15), 0.71},
			{getDate(1971, 4, 18), 0.50},
			{getDate(1971, 4, 21), 0.28},
			{getDate(1971, 4, 24), 0.09},
			{getDate(1971, 4, 25), 0.0}
	}
    };

	static Number[][] getData(int index) {
		return data[index];
	}

	static Number getDate(int year, int month, int date) {
		return ZonedDateTime.of(LocalDate.of(year, month + 1, date), LocalTime.MIN,
				ZoneId.of("UTC")).toInstant().toEpochMilli();
	}
}