Bubble.io Tutorial - Diagramme und Charts erstellen (Deutsch)

Tutorial, um Liniendiagramme, Balkendiagramme, Netzdiagramme und Tortendiagramme in Bubble.io zu erstellen.

Chris Strobl
Chris Strobl

In diesem Video lernst Du Diagramme und Charts in Bubble zu erstellen. Wir arbeiten mit dem kostenlosen offiziellen Bubble.io Plugin ChartElement.

Deutsches Bubble.io Tutorial - Diagramme und Charts erstellen

Für weitere komplexere Charts gibte es das Plugin AmCharts https://bubble.io/plugin/amcharts-1499780054879x111265002286743550

Dieses benötigt jedoch eine AmCharts Lizenz. Und es gibt die sehr schönen, kostenpflichtigen Plugins von Thimo:


Video Transkript

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir ganz unterschiedliche Diagramme und Charts in Bubble erstellen können. Wir gehen direkt mal rein. Ich hab in der Datenbank zwei verschiedene Kategorien. Einmal Absatzzahlen mit einer Zahl und einem Datum und dann einmal Stückzahlen, um die verschiedenen Produkte darzustellen und auch hier die Farbe zu haben.

In der App Data haben wir bei Absatz verschiedene Zahlen, dahinter Daten. Ihr seht 2016, 17, 18, 19, 20 und bei den Stückzahlen in der Datenbank haben wir jeweils eine eigene Farbe und die Produkte und die jeweilige Stückzahl des Produkts. Wenn wir jetzt in Plugins gehen, seht ihr, dass wir das Chart Element Plugin von Bubble installiert haben.

Das ist ein offizielles Plugin von Bubble und ist kostenlos. Wir gehen jetzt in den Design Tab und wir sehen hier Line Bar Chart. Wir ziehen das einmal hier rein. Und zentrieren das horizontal. Und wir stellen als erstes nun ein Linien Diagramm. Ihr wählt Chart Type Line. Type of Data: die Absatzzahlen. Data source: Do a search for Absatzzahlen. Wir brauchen hier keine Bedingungen, sondern wir nehmen alle. Das könnt ihr natürlich einfügen.

Bei Value Expression nehmen wir den Absatz und bei der Label Expression nehmen wir das Datum. Wir formatieren das Ganze, um es besser anzuzeigen. Wir bekommen jetzt quasi den Monat und das Jahr. Wir werden denn jetzt noch die Farben passen das Ganze etwas an?. Und gehen jetzt einmal auf Preview. Und ihr seht nun, wie wir aus der Datenbank die Absatzzahlen haben und das Ganze auf einem Linien Diagramm darstellen. Als nächstes machen wir ein Balkendiagramm. Nehmt hierfür wieder Line Bar Chart. Wir nehmen Bar als Chart Type. Type of Data Absatzzahlen. Die Data source wiederum eine Suche.

Und als Label Expression Datum formatieren. Custom. Passt wieder die Farben an und ihr seht nun, wenn wir auf Preview gehen, dass wir nun auch die Absatzzahlen dargestellt haben als Balkendiagramm. Als nächstes erstellen wir nun ein Netz Diagram. Dies ist spannend für die Datenpunkte der unterschiedlichen Produkte. Wir gehen hier auf Radar. Type of Data nehmen wir jetzt die Stückzahlen. In der Datenbank haben wir gesehen, dass wir bei den Stückzahlen verschiedene Produkte haben mit der unterschiedlichen Stückzahl, um eine Gewichtung der unterschiedlichen Produkte zu haben.

Do a search for Stückzahlen. Wir brauchen wiederum keine Constraints. Value Expression Stückzahl und Label Expression nehmen wir das Produkt. Wir passen wiederum die Farbe an. Und können jetzt einmal auf Preview gehen. Und so sehen wir jetzt hier in unserem Netz Diagramm, wie die unterschiedlichen Produkte sich auf die Stückzahlen auswirken.

Wir sehen das Produkt 4 und Produkt 3 die größten Stückzahlen haben. Wir stellen jetzt noch einmal diese Daten mit einem Tortendiagramm dar. Geht auf Line Bar Chart. Wir zentrieren horizontal. Abstand 45. Und wir wählen Pie. Type of Data Stückzahlen. Data source Do a search for Stückzahlen. Die Value Expression Stückzahl, die Label Expression Product.

Wir gehen jetzt einmal auf Preview. Und wir sehen, dass wir auch hier die Stückzahlen der unterschiedlichen Produkte anzeigen können. Wir haben aber das Problem, dass wir die Farbe nicht ändern können im Bubble Plugin. Deswegen gibt es noch ein anderes Plugin AmCharts, welches ein nicht kostenloses Plugin ist, aber eine kostenlose Version hat. Und ich habe hierfür schon mal vorbereitet, dass wir in der Datenbank die unterschiedlichen Farben für die einzelnen Produkte festgelegt haben.

Wir machen Data source, Do a search for Stückzahlen. Und wählen hier Produkt als nächstes. Schreiben wir hier die Kategorie Headline hin. Zum Beispiel Produkte Stückzahlen. Danach data source Stückzahlen. Und wir wählen die Stückzahl. Schreiben hier Stückzahl. Ihr seht als weiteres hier den Style der Color. Hierfür machen wir do a search for Stückzahlen und wählen nun aus die Farben, die wir angelegt haben als Hexcodes in der Datenbank. Schließlich legen wir noch den Border fest mit einer Größe von 1 und einem hellen Grau.

Wenn wir nun einmal auf Preview gehen, dann sehen wir die Produkte mit der Legende in den unterschiedlichen Farben. Wir haben aber hier, weil wir eben nicht im Premium Plugin sind, die Legende von  JSCharts bei AmCharts. Es gibt die Möglichkeit, hier noch die Theme Color auf dark zu stellen, um die Legende und Werbung etwas leichter auszublenden.

Umgekehrt geht dann aber auch der Kontrast eurer Farben weg. Ich denke, dass AmCharts relativ teuer ist mit 180 Dollar pro Jahr als Lizenz und dazu noch einmal 450 Dollar pro Jahr Service Retainer. Und damit muss man sich überlegen, ob man den Werbezug bezahlt oder vielleicht wird auch Bubble das ganze Thema lösen und auch hier die Farben noch sichtbar machen. Ich hoffe, ihr konntet sehen, wie wir mit echten Daten Diagramme in Bubble erstellen können. Und als Ausblick habe ich noch zwei Plugins für die man bezahlen muss, nämlich von Thimo das es einmal ApexChart.js. Das ist ein Projekt von einem Member der Community und das sind exzellente Charts mit denen man arbeiten kann.

ApexCharts und ihr könnt euch die Live Demo und den Editor anschauen. Ich habe auch die links unten in den Fußnoten und dann einmal Advanced Financial Charts and Graphs, was super spannend ist, weil die vor allem sehr schnell sind und man damit unheimlich gut, vor allem Finanzdaten darstellen kann, was ich wiederum sehr spannend finde. Die ganzen Daten sind aus der Datenbank und wenn ihr hier sehr fortgeschrittene Graphen braucht, glaube ich, dass das Plugin sich auf jeden Fall lohnt. Ich wünsche euch weiterhin viel Erfolg und auf bald.

Plugins