Inhalt:

...

Beispiel Füllen mit Daten
Chartkonfiguration
Konfiguration Linie und Punkte
Konfiguration Chartgröße
Konfiguration Farben
Konfiguration Texte
Konfiguration Tooltips Properties

Anchor

...

Fill

...

550

...

Fill

Beispiel füllen der Daten:

Code Block

language	java
theme	Eclipse
firstline	1
linenumbers	true

public//Each classcombochart ComboChartObjectneeds {a basic 	private String yvalue;
	private String category;
	private Integer xvalue;

	public String getYvalue() {
		return this.yvalue;
	}

	public void setYvalue(final String yvalue) {
		this.yvalue = yvalue;
	}

	public String getCategory() {
		return this.category;
	}

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

	public Integer getXvalue() {
		return this.xvalue;
	}

	public void setXvalue(final Integer xvalue) {
		this.xvalue = xvalue;
	}
}

...

Code Block

language	java
theme	Eclipse
firstline	1
linenumbers	true

//Erstellen Model und hinzufügen der Kategorien
final XdevComboChartModel model = new XdevComboChartModel();
model.addCategory("2017");
model.addCategory("2018");
 
//Füllen der Items
model.addItem("Beverages", "2017", 560);
model.addItem("Beverages", "2018", 560);
 
model.addItem("Condiments", "2017", 530);
model.addItem("Condiments", "2018", 530);
 
//Setzen des Models
comboChart.setModel(model);

API und Methoden:

Füllen und Definieren der Kategorien

Code Block

language	java
theme	Eclipse
firstline	1
title	model.addCategory(String value);
linenumbers	true

XdevComboChartModel model = new XdevComboChartModel();

//Definieren einer Serie
final XdevSeries serie2016 = new XdevSeries();

ser1.setColor("Blue"); //Farbe des Charts wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")
ser1.setLineWidth(2); //Wahl der Linienbreite in Pixel
ser1.setPointSize(5); //Wahl der Punktgröße in Pixel
ser1.setType("line"); //Auswahl des Charttypes möglich ist: "line","bars","area","steppedArea"
ser1.setVisibleInLegend(true); //Auswahl, ob dieser Serie in der Legende angezeigt werden soll. Default Ja.

model.addCategory("2017", null);
model.addCategory("2018", null);
model.addCategory("2016", serie2016);

//Parameter 1 ("2017"): Definiert die Beschriftung und wird als Mapping Parameter und Gruppierung verwendet wird
//Parameter 2 ("null" oder XdevSeries: ser1): Definiert den Typ und die Konfiguration des Charts. Möglich sind XdevLineChart, XdevAreaChart, XdevSteppedArea und XdevBarChart. Bei NULL wird automatisch ein XdevBarChart gewählt.

Füllen der Daten

Code Block

language	java
theme	Eclipse
firstline	1
title	model.addItem(String value, String value2, Integer value3)
linenumbers	true

model.addItem("Beverages", "2017", 560);

//Parameter 1 ("Beverages"): Wert, welchen in der X-Achse angezeigt werden soll
//Parameter 2 ("2017"): Zuweisung zur jeweiligen vorher festgelegten Kategorie (Kategoriemapping)
//Parameter 3 (560): Wert für die Y-Achse. Zulässige Datentypen: Integer, Double

...

Code Block

language	java
theme	Eclipse
firstline	1
linenumbers	true

final XdevSeries serie2016 = new XdevSeries();

serie2016.setColor("Blue"); //Farbe des Charts wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")
serie2016.setLineWidth(2); //Wahl der Linienbreite in Pixel
serie2016.setPointSize(5); //Größe der Punkte in Pixel
serie2016.setType("line"); //Auswahl des Charttypes möglich ist: "line","bars","area","steppedArea"
serie2016.setVisibleInLegend(true); //Auswahl, ob dieser Serie in der Legende angezeigt werden soll. Default Ja.

serie2016.setCurveType("function"); //Geschwungene Linien ("function") oder gerade Striche ("none")
serie2016.setPointShape(Options.POINTSHAPE_SQUARE); //Form der Punkte. Mögliche Werte: Options.POINTSHAPE_CIRCLE, Options.POINTSHAPE_DIAMOND, Options.POINTSHAPE_POLYGON, Options.POINTSHAPE_SQUARE, Options.POINTSHAPE_STAR, Options.POINTSHAPE_TRIANGLE

//Konfiguration der Linien
List<Integer> places = Arrays.asList(4,4); //Strichformatierung: Bsp: 4,4 --> 4xMinus 4xLeer Bsp: 4,1,5 --> 4xMinus 4xLeer 5xMinus 4xMinus 4xLeer 5xMinus usw., 
serie2016.setLineDashStyle(places);

...

Code Block

language	java
theme	Eclipse
firstline	1
linenumbers	true

XdevComboChartConfig config = new XdevComboChartConfig();

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);

...

Code Block

language	java
theme	Eclipse
firstline	1
linenumbers	true

XdevComboChartConfig config = new XdevComboChartConfig();

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

...

type
//Possible types: SeriesType.BARS, SeriesType.AREA, SeriesType.STEPPED_AREA, SeriesType.LINE, SeriesType.CANDLESTICKS
this.comboChart.setSeriesType(SeriesType.BARS);
//Further an unlimited amount of subseries can be added
//The first parameter "Index", defines the column. In the following case, the "avarage" column.
this.comboChart.addSeries(5, ComboSeries.New(SeriesType.LINE));

final ChartModel model = ChartModel.New()
	.addColumn(Column.New(Type.STRING, "year", "Jahr"))
	.addColumn(Column.New(Type.NUMBER, "bolivia", "Bolivia"))
	.addColumn(Column.New(Type.NUMBER, "ecuador", "Ecuador"))
	.addColumn(Column.New(Type.NUMBER, "madagascar", "Madagascar"))
	.addColumn(Column.New(Type.NUMBER, "papua New Guinea", "Papua New Guinea"))
	.addColumn(Column.New(Type.NUMBER, "rwanda", "Rwanda"))
	.addColumn(Column.New(Type.NUMBER, "average", "Average"));
		
model.addRow("2004/05", 165, 938, 522, 998, 450, 614.6);
model.addRow("2005/06", 135, 1120, 599, 1268, 288, 682);
model.addRow("2006/07", 157, 1167, 587, 807, 397, 623);
model.addRow("2007/08", 139, 1110, 615, 968, 215, 609.4);
model.addRow("2008/09", 136, 691, 629, 1026, 366, 569.6);
 
//Setzen des Models
comboChart.setModel(model);

Anchor
Properties
Properties

API und Methoden:

...

Properties

Series Configuration

As mentioned above a series is like a native Bar-, Line-, Area-, SteppedArea- or CandlestickChart. Because of this they have the same posibilities form configuration. Here an example:

Code Block

language	java
theme	Eclipse

...

ComboSeries series =

...

ComboSeries.Builder()

...

areaOpacity(0.

...

5)

...

language	java
theme	Eclipse
firstline	1
linenumbers	true

...


	.color("red")
	.curveType(CurveType.FUNCTION)
	.labelInLegend(true)
	.lineDashStyle(Arrays.asList(4,4,4))
	.lineWidth(5)
	.build();

this.comboChart.addSeries(5, series);

And there are a lot more properties to configure specific series. See LineChart, BarChart, AreaChart, CandlestickChart

Versions Compared

Old Version 6

New Version Current

Key

Inhalt:

Beispiel Füllen mit Daten
Chartkonfiguration
Konfiguration Linie und Punkte
Konfiguration Chartgröße
Konfiguration Farben
Konfiguration Texte
Konfiguration Tooltips Properties

Anchor

Fill

Fill

Beispiel füllen der Daten:

API und Methoden:

Anchor
Properties
Properties

API und Methoden:

Page Comparison

Versions Compared

Old Version 6

New Version Current

Key

Inhalt:

Beispiel Füllen mit DatenChartkonfigurationKonfiguration Linie und PunkteKonfiguration ChartgrößeKonfiguration FarbenKonfiguration TexteKonfiguration TooltipsProperties

Anchor

Fill

Fill

Beispiel füllen der Daten:

API und Methoden:

AnchorPropertiesProperties

API und Methoden:

Beispiel Füllen mit Daten
Chartkonfiguration
Konfiguration Linie und Punkte
Konfiguration Chartgröße
Konfiguration Farben
Konfiguration Texte
Konfiguration Tooltips Properties

Anchor
Properties
Properties