Inhalt:
- Daten- / Objektstruktur
- Füllen von Daten
- Chartkonfiguration
Optimale Datenstruktur (Datenbank):
Beschriftung | min | max | open | close |
---|---|---|---|---|
"Mon" | 5 | 10 | 7 | 8 |
"Tue" | 5 | 10 | 8 | 7 |
"Wen" | 6 | 12 | 7 | 11 |
"Thu" | 7 | 13 | 11 | 9 |
"Fri" | 7 | 13 | 9 | 13 |
Optimale Objektstruktur (Java)
public class CandlestickChartObject { private String caption; private Double min; private Double max; private Double open; private Double close; public String getCaption() { return this.caption; } public void setCaption(final String caption) { this.caption = caption; } public Double getMin() { return this.min; } public void setMin(final Double min) { this.min = min; } public Double getMax() { return this.max; } public void setMax(final Double max) { this.max = max; } public Double getOpen() { return this.open; } public void setOpen(final Double open) { this.open = open; } public Double getClose() { return this.close; } public void setClose(final Double close) { this.close = close; } }
Beispiel: Füllen der Daten
XdevBubbleChartModel model = new XdevBubbleChartModel("Life", "Rate", "Country", "People"); model.addItem("CAN", 80.66, 1.67, "North America", 33739900d); model.addItem("GBR", 79.84, 1.36, "Europe", 81902307d); model.addItem("USA", 72.73, 1.84, "North America", 5523095d); model.addItem("IRN", 80.05, 4.77, "Middle East", 79716203d); model.addItem("DEU", 68.09, 2.96, "Europe", 61801570d); model.addItem("RUS", 81.55, 2.05, "Europe", 73137148d); model.addItem("ISR", 78.09, 2.78, "Middle East", 31090763d);
API und Methoden:
Füllen der Daten
model.addItem(String value, String value2, Integer value3)
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
Positionierung und Größe des Pie innerhalb des Chartbereichs
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);
Konfiguration der Bubbles
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);
Konfiguration Farben
XdevBubbleChartConfig config = new XdevBubbleChartConfig(); 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
Konfiguration Texte
XdevBubbleChartConfig config = new XdevBubbleChartConfig(); 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
Konfiguration des Tooltips und wann er angezeigt werden soll
Tooltip tooltip = new Tooltip(); tooltip.setisHtml(true); //Tooltip per HTML Konfigurierbar Ja / Nein tooltip.setTrigger("focus"); Mögliche Werte: "focus" --> MouseOver, "none" --> kein Tooltip, "selektion" --> MouseKlick config.setTooltip(tooltip);