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



<window apply="demo.line.SplineSymbolsComposer">
	<charts id="chart" type="spline"
		title="Monthly Average Temperature"/>
</window>

package demo.line;

import org.zkoss.chart.Tooltip;
import org.zkoss.chart.XAxis;
import org.zkoss.chart.YAxis;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Marker;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;


public class SplineSymbolsComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);

		chart.setSubtitle("Source: " +
				"<a href=\"https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature\" " +
				"target=\"_blank\">Wikipedia.com</a>");
		XAxis xAxis = chart.getXAxis();
		xAxis.setCategories("Jan", "Feb", "Mar", "Apr", "May",
				"Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
		xAxis.getAccessibility().setDescription("Months of the year");

		YAxis yAxis = chart.getYAxis();
		yAxis.setTitle("Temperature");
		yAxis.getLabels().setFormat("{value}°");

		Tooltip tooltip = chart.getTooltip();
		tooltip.setShared(true);
		tooltip.setCrosshairs(true);
		
		Marker marker = chart.getPlotOptions().getSpline().getMarker();
		marker.setRadius(4);
		marker.setLineColor("#666666");
		marker.setLineWidth(1);
		
		Series series1 = chart.getSeries();
		series1.setName("Tokyo");
		series1.getMarker().setSymbol("square");
		series1.addPoint(5.2);
		series1.addPoint(5.7);
		series1.addPoint(8.7);
		series1.addPoint(13.9);
		series1.addPoint(18.2);
		series1.addPoint(21.4);
		series1.addPoint(25.0);
		Point sun = new Point(26.4);
		sun.getMarker().setSymbol(
			"url(https://www.highcharts.com/samples/graphics/sun.png)");
		sun.getAccessibility().setDescription("Sunny symbol, this is the warmest point in the chart.");

		series1.addPoint(sun);
		series1.addPoint(22.8);
		series1.addPoint(17.5);
		series1.addPoint(12.1);
		series1.addPoint(7.6);
		
		Series series2 = chart.getSeries(1);
		series2.setName("Bergen");
		series2.getMarker().setSymbol("diamond");
		Point snow = new Point(1.5);
		snow.getMarker().setSymbol(
			"url(https://www.highcharts.com/samples/graphics/snow.png)");
		snow.getAccessibility().setDescription("Snowy symbol, this is the coldest point in the chart.");
		series2.addPoint(snow);
		series2.addPoint(1.6);
		series2.addPoint(3.3);
		series2.addPoint(5.9);
		series2.addPoint(10.5);
		series2.addPoint(13.5);
		series2.addPoint(14.5);
		series2.addPoint(14.4);
		series2.addPoint(11.5);
		series2.addPoint(8.7);
		series2.addPoint(4.7);
		series2.addPoint(2.6);
	}
}