Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Inhalt:

Anchor
Data
Data
Optimale Datenstruktur (Datenbank):

BeschriftungX-AxisY-AxisKategorieBubbleGröße
"DEU"68.492.96"Europe"61801570
"GBR"79.661.67"Europe"81902307
"ISR"78.092.78"Middle East"31090763
...



Optimale Objektstruktur (Java)

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
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;
	}
}

Anchor
Fill
Fill
Beispiel: Füllen der Daten

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
XdevBubbleChartModelfinal ChartModel model = new XdevBubbleChartModel("Life ChartModel.New()..addColumn(Column.New(Type.STRING, "bubbletext", "Bubbletext"))
	.addColumn(Column.New(Type.NUMBER, "x-value", "X-Axis"))
	.addColumn(Column.New(Type.NUMBER, "x-value", "Y-Axis"))
	.addColumn(Column.New(Type.STRING, "category", "Rate"Category"))
	.addColumn(Column.New(Type.NUMBER, "Countrybubblesize", "PeopleBubblesize"));

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

API und Methoden:

Füllen der Daten

Code Block
languagejava
themeEclipse
firstline1
titlemodel.addItem(String value, String value2, Integer value3)
linenumberstrue
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

...

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
XdevBubbleChartConfig config = new XdevBubbleChartConfig();

final ChartArea area = new ChartArea();

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

config.setChartArea(area);

...

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
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);

...

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
XdevLineChartConfig config = new XdevLineChartConfig();

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

...

this.bubbleChart.setModel(model);

Anchor
Properties
Properties

API und Methoden:

Properties
SortBubblesBySize

The orientation of the chart. When set to'vertical', rotates the axes of the chart so that (for instance) a column chart becomes a bar chart, and an area chart grows rightward instead of up:

Code Block
languagejava
themeEclipse

...

XdevPieChartConfig config = new XdevPieChartConfig();

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

...

languagejava
themeEclipse
firstline1
linenumberstrue

...

this.barChart.setOrientation(Orientation.VERTICAL);