Interaktive Dashboards ohne Code – So visualisierst du deine Daten mit Lovable

Man hat häufiger den Fall, dass man irgendwelche Daten hat, die man auf irgendeine Weise schön und anschaulich darstellen möchte. Ich möchte heute mit Lovable probieren, ob ich das hinbekomme, nämlich interaktive Diagramme oder Dashboards zu erstellen. Was das Tool mir bietet und wie weit ich komme, sehen wir jetzt. Bevor ich mit dir gemeinsam einen Dummy baue, möchte ich dir ganz gerne ein Beispiel zeigen, wo ich das erfolgreich und mit ein bisschen mehr Zeit umgesetzt bekommen habe. Hier unten sieht man jetzt, dass ich hier einen Slider habe. Ich bin jetzt gerade im Bereich des Daten-Inputs. Wenn ich den Slider ziehe, sieht man, dass die Kategorien sich erhöhen. Ich kann jetzt hier mal ein paar Dummy-Contents eingeben mit ein paar Dummy-Werten, die ich gleich auswerten mag. Jetzt habe ich meine Dummy-Daten eingegeben. Es gibt auch die Möglichkeit, ein Excel-File abzuloaden. Im gegebenen Fall muss man das auf eine bestimmte Art und Weise aufbauen. Wenn ich das jetzt hier hochlade, würde auch Lovable an der Stelle diese Daten übernehmen und die de facto in diesen Kategorien darstellen. Jetzt habe ich erstmal meinen Daten-Input erledigt, das heißt meine Auswertung steht. Und jetzt möchte ich mir ganz gerne das in Diagrammform ausgeben lassen. Und wie man sieht, sieht man noch gar nichts. Ich habe aber links ein Dropdown und dann kann ich mir jetzt ein Balkendiagramm darstellen lassen. Ich kann mir ein Kuchendiagramm darstellen lassen, Linien, es geht noch weiter, ich habe ein Radar und ich habe auch ein flächiges Area-Chart. All das wurde jetzt im Zusammenhang mit den Daten aufgesetzt. Wie man sieht, sieht man hier unten auch die Kategorien und auch die Werte, die ich hinterlegt habe. Ich habe die Möglichkeit, jetzt wirklich jedes einzelne Element runterzuladen, oder ich kann sie alle auf einmal runterladen. Und diese Grafiken könnte ich jetzt in dem Fall für eine Präsentation verwenden oder mit Kollegen einfach teilen, um dann über die Ergebnisse zu sprechen. Das Nächste, was ich überlegt hatte, war: Mensch, ich bräuchte auch ein Dashboard. Wie kriege ich das denn hin? Auch das hat wunderbar funktioniert. Es gibt hier auch so was wie eine Auswertungsebene. Ich könnte mir jetzt sehr viele verschiedene Dinge quasi rausfiltern, wenn ich das wollen würde, und könnte mir noch hier weitere Auswertungskategorien erstellen. Auch das ist downloadbar, und auch hier ist es so, dass hier die Kategorien als auch die Werte, die ich im Data-Input drin hatte, übernommen worden sind. Jetzt wollen wir mal probieren, dass wir das mit wenigen Schritten zumindest ansatzweise so hinbekommen, wie ich das hier mit ein wenig mehr Zeit hinbekommen habe. Bevor ich den Dummy baue, muss ich erstmal ein Briefing haben. Dafür habe ich mir ChatGPT wieder hergenommen und habe mir erstmal so ein paar Gedanken gemacht, was ich ganz gerne haben möchte. Habe ChatGPT gebeten, ein einfaches Briefing zu schreiben. Das ist ein paar Mal durchgelaufen, bis ich das so hatte, was ich gerne haben wollte. Und hier sind jetzt vier verschiedene Abschnitte, die ich nach und nach in Lovable reingebe. Der erste Step hier ist einfach nur die Info, es soll eine Infografik werden, wo man reintippt oder eben Excel-Daten uploaden kann. Man muss selber mit dem Slider die Kategorien bestimmen dürfen, und es gibt die Möglichkeit, die Input-Fields, also das, was als Kategorie reingegeben worden ist, auch als Legende in die Charts zu sehen. Den Text nehme ich jetzt, kopiere mir den, gehe in Lovable rein und lass das mal loslaufen. Lovable öffnet dann sofort die Umgebung. Links ist der Chat, rechts ist die Preview bzw. Code-Ecke. Am Ende erscheint, wenn der Code durchgelaufen ist, auch die Preview. Das dauert jetzt einen kleinen Augenblick, bis das erste Ding aufgebaut ist. Und hier sieht man auch noch mal, was Lovable jetzt vorhat. Hier wird quasi das Briefing noch mal zusammengeführt, noch mal gesagt, das sind jetzt die Dinge, die ich vornehmen werde. Preview wird geladen. So, jetzt sehe ich hier die Möglichkeit, den Slider zu bedienen. Probiere ich jetzt direkt mal aus, ob das klappt. Jawohl. Ich kann jetzt hier verschiedene Kategorien mit Values hinterlegen. Kann ich da reintippen, ich kann Values reinpacken. Super. Einfach mal Zahlen reingeben, einfach mal ein bisschen gucken, ob das denn umgesetzt wird. Dann kann ich hier unten Update Charts sagen, und es wird rechts auf der Seite ein Balkendiagramm gezeigt mit den Werten, die ich eingegeben habe. Das ist schon mal gut. Gehen wir zum next step. In dem Part möchte ich ganz gerne, dass die Design-Charts wirklich premiummäßig aussehen und dass ich die Möglichkeit habe, diese in ein Vektorformat zu exportieren. Also ich gebe das Briefing rein und lass Lovable wieder das Briefing umsetzen. Lovable arbeitet jetzt erstmal eine Runde. Aha, hat es verstanden, was zu tun ist. Wenn man jetzt hier draufklickt, sieht man, wie der Code auch geschrieben wird. Wenn ich wieder zurückgehen möchte, klicke ich da wieder drauf und dann sehe ich wieder die Preview. Auch das dauert jetzt einen kleinen Augenblick. Jetzt wird die Preview wieder geupdatet. Lovable ist durchgelaufen. Aha, sieht ein wenig anders aus, und ich habe verschiedene Arten von Diagrammen, die ich jetzt hier auswählen kann. Schauen wir mal, ob der SVG-Export funktioniert. Das sieht gut aus, auch das funktioniert. Ja, und ich gucke mal, ob das mit dem Upload der Excel-Datei klappt. Nein, das klappt noch nicht. Das muss noch mal überprüft werden. Das würde ich jetzt mal eben nachbriefen: Please check the Excel upload function, it's not working. Mal gucken, was jetzt passiert. So, jetzt probieren wir das mit der Funktion noch mal. Ich hatte ja gebeten, dass er es überprüfen soll. Ja, das funktioniert. Die Kategorien werden übernommen, auch die Werte, die in der Excel-Datei drinstehen, die hatte ich hinterlegt. Ein Wert hat er nicht richtig erfasst, auch da muss ich noch mal gucken, dass das überprüft wird. Gut, gehen wir weiter, bevor ich das jetzt korrigiere, mit dem nächsten Part des Briefings. In dem Fall möchte ich ganz gerne zwei verschiedene Tabs haben, wo sowohl der Daten-Input als auch das Dashboard dargestellt werden bzw. die Diagramme. So, es gibt jetzt zwei Tabs. Es gibt einmal die Charts und es gibt einmal den Daten-Input. Ich gucke noch mal, ob das mit der Excel-Datei mittlerweile funktioniert. Sachen sind hochgeladen, die Values werden immer noch nicht übernommen und eine Kategorie stimmt nicht. Also muss ich das noch mal überprüfen, weil das ist ja eigentlich das Wichtigste überhaupt, dass die Daten richtig ausgelesen werden. Das mache ich jetzt mal mit dem nächsten Prompt. Als Nächstes würde ich auch bitten, dass die Daten dann hier in der Category angezeigt werden, wenn ich die schon hochgeladen habe, damit ich eben auch selber noch mal ändern kann. Auch das hat sich jetzt geändert. Nein, die Daten werden immer noch falsch dargestellt. Ich lade das noch mal neu hoch und hoffe, dass sie jetzt richtig ... Jetzt sind sie richtig. Also ich habe die Kategorien, die in der Excel-Datei drin sind, als auch die Werte. Das ist schon mal gut. Ich habe hier die Möglichkeit, oben zwischen den verschiedenen Diagrammarten zu tauschen. Ich kann den Export machen. Export funktioniert nach wie vor. Und ich kann es auch löschen. Okay, eins muss mindestens drinbleiben, deswegen kann ich das jetzt nicht rausnehmen. Ich mache mal ein neues Chart, setze mal eine Linie rein und lösche es noch mal. Jawohl, das funktioniert. Ich habe aber gerade gesehen, dass die Buttons übereinanderliegen. Also würde ich jetzt Lovable sagen: Please check position of the buttons because they are overlapping. Überprüfen wir mal die Position. Nein, das hat er nicht wirklich gefixt. Muss ich noch mal sagen: They are still overlapping. Gut, die Buttons sind jetzt ein bisschen anders gelegt. Ich lasse es jetzt erstmal dabei, weil das ist jetzt nicht der große Aufwand. Ich setze das nächste noch mal rein. Ich würde ganz gerne, dass die Daten, die aus der Excel-Datei kommen, auch in die Kategorien übernommen werden, sodass ich hier auch händisch noch mal die Daten ändern kann. Ich lade die Excel-Datei jetzt hoch. Und, werden die Kategorien übernommen? Jawohl, das funktioniert auch gut. Also ich könnte jetzt hier händisch noch andere Werte eingeben und die Daten werden hier auf dem Chart angebracht. Nehme ich schon mal den letzten Part rein, nämlich, dass ich ganz gerne noch ein Dashboard haben möchte. Und jetzt gebe ich das letzte Briefing rein, eben mit dem Dashboard. Und dann müssen wir wahrscheinlich noch ein bisschen aufräumen, und dann haben wir es auch geschafft. Dann ist unser Daten-Input-, Preview-, Visualisierungs-Tool fertig. So, mit dem Dashboard hat das noch nicht so ganz funktioniert, wie ich das gerne haben möchte. Ich habe jetzt immer nur noch die Diagramme. Also muss ich noch mal sagen: Hey, ich brauche das Dashboard. Please add a dashboard with results under a new tab. Also ich setze jetzt hier einen neuen Tab rein und bitte darum, dass da dann das Dashboard drunter sein soll. Schicken wir es ab. Es gibt einen neuen Tab. Gucken wir mal. Results. Okay, das hat funktioniert. Es gibt hier so was wie ein Dashboard. Ich würde jetzt ganz gerne noch Best-of- oder Average-Diagrams dazuhaben, und dann hätte ich mein Dashboard komplett. Lovable hat jetzt hier noch mal die Diagramme einfach ergänzt. Ich würde es glaube ich noch ein bisschen anders haben wollen. Das wäre aber jetzt ein weiterer Weg, den ich gehen würde. Aber es hat funktioniert. Ich habe wirklich mit einem Daten-Input oder mit etwas, was ich hochlade oder selber reingebe, die Möglichkeit gegeben, mir ein, ja, eine Auswertung visuell darzustellen, eben in Form eines Diagramms mit verschiedenen Diagrammtypen, die könnte ich übrigens auch noch erweitern, und eben mit einem Result-Dashboard, wo eben die Werte noch mal analysiert werden und so was wie ein Ranking erstellt wird. Ich hoffe, der Snip hat dir gefallen. Ich finde es gerade Wahnsinn, was mit so Tools wie Lovable oder Replit oder auch Cursor möglich geworden ist. Ich fühle mich so ein bisschen wie MacGyver und baue mir lustig meine weiteren Tools. Ich hoffe, du hast Spaß, auch die Sachen mal auszuprobieren. Den Dummy werde ich hinterlegen. Happy Testing und ich sage mal: Bis zum nächsten Mal. Tschüss!