Własny wykres z danych. Zbuduj go z pomocą AI

Wykres też potrafi oszukać

999999999 i 1000000000. Na wykresie słupki dla tych liczb powinny wyglądać niemal identycznie. W pierwszej wersji naszego edytora dodatkowa cyfra zabierała jednak miejsce paskowi. Wartości były poprawne, a obraz sugerował różnicę, której w danych prawie nie było.

Poprawiony edytor możecie wypróbować powyżej. Wklejacie liczby, klikacie „Rysuj wykres” i dostajecie słupki oraz tabelę. Całość mieści się w jednym pliku HTML, działa bez internetu i liczy wszystko w przeglądarce. Wpisane dane nie trafiają do zewnętrznej usługi. Na początek daliśmy wam zestaw fikcyjny.

Wspólna skala, wspólne miejsce

Przenieśliśmy liczby nad paski, żeby każdy wiersz miał tyle samo miejsca na wykres. Długość zapisu przestała wpływać na długość słupka. Przy własnej wersji sprawdźcie to samo: poprawne obliczenie procentu nie wystarczy, jeśli układ strony potem go zniekształca.

Wpiszcie „A;10” i „B;20”. Pierwszy słupek powinien mieć połowę długości drugiego. Teraz zamieńcie wartości na „2,5” i „5” — proporcja ma zostać. Możecie też zmienić „Research;12,5” z przykładu na „Research;6”, a potem na zero. Pasek najpierw się skróci, później zniknie, ale pozycja i liczba zostaną w tabeli. Przy dwóch zerach nadal muszą być widoczne oba wiersze.

Co wklejamy do pola z danymi

Jeden wiersz to jedna pozycja: etykieta;wartość. Wybraliśmy średnik, żeby przecinek mógł zostać w liczbie. Kropka dziesiętna też działa. Wartość zapisujcie jako „1200,5”, bez jednostki i spacji oddzielających tysiące. Nie dodawajcie wiersza z nagłówkami.

Cały zestaw powinien mieć jedną jednostkę. Godziny porównujemy z godzinami, złotówki ze złotówkami. Edytor przyjmie do 20 pozycji, etykiety do 64 znaków i nieujemne liczby do biliona, z najwyżej czterema miejscami po przecinku. To zakres naszego małego narzędzia; przy rozbudowie możecie go zmienić.

Zlecamy własną wersję

Jeśli chcecie zbudować podobny edytor, poniższe polecenie daje modelowi konkretne zadanie. Są w nim reguły, które później łatwo sprawdzić: skala od zera, widoczne wartości, przecinek dziesiętny i informacja, w którym wierszu jest błąd.

Wklejcie prompt do narzędzia pomagającego pisać kod i poproście również o instrukcję otwarcia pliku. Nasze demo przygotowaliśmy jako punkt odniesienia; nie jest zapisem jednej odpowiedzi konkretnego modelu. Jeśli wasze narzędzie nie uruchomi pliku w przeglądarce, otwórzcie go sami i przejdźcie próby opisane w tym artykule.

Przygotuj pojedynczy plik HTML działający offline, bez bibliotek i zewnętrznych plików. Dodaj pole tekstowe w formacie etykieta;wartość, jeden rekord w wierszu. Obsłuż przecinek i kropkę dziesiętną. Przyjmuj do 20 pozycji, etykiety do 64 znaków i nieujemne liczby do 1 000 000 000 000 z maksymalnie 4 miejscami po przecinku. Puste i błędne wiersze mają wywołać czytelny komunikat z numerem wiersza; nie pomijaj ich. Po kliknięciu przycisku pokaż proporcjonalne słupki ze wspólną skalą od zera oraz dostępną tabelę wartości. Zmiana tekstu ma unieważniać poprzedni wynik. Etykiety traktuj jako tekst, nigdy HTML. Przygotuj jasny i ciemny motyw, obsługę klawiatury i układ od 320 px szerokości. Użyj wyraźnie opisanych fikcyjnych danych.

A jeśli w danych jest błąd?

Zostawcie pusty wiersz, wpiszcie liczbę ujemną albo zastąpcie ją słowem. W naszym demo rysowanie się zatrzyma, a komunikat wskaże miejsce do poprawy. Nie chcemy wykresu, który wygląda na gotowy, choć po drodze zgubił część zestawu.

Po każdej edycji poprzedni podgląd znika. Dopiero „Rysuj wykres” pokaże nowy. Dzięki temu świeżo wpisane liczby nie stoją obok słupków policzonych przed zmianą.

Została jeszcze próba z długimi etykietami i wąskim oknem. Sprawdźcie, czy tekst się zawija, czy liczby dają się odczytać i czy klawiszem Tab można dotrzeć do kontrolek. Słupki mają pomóc zobaczyć proporcje. Dokładnych wartości szukamy w tabeli.

Plik zostaje u was

„Pobierz HTML” zapisuje cały edytor. Otworzycie go dwuklikiem, bez konta i instalowania bibliotek. Pobrana kopia zaczyna od naszych przykładowych danych, więc własny zestaw zachowajcie osobno, choćby w pliku tekstowym.

Do prezentacji możecie zrobić zrzut samego wykresu. Dopiszcie wtedy, czego dotyczą liczby, z jakiego okresu pochodzą i jaką mają jednostkę. Dane z demo są fikcyjne; w raporcie potrzebne będą wasze.

Przy zaglądaniu do kodu warto zacząć od tabeli HTML. Etykiety są nagłówkami wierszy, a wartości zwykłym tekstem nad paskami. Pod artykułem zostawiamy dokumentację tabel oraz atrybutu download, który służy do pobierania pliku.