Versions Compared

Key

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

Inhalt:

Anchor
Data
Data
Optimale Datenstruktur (Datenbank):

KategorieY-AchseX-Achse
Beverages2017

550

Beverages2018540
Condiments2017350
...

Optimale Objektstruktur (Java):

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
public class ComboChartObject {

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


Anchor
Fill
Fill
Beispiel füllen der Daten:

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
final ChartModel model = ChartModel.New()
	.addColumn(Column.New(Type.STRING, "year", "Jahr"))
	.addColumn(Column.New(Type.NUMBER, "salesbolivia", "VerkäufeBolivia"))
	.addColumn(Column.New(Type.NUMBER, "customerecuador", "KundenEcuador"));
		
model.addRow("2014", 1500, 450);
model.addRow("2015", 805, 685);
model.addRow("2016", 920, 980);
model.addRow("2017", 1250, 520);
 
//Setzen des Models
comboChart.setModel(model);

API und Methoden:

Füllen und Definieren der Kategorien

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

...

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

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

...

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
Tooltip tooltip = new Tooltip();

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

config.setTooltip(tooltip);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

The shape of individual data elements: 'circle', 'triangle', 'square', 'diamond', 'star', or 'polygon'.


lineChart.setPointShape(PointShape.New(PointShape.Type.CIRCLE));


For detailed informations see: https://developers.google.com/chart/interactive/docs/points