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


<window apply="demo.line.LineBasicComposer">
	<charts id="chart" type="line" title="U.S Solar Employment Growth by Job Category, 2010-2020" />
</window>

package demo.line;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Legend;
import org.zkoss.chart.PlotLine;
import org.zkoss.chart.Responsive;
import org.zkoss.chart.Series;
import org.zkoss.chart.plotOptions.SeriesPlotOptions;
import org.zkoss.zk.ui.Execution;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;

public class LineBasicComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;

	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
		// Enable series-label features for this demo
		Executions.getCurrent().setAttribute("charts.modules.seriesLabel", "true");

		chart.setSubtitle("Source: <a href=\"https://irecusa.org/programs/solar-jobs-census/\" target=\"_blank\">IREC</a>");

		int[] index = new int[] {0};
		LineBasicData.getData().forEach((k, v) -> {
			Series series = chart.getSeries(index[0]++);
			series.setName(k);
			series.setData(v);
		});

		chart.getXAxis().getAccessibility().setRangeDescription("Range: 2010 to 2020");

		chart.getYAxis().setTitle("Number of Employees");

		Legend legend = chart.getLegend();
		legend.setLayout("vertical");
		legend.setAlign("right");
		legend.setVerticalAlign("middle");

		SeriesPlotOptions series = chart.getPlotOptions().getSeries();
		series.getLabel().setConnectorAllowed(false);
		series.setPointStart(2010);

		Responsive responsive = chart.getResponsive();
		Responsive.Rule rule = new Responsive.Rule();
		rule.getCondition().setMaxWidth(500);
		Legend legend1 = rule.getChartOptions().getLegend();
		legend1.setLayout("horizontal");
		legend1.setAlign("center");
		legend1.setVerticalAlign("bottom");
		responsive.addRule(rule);
	}
}

package demo.line;

import java.util.HashMap;
import java.util.LinkedHashMap;
import java.util.Map;

import org.zkoss.chart.model.CategoryModel;
import org.zkoss.chart.model.DefaultCategoryModel;


public class LineBasicData {
	private static Map<String, Integer[]> data;
	static {
		data = new LinkedHashMap<>();
		data.put("Installation & Developers", new Integer[] {
				43934, 48656, 65165, 81827, 112143, 142383,
				171533, 165174, 155157, 161454, 154610
		});
		data.put("Manufacturing", new Integer[] {
				24916, 37941, 29742, 29851, 32490, 30282,
				38121, 36885, 33726, 34243, 31050
		});
		data.put("Sales & Distribution", new Integer[] {
				11744, 30000, 16005, 19771, 20185, 24377,
				32147, 30912, 29243, 29213, 25663
		});
		data.put("Operations & Maintenance", new Integer[] {
				null, null, null, null, null, null, null,
				null, 11164, 11218, 10077
		});
		data.put("Other", new Integer[] {
				21908, 5548, 8105, 11248, 8989, 11816, 18274,
				17300, 13053, 11906, 10073
		});
	}
	
	public static Map<String, Integer[]> getData() {
		return data;
	}
}