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



<window apply="demo.scatter.Bubble3dComposer">
	<charts id="chart" type="bubble" zoomType="xy" plotBorderWidth="1"
		title="Highcharts bubbles with radial gradient fill"/>
</window>

package demo.scatter;

import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.RadialGradient;
import org.zkoss.chart.Series;
import org.zkoss.chart.Theme;
import org.zkoss.chart.ThemeColors;
import org.zkoss.chart.YAxis;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class Bubble3dComposer extends SelectorComposer<Window> {

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

		chart.getXAxis().setGridLineWidth(1);
		chart.getXAxis().getAccessibility().setRangeDescription("Range: 0 to 100.");

		YAxis yAxis = chart.getYAxis();
		yAxis.setStartOnTick(false);
		yAxis.setEndOnTick(false);
		yAxis.getAccessibility().setRangeDescription("Range: 0 to 100.");

		String[] themeColors = ThemeColors.getThemeColors(Theme.DEFAULT);

		RadialGradient radialGradient = new RadialGradient(0.4, 0.3, 0.7);
		radialGradient.setStops("rgba(255,255,255,0.5)", hex2Rgba(themeColors[0], 0.5));
		chart.getSeries().getMarker().setFillColor(radialGradient);
		
		RadialGradient radialGradient2 = new RadialGradient(0.4, 0.3, 0.7);
		radialGradient2.setStops("rgba(255,255,255,0.5)", hex2Rgba(themeColors[1], 0.5));
		chart.getSeries(1).getMarker().setFillColor(radialGradient2);

		int index = 0;
		for (Integer[][] data : Bubble3dData.getData()) {
			Series series = chart.getSeries(index++);

			for (Integer[] value : data) {
				series.addPoint(value[0], value[1], value[2]);
			}
		}

		chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
			public void onEvent(Event event) throws Exception {
				RadialGradient radialGradient0 = new RadialGradient(0.4, 0.3, 0.7);
				RadialGradient radialGradient1 = new RadialGradient(0.4, 0.3, 0.7);
				radialGradient0.setStops("rgba(255,255,255,0.5)", hex2Rgba(chart.getColors().get(0).stringValue(), 0.5));
				radialGradient1.setStops("rgba(255,255,255,0.5)", hex2Rgba(chart.getColors().get(1).stringValue(), 0.5));
				chart.getSeries(0).getMarker().setFillColor(radialGradient0);
				chart.getSeries(1).getMarker().setFillColor(radialGradient1);
	    	}
		});
	}
	
	private String hex2Rgba(String hexColor, double opac) {
		 int r = Integer.valueOf(hexColor.substring( 1, 3 ), 16);
		 int g = Integer.valueOf(hexColor.substring( 3, 5 ), 16);
         int b = Integer.valueOf(hexColor.substring( 5, 7 ), 16);
		return "rgba(" + r + "," + g + "," + b + "," + opac + ")";
	}
}

package demo.scatter;

import org.zkoss.chart.model.DefaultXYZModel;
import org.zkoss.chart.model.XYZModel;


public class Bubble3dData {
	private static Integer[][][] data = {
			{{9, 81, 63}, {98, 5, 89}, {51, 50, 73}, {41, 22, 14}, {58, 24, 20},
					{78, 37, 34}, {55, 56, 53}, {18, 45, 70}, {42, 44, 28},
					{3, 52, 59}, {31, 18, 97}, {79, 91, 63}, {93, 23, 23},
					{44, 83, 22}},
			{{42, 38, 20}, {6, 18, 1}, {1, 93, 55}, {57, 2, 90}, {80, 76, 22},
					{11, 74, 96}, {88, 56, 10}, {30, 47, 49}, {57, 62, 98},
					{4, 16, 16}, {46, 10, 11}, {22, 87, 89}, {57, 91, 82},
					{45, 15, 98}}};

	public static Integer[][][] getData() {
		return data;
	}
}