top of page
  • szudejkomichal

Google Charts: Przydatne i darmowe narzędzia do tworzenia wizualizacji, poradnik

Zaktualizowano: 7 gru 2023

Ten post jest początkiem nowego mini cyklu, w którym przedstawię kilka przydatnych, darmowych i prostych w obsłudze narzędzi, umożliwiających tworzenie efektownych wizualizacji.


Dziś skupię się na narzędziu Google Charts.

Kreatywna fantazja na temat wykresów i wizualizacji.
Obrazek wygenerowany przez autora w ChatGPT i DALL-e 3.

Wstęp

W trakcie realizacji jednego z projektów, stanąłem przed zadaniem przedstawienia zjawiska transferów użytkowników pomiędzy różnymi systemami IT. Transfery te odbywały się w kilku etapach, co stanowiło wyzwanie dla stworzenia wizualizacji. Miała ona być kluczowym elementem prezentacji: pozwolić odbiorcom, a zarazem decydentom, zrozumieć i ocenić skalę i przebieg transferów, a co za tym idzie, wybrać optymalny kierunek działań.


Tradycyjne wykresy słupkowe czy liniowe nie były w stanie w pełni oddać złożoności omawianego procesu. Dlatego też zdecydowałem się na użycie wykresu Sankeya, który umożliwia przedstawienie przepływu danych w formie strumieni.


Wizualizacja przy pomocy wykresu Sankeya spotkała się z pozytywnym odbiorem. Dzięki niej mogli oni w łatwy sposób zrozumieć złożony proces transferów. Wizualizacja pozwoliła również na identyfikację obszarów, w których można było poprawić efektywność procesu.


Co to jest wykres Sankeya?

Wykres Sankeya to typ diagramu przepływu, w którym grubość linii łączących elementy jest proporcjonalna do wielkości przepływu. Diagramy te są często używane w celach naukowych i biznesowych.


Wykres Sankeya składa się z dwóch podstawowych elementów:

  • Węzłów, które reprezentują różne stany lub etapy przepływu.

  • Łączników, które reprezentują przepływ między węzłami.

Grubość łącznika jest proporcjonalna do całkowitej ilości przepływu między węzłami.


Wykresy Sankeya mają różnorodne zastosowania. Mogą pokazywać:

  • Migracje klientów, na przykład z jednego systemu CRM do drugiego.

  • Przepływy pieniężne, na przykład w przedsiębiorstwie lub w gospodarce.

  • Przepływ informacji, na przykład w sieci komputerowej.

  • Wykorzystanie materiałów w procesie produkcyjnym.

Pozostało pytanie, jak przygotować taki wykres. Na rynku dostępnych jest wiele darmowych narzędzi, takich jak Visual Paradigm. Alternatywą są dodatki do programu Excel, dostępne zarówno w oficjalnym sklepie, np. ChartExpo, jak i od innych dostawców, takich jak Power User. Instalacja dodatkowego oprogramowania nie jest jednak zawsze możliwa, na przykład na służbowym komputerze. Wiąże się też z reguły z kosztami, koniecznością zamówienia subskrypcji itp.

Instalacja dodatku ChartExpo w Excel. Zrzut ekranu wykonany przez autora.
Instalacja dodatku ChartExpo w Excel. Zrzut ekranu wykonany przez autora.

W tym przypadku wybrałem PowerBI. Okazał się narzędziem umożliwiającym stworzenie wykresu, spełniającego moje wymagania. Wykres był czytelny, interaktywny i można było go aktualizować. Jestem jednak świadom, że PowerBI nie jest narzędziem dostępnym dla wszystkich, a jego obsługa może wymagać wprawy.


Postanowiłem zbadać inne dostępne na rynku możliwości i znaleźć darmowe narzędzia, które umożliwią łatwe i bezpieczne przygotowanie niestandardowych wizualizacji, bez konieczności instalowania dodatkowego oprogramowania. Bezpieczeństwo danych było dla mnie priorytetem, dlatego w pierwszej kolejności szukałem rozwiązania, które pozwoliłoby na przygotowanie wizualizacji lokalnie, na własnym komputerze, bez konieczności przesyłania danych do Internetu.


Oczywiście, potwierdzam, że udało mi się odnaleźć narzędzia, które zasadniczo spełniają postawione kryteria. W niniejszym oraz w nadchodzących postach tej serii, z przyjemnością podzielę się z Państwem owocami moich poszukiwań. Przygotowałem krótkie poradniki, które krok po kroku przeprowadzą Was przez proces korzystania z wyselekcjonowanych narzędzi.


 

Google Charts

Pierwszą propozycją, którą chciałbym przedstawić w ramach tej serii, jest Google Charts – usługa stworzona przez giganta technologicznego, Google / Alphabet. Google Charts umożliwia użytkownikom tworzenie wykresów na podstawie dostarczonych danych. Po wprowadzeniu informacji i określeniu preferencji dotyczących formatowania, usługa generuje wykres, a także dostarcza kod HTML/JavaScript, który można wykorzystać do zintegrowania wizualizacji z własną stroną internetową. Przykład użycia Google Charts do stworzenia wykresu Sankeya został zaprezentowany we wstępie do tego posta.

Zrzut ekranu pokazujący program Google Charts.
Google Charts. Zrzut ekranu wykonany przez autora.

Google Charts posiada wiele zalet, które sprawiają, że jest to atrakcyjne narzędzie do tworzenia wizualizacji danych.


Zalety Google Charts:

  1. Bogata galeria dostępnych wizualizacji oraz szerokie możliwości ich dostosowania do indywidualnych potrzeb użytkownika.

  2. Interaktywność wykresów, co znacząco podnosi jakość prezentowanych danych.

  3. Po opanowaniu podstaw oraz przygotowaniu własnych szablonów, korzystanie z Google Charts staje się intuicyjne i proste.

  4. Gotowe wizualizacje można z łatwością osadzić na stronie internetowej czy w firmowym Sharepoint.

Niemniej jednak, Google Charts posiada także pewne ograniczenia, które mogą być uznane za jego wady.


Wady Google Charts:

  1. Edycja kodu HTML może być przytłaczająca, szczególnie dla osób, które nie miały z nim wcześniej styczności. Na szczęście, po przygotowaniu jednego, działającego wzorca, jego modyfikacja pod konkretne potrzeby staje się znacznie prostsza.

  2. Konieczność wprowadzania danych bezpośrednio do kodu HTML, zamiast ich importowania ze źródła, co może stanowić pewną barierę dla użytkowników nieznających tego języka programowania.

  3. Brak możliwości osadzenia wizualizacji np. w PowerPoint (tak aby np. zachowała interaktywność działania).

Jak przygotować wizualizację w Google Charts?

Krok 1. Zdobądź i przygotuj dane.

Rozpocznij od zebrania i starannego przygotowania potrzebnych danych. Upewnij się, że są one wiarygodne i kompleksowe. W tym etapie zwróć uwagę na selekcję istotnych informacji. Po wybraniu narzędzia, konieczne może być też dostosowanie danych do jego wymagań.


Dekalog wizualizacji, to zbiór fundamentalnych zasad, które pomogą Ci stworzyć wizualizacje wspierające narrację opartą na danych. Szerzej opisałem go w tym artykule.


Krok 3. Zaprojektuj wizualizację.

Na tym etapie może pojawić się najwięcej trudności, zwłaszcza jeśli dopiero rozpoczynasz pracę z nowym narzędziem. Google Charts nie posiada wbudowanego kreatora czy edytora. Dlatego trzeba posłużyć się dodatkowym narzędziem do pracy. Poniżej przedstawię dwie możliwości, a także pokażę, jak łatwo korzystać z Google Charts, nawet bez znajomości HTML. Na tym etapie sugeruję, aby pracować na syntetycznych lub poglądowych danych.


Krok 4. Wprowadź dane do wizualizacji.

Po zaprojektowaniu wizualizacji, można przenieść ją do docelowego środowiska i wprowadzić rzeczywiste dane.


W przykładzie pokażę Państwu jak przygotować wyżej osadzony wykres Sankey.


Jak pracować z Google Charts?

Zanim przejdziemy do kolejnych kroków, warto zastanowić się nad wyborem narzędzia, w którym będziemy projektować naszą wizualizację. Przedstawię dwie opcje: program Microsoft Word oraz internetowe narzędzie JSFiddle. Jeśli zdecydują się Państwo na korzystanie z JSFiddle, zalecam przeprowadzenie procesu nauki i testowania na danych innych niż te, które są używane w Państwa przedsiębiorstwie, aby zapewnić bezpieczeństwo informacji.


Microsoft Word.

Word to narzędzie, które nie tylko umożliwia tworzenie stron WWW, ale także oferuje opcję bezpośredniego edytowania kodu HTML. Dla celów tej demonstracji, wykorzystamy kod wykresu Sankeya, który został zaprezentowany wcześniej. Pierwszym krokiem będzie utworzenie pustego pliku w Wordzie z rozszerzeniem *.htm. Korzystam z anglojęzycznej wersji aplikacji.

Zapisywanie pliku strony internetowej w Word.
Zapisywanie pliku strony internetowej w Word. Zrzut ekranu wykonany przez autora.

Następnie, aby umożliwić otwieranie pliku w różnych trybach i edytowanie kodu HTML, konieczne jest odpowiednie skonfigurowanie programu Word. W opcjach programu należy przejść do karty "Advanced", a następnie przewinąć do sekcji "General". Tam odznaczamy opcję "Confirm file format conversion on open". Dzięki temu uzyskamy dostęp do różnych trybów otwierania pliku i będziemy mogli swobodnie edytować kod HTML.

Zaawansowane opcje word - przygotowanie do edycji HTML.
Zrzut ekranu wykonany przez autora.

Następnie otwierając plik zaznaczamy opcję "Plain Text".

Opcje otwierania pliku w Word.
Zrzut ekranu wykonany przez autora.

Po pierwszym otworzeniu pliku, kasujemy zawartość tak utworzonego pliku.

Kasowanie niepotrzebnego kodu HTML, domyślnie wygenerowanego przez Word.
Zrzut ekranu wykonany przez autora.

I wklejamy kod HTML skopiowany ze strony Google Charts.

Kod HTML skopiowany z Google Charts
Zrzut ekranu wykonany przez autora.

Po wykonaniu powyższych kroków, efekt naszej pracy możemy zweryfikować, otwierając plik w naszej ulubionej przeglądarce internetowej. Kluczową zaletą tego podejścia jest możliwość edycji kodu bezpośrednio w Wordzie, co znacząco ułatwia proces. Po dokonaniu zmian w kodzie, wystarczy odświeżyć podgląd w przeglądarce, aby zobaczyć efekt wprowadzonych modyfikacji.

Otwieranie pliku w przeglądarce internetowej.
Otwieranie pliku. Zrzut ekranu wykonany przez autora.
Podgląd wizualizacji w Chrome.
Podgląd wizualizacji w Chrome. Zrzut ekranu wykonany przez autora.

Aby sprawdzić wprowadzone zmiany, konieczne jest odświeżenie wizualizacji w przeglądarce, podobnie jak robimy to przy przeglądaniu standardowych stron internetowych.


JSFiddle.

Jako alternatywę dla Worda możemy użyć z narzędzi dostępnych online. Jest ich całe mnóstwo. Nie jesteśmy w stanie omówić ich wszystkich, ale jedną z opcji jest JSFiddle. Bezpośrednio z Google Charts możemy przejść do edycji w JSFiddle, klikając odpowiedni link przy wizualizacji w Google Charts.

Przełączanie do JSFiddle z Google Charts.
Przełączanie do JSFiddle z Google Charts. Zrzut ekranu wykonany przez autora.
Praca nad wizualizacją w JSFiddle.
Praca nad wizualizacją w JSFiddle. Zrzut ekranu wykonany przez autora.

Aby zobaczyć efekt zmian w kodzie należy każdorazowo kliknąć przycisk "Run" w prawym górnym rogu ekranu.


Jak projektować wizualizację w Google Charts?

Pierwszym krokiem jest otwarcie witryny: https://developers.google.com/chart.

Widok Google Charts.
Widok Google Charts. Zrzut ekranu wykonany przez autora.

Następnie wybieramy "Chart Gallery".

Z listy dostępnych opcji wybieramy "Sankey Diagram".

Wykres Sankeya w Google Charts.
Wykres Sankeya w Google Charts. Zrzut ekranu wykonany przez autora.

Przewijamy niżej i kopiujemy jeden z podanych wariantów kodu HTML do Worda lub uruchamiamy JSFiddle.

Kod HTML wizualizacji.
Kod HTML wizualizacji. Zrzut ekranu wykonany przez autora.

Opcji modyfikacji kodu jest wiele, a wszystkie niezbędne instrukcje znajdują się bezpośrednio na stronie Google Charts. Tam też znajdą Państwo informacje, jak dostosować kolory wstęg, grubość węzłów czy czcionki. Na poniższym przykładzie wkleiłem propozycję Google Charts dotyczącą kolorowania wstęg, co zaznaczyłem żółtym markerem.

Wklejanie elementów kodu.
Wklejanie elementów kodu. Zrzut ekranu wykonany przez autora.

A oto uzyskany efekt w przeglądarce (Google Chrome).

Pokolorowany wykres.
Pokolorowany wykres. Zrzut ekranu wykonany przez autora.

Wprowadzanie danych do wykresu przygotowanego w Google Charts

Po zakończeniu pracy nad wizualizacją, możemy przejść do przygotowywania danych. Kluczowe jest to, że gotową wizualizację możemy traktować jako szablon, który będziemy uzupełniać o aktualne dane.


Poniżej przedstawiam fragment kodu HTML, który odpowiada za przetwarzanie danych.


Część kodu zawierająca dane.
Część kodu zawierająca dane. Zrzut ekranu wykonany przez autora.

W kodzie HTML, kolumna po lewej stronie przedstawia źródło przepływu danych ("Z"/"From"), środkowa kolumna to cel przepływu ("Do" / "To"), a ostatnia kolumna reprezentuje wartość przepływu.

Jako praktyczne rozwiązanie, proponuję przygotowanie arkusza kalkulacyjnego w Excelu, gdzie będą wprowadzone wszystkie niezbędne wartości. Po ich zaktualizowaniu, jedynym krokiem, który pozostaje do wykonania, jest zmiana zaznaczonej na żółto części kodu. Poniżej znajduje się zrzut ekranu, który pokazuje dane niezbędne do stworzenia wykresu Sankeya, wraz z formułą umożliwiającą ich przekształcenie do odpowiedniego formatu.


Formuła w Excelu, przygotowanie danych do wykresu Sankeya.
Formuła w Excelu, przygotowanie danych do wykresu Sankeya. Zrzut ekranu wykonany przez autora.
Gotowe wiersze z przepływami.
Gotowe wiersze z przepływami. Zrzut ekranu wykonany przez autora.

A oto produkt końcowy.


Użycie przygotowanego wykresu Google Charts

Po przygotowaniu wykresu, możliwości jego wykorzystania są liczne. Możemy umieścić kod wykresu na stronie internetowej lub, jak wcześniej wspomniano, osadzić go w dedykowanym oknie, na przykład na firmowym portalu SharePoint.

Jeśli chcielibyśmy wykorzystać wykres w prezentacji PowerPoint, sytuacja staje się nieco bardziej skomplikowana, co można uznać za jedną z wad Google Charts. Po przetestowaniu kilku możliwości, widzę dwa efektywne rozwiązania:

  1. Możemy stworzyć link do pliku z wykresem na slajdzie i otworzyć go podczas prezentacji. Minusem tej metody jest konieczność opuszczenia prezentacji PowerPoint, a także kwestie estetyczne (link otworzy się w domyślnej przeglądarce internetowej).

  2. Możemy uzupełnić kod o element wskazany tu. W tej sytuacji, wykres będzie można zapisać jako obrazek *.png. Nie jest to jednak możliwe w przypadku każdego wykresu.

  3. Inną opcją jest zapisanie obrazka z wykresem (na przykład poprzez zrzut ekranu) i umieszczenie go bezpośrednio w prezentacji PowerPoint. Wadą tego rozwiązania jest brak interaktywności wykresu, jednak warto zastanowić się, czy interaktywność jest nam rzeczywiście potrzebna podczas prezentacji.

Podsumowanie

Niniejszy post rozpoczyna serię o darmowych i prostych narzędziach do tworzenia wizualizacji danych. Dziś skupiłem się na Google Charts, usłudze od Google umożliwiającej tworzenie interaktywnych wykresów. Działanie Google Charts omówiłem na przykładzie wykresu Sankeya, który świetnie oddaje złożoność przepływów danych.


Zalety Google Charts to m.in.

  • duży wybór wizualizacji,

  • łatwość osadzenia wykresu na stronie internetowej oraz

  • interaktywność wizualizacji.

Wady to:

  • konieczność wprowadzania danych do kodu HTML oraz

  • trudność w osadzaniu wizualizacji w PowerPoint.

 

Źródła:

  1. Google Charts, Sankey Diagram

  2. Michał Szudejko, Dekalog wizualizacji

 

Podobał się Ci ten post? Zachęcam do subskrypcji!

Commentaires


bottom of page