Inhalt:
...
...
- Beispiel Füllen mit Daten
- Chartkonfiguration
...
550
...
Anchor | ||||
---|---|---|---|---|
|
Beispiel füllen der Daten:
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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, "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 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
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 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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); |
...
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 | ||||
---|---|---|---|---|
|
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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 |
...
language | java |
---|---|
theme | Eclipse |
firstline | 1 |
linenumbers | true |
...
And there are a lot more properties to configure specific series. See LineChart, BarChart, AreaChart, CandlestickChart |