Dein eigenes Datendiagramm: Bau es mit KI-Hilfe

Auch ein Diagramm kann täuschen

999999999 und 1000000000. Die Balken für diese Zahlen sollten nahezu gleich aussehen. In der ersten Version unseres Editors nahm die zusätzliche Ziffer dem Balken allerdings Platz weg. Die Werte waren richtig, das Bild suggerierte aber einen Unterschied, den es in den Daten kaum gab.

Den korrigierten Editor kannst du oben ausprobieren. Zahlen einfügen, „Diagramm zeichnen“ anklicken, Balken und Tabelle ansehen. Alles steckt in einer HTML-Datei, läuft ohne Internet und rechnet im Browser. Eingegebene Daten gehen an keinen externen Dienst. Zum Einstieg gibt es einen fiktiven Datensatz.

Gleiche Skala, gleicher Platz

Wir haben die Zahlen über die Balken gesetzt, damit jede Zeile gleich viel Diagrammfläche bekommt. Die Länge der Zahlendarstellung beeinflusst damit nicht mehr die Balkenlänge. Prüfe dasselbe bei deiner Version: Eine richtige Prozentberechnung reicht nicht, wenn das Seitenlayout sie anschließend verzerrt.

Gib „A;10“ und „B;20“ ein. Der erste Balken sollte halb so lang sein wie der zweite. Ersetze die Werte jetzt durch „2,5“ und „5“: Das Verhältnis muss bleiben. Du kannst auch „Research;12,5“ aus dem Beispiel erst in „Research;6“ und danach in null ändern. Der Balken wird kürzer und verschwindet schließlich, Eintrag und Zahl bleiben aber in der Tabelle. Auch bei zwei Nullen müssen beide Zeilen sichtbar sein.

Was in das Datenfeld kommt

Eine Zeile ist ein Eintrag: Beschriftung;Wert. Wir verwenden ein Semikolon, damit das Komma in der Zahl bleiben kann. Ein Dezimalpunkt funktioniert ebenfalls. Schreib den Wert als „1200,5“, ohne Einheit oder Leerzeichen zur Tausendertrennung. Füge keine Überschriftenzeile hinzu.

Der ganze Datensatz sollte dieselbe Einheit haben. Stunden vergleichen wir mit Stunden, Złoty mit Złoty. Der Editor nimmt bis zu 20 Einträge an, Beschriftungen mit bis zu 64 Zeichen und nichtnegative Zahlen bis zu einer Billion mit höchstens vier Nachkommastellen. Das ist der Umfang unseres kleinen Werkzeugs. Beim Ausbau kannst du ihn ändern.

Eine eigene Version beauftragen

Wenn du einen ähnlichen Editor bauen möchtest, gibt die folgende Anweisung dem Modell eine konkrete Aufgabe. Sie enthält Regeln, die sich später leicht prüfen lassen: eine Skala ab null, sichtbare Werte, Dezimalkomma und die Angabe der fehlerhaften Zeile.

Füge den Prompt in ein Werkzeug ein, das beim Programmieren hilft, und bitte auch um eine Anleitung zum Öffnen der Datei. Unsere Demo dient als Bezugspunkt; sie ist kein Protokoll einer einzelnen Antwort eines bestimmten Modells. Öffnet dein Werkzeug die Datei nicht selbst im Browser, mach das und gehe die Versuche in diesem Artikel durch.

Erstelle eine einzelne HTML-Datei, die offline ohne Bibliotheken und externe Dateien läuft. Ergänze ein Textfeld im Format Beschriftung;Wert, ein Datensatz pro Zeile. Unterstütze Dezimalkomma und Dezimalpunkt. Akzeptiere bis zu 20 Einträge, Beschriftungen mit bis zu 64 Zeichen und nichtnegative Zahlen bis 1 000 000 000 000 mit höchstens 4 Nachkommastellen. Leere und fehlerhafte Zeilen müssen eine verständliche Meldung mit Zeilennummer auslösen; überspringe sie nicht. Zeige nach einem Klick proportionale Balken mit gemeinsamer Skala ab null und eine zugängliche Wertetabelle. Textänderungen müssen das vorherige Ergebnis ungültig machen. Behandle Beschriftungen als Text, niemals als HTML. Bereite ein helles und dunkles Design, Tastaturbedienung und ein Layout ab 320 px Breite vor. Verwende deutlich als fiktiv gekennzeichnete Daten.

Und wenn die Daten einen Fehler enthalten?

Lass eine Zeile leer, gib eine negative Zahl ein oder ersetze sie durch ein Wort. In unserer Demo stoppt das Zeichnen, und eine Meldung zeigt die zu korrigierende Stelle. Wir wollen kein Diagramm, das fertig aussieht, unterwegs aber einen Teil des Datensatzes verloren hat.

Nach jeder Bearbeitung verschwindet die alte Vorschau. Erst „Diagramm zeichnen“ zeigt eine neue. So stehen frisch eingegebene Zahlen nicht neben Balken, die vor der Änderung berechnet wurden.

Es bleibt noch der Versuch mit langen Beschriftungen und einem schmalen Fenster. Prüfe, ob Text umbricht, Zahlen lesbar bleiben und die Bedienelemente per Tab erreichbar sind. Die Balken helfen, Verhältnisse zu sehen. Die genauen Werte stehen in der Tabelle.

Die Datei bleibt bei dir

„HTML herunterladen“ speichert den vollständigen Editor. Du öffnest ihn per Doppelklick, ohne Konto oder Bibliotheksinstallation. Die heruntergeladene Kopie startet mit unseren Beispieldaten. Sichere deinen eigenen Datensatz deshalb separat, etwa in einer Textdatei.

Für eine Präsentation kannst du einen Screenshot des Diagramms machen. Ergänze dann, was die Zahlen beschreiben, aus welchem Zeitraum sie stammen und welche Einheit sie haben. Die Demodaten sind fiktiv; im Bericht brauchst du deine eigenen.

Beim Blick in den Code lohnt sich der Einstieg über die HTML-Tabelle. Beschriftungen sind Zeilenüberschriften, Werte stehen als normaler Text über den Balken. Unter dem Artikel verlinken wir die Dokumentation zu Tabellen und zum Attribut download, das den Dateidownload ermöglicht.