Beispiel:

Inhalt:

Daten- / Objektstruktur
Beispiel Füllen mit Daten
Chartkonfiguration
- Konfiguration Farben
- Konfiguration Tooltips

Optimale Datenstruktur (Datenbank):

Y-Achse	Kategorie	X-Achse
Beverages	2017	550
Beverages	2018	550

Optimale Objektstruktur (Java):

public class BarChartObject {

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

Beispiel füllen der Daten:

//Erstellen Model und hinzufügen der Kategorien
final ChartModel model = ChartModel.New()
	.addColumn(Column.New(Type.STRING, "year", "Jahr"))
	.addColumn(Column.New(Type.NUMBER, "iphone", "iPhone"))
	.addColumn(Column.New(Type.NUMBER, "android", "Android"));

//Füllen der Items
model.addRow("2014", 1500, 1200);
model.addRow("2015", 805, 700);
model.addRow("2016", 920, 600);
model.addRow("2017", 1250, 1500);

//Setzen des Models
barChart.setModel(model);

Optionen und Properties:

Konfiguration allgemein

Properties

Orientation

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:

this.barChart.setOrientation(Orientation.VERTICAL);

StackMode

The options for isStacked are:

false — elements will not stack. This is the default option.
true — stacks elements for all series at each domain value.
'percent' — stacks elements for all series at each domain value and rescales them such that they add up to 100%, with each element's value calculated as a percentage of 100%.
'relative' — stacks elements for all series at each domain value and rescales them such that they add up to 1, with each element's value calculated as a fraction of 1.
'absolute' — functions the same as isStacked: true.

this.barChart.setStackMode(StackMode.TRUE);

Achsenkonfiguration

Properties

AxisTitlePosition

Where to place the axis titles, compared to the chart area. Supported values:

barChart.setAxisTitlesPosition(AxisTitlesPosition.IN);

HAxis / VAxis

An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here:

Axis haxis= Axis.Builder()
	.slantedText(true)
	.direction(Direction.REVERSE)
	.minorGridlines(GridLines.New("red", 5))
	.format("currency").build();

barChart.setHAxis(haxis);

More detailed information about Axis see: https://developers.google.com/chart/interactive/docs/gallery/barchart#bar-styles

Konfiguration Farben

Properties
colors	The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example:`colors:['red','#004411']`. List<String> colors= Arrays.asList("#FFFFFF", "Red", "#F4g6uz"); barChart.setColors(colors);

Konfiguration von Texten und Legenden siehe API Allgemein

XdevBarChart

Inhalt:

Optimale Datenstruktur (Datenbank):

Optimale Objektstruktur (Java):

Beispiel füllen der Daten:

Optionen und Properties: