Inhalt:

Daten- / Objektstruktur
Füllen von Daten
Chartkonfiguration

Optimale Datenstruktur (Datenbank):

Beschriftung	X-Axis	Y-Axis	Kategorie	BubbleGröße
"DEU"	68.49	2.96	"Europe"	61801570
"GBR"	79.66	1.67	"Europe"	81902307
"ISR"	78.09	2.78	"Middle East"	31090763
...

Optimale Objektstruktur (Java)

public class BubbleChartObject {
	private String description;
	private Double x_value;
	private Double y_value;
	private String category;
	private Double bubbleValue;

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public Double getX_value() {
		return x_value;
	}

	public void setX_value(Double x_value) {
		this.x_value = x_value;
	}

	public Double getY_value() {
		return y_value;
	}

	public void setY_value(Double y_value) {
		this.y_value = y_value;
	}

	public String getCategory() {
		return category;
	}

	public void setCategory(String category) {
		this.category = category;
	}

	public Double getBubbleValue() {
		return bubbleValue;
	}

	public void setBubbleValue(Double bubbleValue) {
		this.bubbleValue = bubbleValue;
	}
}

Beispiel: Füllen der Daten

XdevBubbleChartModel model = new XdevBubbleChartModel("Life", "Rate", "Country", "People");

model.addItem("CAN", 80.66, 1.67, "North America", 33739900d);
model.addItem("GBR", 79.84, 1.36, "Europe", 81902307d);
model.addItem("USA", 72.73, 1.84, "North America", 5523095d);
model.addItem("IRN", 80.05, 4.77, "Middle East", 79716203d);
model.addItem("DEU", 68.09, 2.96, "Europe", 61801570d);
model.addItem("RUS", 81.55, 2.05, "Europe", 73137148d);
model.addItem("ISR", 78.09, 2.78, "Middle East", 31090763d);

API und Methoden:

Füllen der Daten

model.addItem(String value, String value2, Integer value3)

model.addItem("CAN", 80.66, 1.67, "North America", 33739900d);

//Parameter 1 ("CAN"): Beschreibung / Beschriftung der Bubbles
//Parameter 2 (80.66): Wert auf der X-Achse
//Parameter 3 (1.67): Wert auf der Y-Achse
//Parameter 4 ("North America"): Kategorie oder Gruppierung
//Parameter 5 (33739900d): Größe der Bubble

Positionierung und Größe des Chart innerhalb des Chartbereichs

XdevBubbleChartConfig config = new XdevBubbleChartConfig();

final ChartArea area = new ChartArea();

area.setHeigth("100"); //Höhe des Chart 
area.setWidth("100"); //Breite des Chart 
area.setLeft("100"); //Abstand des Chart von Links in Pixel
area.setRight("100"); //Abstand des Chart von Links in Pixel
area.setTop("100"); //Abstand des Chart von Links in Pixel

config.setChartArea(area);

Konfiguration der Bubbles

Bubble bubble = new Bubble();

bubble.setOpacity(0.5); //Setzen transparenz der Bubbles. Werte von 0 bis 1
bubble.setStroke("Black"); //Setzen Rahmenfarbe der Bubbles wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")
bubble.setTextStyle(...); //Siehe API Allgemein "TextStyle"

config.setBubble(bubble);

Konfiguration Farben

XdevBubbleChartConfig config = new XdevBubbleChartConfig();

config.setBackgroundColor(...); //Siehe API Allgemein "BackgroundStyle"

//Eine Liste an Farben die dann der Reihe nach an die Kategorien vergeben werden
List<String> places = Arrays.asList("#FFFFFF", "Red", "#F4g6uz");
config.setColors(places); //Zuweisen der Farbliste

Konfiguration Texte

XdevBubbleChartConfig config = new XdevBubbleChartConfig();

config.setLegend(...); //Siehe API Allgemein "LegendOptions"
config.setTitleTextStyle(...); //Siehe API Allgemein "TextStyle"
config.setFontName(""); //Wahl der Schriftart (Schriftart muss vom Browser unterstützt werden)
config.setFontSize(15); //Setzen allgemeine Schriftgröße im Chart
config.setTitle("Sales Overview"); //Setzen ChartTitel

Konfiguration des Tooltips und wann er angezeigt werden soll

Tooltip tooltip = new Tooltip();

tooltip.setisHtml(true); //Tooltip per HTML Konfigurierbar Ja / Nein
tooltip.setTrigger("focus"); Mögliche Werte: "focus" --> MouseOver, "none" --> kein Tooltip, "selektion" --> MouseKlick

config.setTooltip(tooltip);