Für Fortgeschrittene: Der Bubblechart

Wie bereits mal angekündigt, swiche ich durchaus gern zwischen meinem Anfängertutorial und sonstigen Infos. Da ich gerade Recherchiere, wie genau Bubblecharts funktionieren und wie ich bei diesen Kategorieachsen hinzufüge, hielt ich es für praktisch, das doch auch direkt zu posten.
Ich möchte also einen Bubblechart benutzen und diesem drei Werte (Höhe, Breite und Kreisradius) zuweisen.

Zuerst einmal erstelle ich einen Standard-Bubblechart in Marke einfach:
Ich füge einen Bubblechart hinzu, setze die x/y/Breite Werte und gebe ihn aus, d.h. Erstellung einer ArrayCollection mit den drei Werten als normale Zahlen, dann beim BubbleChart z.B. folgendes Coding (um die Codingschnipsel zu lesen müsst ihr ggf. draufklicken, das HTML des Blogs lässt kein Coding im Text zu...):Dies funktioniert, wie auf dem ersten Bild gezeigt, einwandfrei.
So jetzt das ganze bitte mit "sinnvolleren" Werten. Ich hätte gerne in der vertikalen Axe %-Angaben und in der horizontalen Monate. Gut, nichts leichter als das. Die vertikale Axe wird als "Linear Axis" definiert und die horizontale als "Category Axis". Für die Kategorien müssen wir aber noch solche bestimmen. Nehmen wir z.B. die Monate Januar bis April. Hierfür wird eine neue ArrayCollection erstellt, die die Monate der x-Axe enthält, damit wir diese der Axe zuweisen können. Auch müssen wir dann in unserer alten ArrayCollection natürlich die x-Werte an die Monate anpassen (dort dürfen sie durchaus doppelt vorkommen, nur wir brauchen die Extra-Collection, wenn wir Doppelwerte haben, sonst können wir auch einfach die vorhandene angeben - je nach Bedarf also).
Ergebnis: Alles sieht so aus, wie wir es gern hätten (vgl. Screenshot 2).
Aber eines fehlt mir persönlich noch - nämlich eine Möglichkeit den einzelnen Bubbles unterschiedliche Namen zu geben. Auch das ist nicht allzu schwer, denn wir können diese selbstständig formattieren, mit sogenannten "DataTipFunctions".
Ich stelle einfach mal das gesamte Coding her und mache alles neue und hierfür notwendige in Fettdruck:
Sooo und das wars für heute. Das Ergebnis seht ihr dann im letzten Bild.

(Tutorial) Flex Builder 3 hab ich - und was mache ich jetzt damit?

Heute ist eine kleine Einführung in den Flex Builder 3 an der Tagesordnung. Alle, die sich diese Entwicklungsumgebung angeschafft haben (ob als Studentenversion oder gekaufte normale Version ist unerheblich) und nicht mit dem SDK arbeiten, dürfen sich jetzt über eine Einführung in die Entwicklungsumgebung freuen. Diejenigen, die mit dem SDK arbeiten muss ich etwas enttäuschen, da dort nur mit MXML und ActionScript entwickelt werden kann und keine nette, grafische Benutzeroberfläche angeboten wird.

Startet nun doch bitte erstmalig euren Flex Builder (falls ihr damit arbeitet, sonst könnt ihr diesen Post mehr oder minder überspringen, da er nur als Einstieg in den Flex Builder gedacht ist).
Oben links in der Ecke drückt ihr bitte auf den kleinen „New“-Button (oder File -> New) und dann auf „MXML-Application“, die Software wird euch sagen, dass ein Wizard euch beim Anlegen eines Projekts helfen wird. Nun folgt ihr einfach den Anweisungen des Wizards. Im ersten Schritt gebt ihr eurem Projekt einen Namen, z.B. „Erste Schritte mit Flex“ und drückt auf „Finish“. Ihr könnt auch den Schritten folgen, aber die dort verwendeten Infos sind für die folgenden Beiträge erst einmal irrelevant. Fertig ist eure Datei.

Ein erster Blick auf die Oberfläche im Flex Builder 3 zeigt die auf dem Bild gezeigte Oberfläche (ohne die farbigen Kästen, die brauche ich nur gleich zur Erklärung). Der Flexbuilder hat zwei "Views", soll heißen zwei verschiedene Ansichten. Auf der einen Seite den auch auf dem Bild abgebildeten "Design-View" und einen Button zum Wechseln auf den "Source View", in dem im Code gearbeitet werden kann. Doch dazu später mehr. Der Design-View dient zum Designen via Drag&Drop und für Einstellungen kleinerer Art, die nicht im Source-View gemacht werden müssen.
In der Mitte habt ihr also eure Ansicht, wie das ganze später groß aussehen soll. Innerhalb des linken, gelben Kastens befindet sich eine Dateiverwaltung, in der ihr eure "MXML-Projekte", d.h. eure Flexprojekte sehen könnt. Im darunterliegenden grünen Kasten werden die vorgefertigten Komponenten angeboten, die ihr verwenden könnt. Diese können einfach per Drag&Drop auf eure Designoberfläche gezogen und somit eingebunden werden. Dann gibt es noch den rechten, blauen Kasten, in dem ihr zu den eingefügen Komponenten Attribute definieren und belegen könnt. Außerdem wird hier eine leichtere Möglichkeit geboten, die Komponenten auf dem Fenster zu arrangieren ohne das ganze mühsam im Code eingeben zu müssen. Zum oberen, roten Kasten komme ich später - hierzu sei jetzt nur soviel gesagt, als dass die "Stages" eine Möglichkeit bieten, Ereignisse auszuführen und z.B. bei Klicks andere Fenster anzuzeigen.
Hiermit kann man also schonmal ein bisschen herumspielen und etwas auseinander nehmen und zusammensetzen.

Als Beispiel nehmen wir uns doch einfach mal eine BarChart-Komponente und platzieren die auf unserem Designview. Diesem Diagramm können wir dann bei seinen Attributen z.B. einen Namen geben (die ID) und ihn z.B. so groß machen wie das gesamte Fenster, indem wir unter "Layout" Breite und Höhe mit 100% vorbesetzen. Was hierbei interessant ist: Man kann sowohl Pixelbeträge (z.B. 100px) eingeben als auch Prozentangaben, sodass das Diagramm immer prozentual an die Fenstergröße angepasst werden kann.
Mmmh… vermutlich wundert ihr euch jetzt, dass schon ein BarChart auf euren Designview vorgezeichnet wurde und dieser schon Angaben enthält, richtig? Das ist einfach nur eine einfache Vorschaufunktion ohne Inhalt. Die richtigen Daten, die ihr selbst später hinzufügen werdet, werden nicht auf dem Vorschaubildschirm angezeigt, sondern erst, wenn eure Datei gespeichert wurde und ihr eine SWF-Datei erzeugt habt.

Am besten spielt ihr jetzt einfach ein wenig mit dem Designview herum und schaut euch mal die verschiedensten Diagrammtypen an, die der Flexbuilder so anzubieten hat. Auch die Attribute sind sicherlich interessant. Spielt einfach mal herum. Im nächsten Beitrag werden dann unserem BarChart Datensätze hinzugefügt und die Datei wird benutzbar gemacht.