Jak na stronie Joomla wyświetlić interaktywne wykresy? Poznaj nasz autorski plugin DC Charts

Wtyczka DC Charts powstała z bardzo prostego powodu — w Joomla 5 wciąż brakowało narzędzia, które pozwoliłoby wstawić estetyczny, interaktywny wykres w kilka sekund, bez dotykania kodu.

Każdy, kto kiedykolwiek próbował pokazać dane w artykule, wie, że ręczne wklejanie iframe z Google Charts albo tworzenie grafik w Canvie to droga donikąd — czasochłonne, mało elastyczne i kompletnie niepasujące do redakcyjnego workflow.

Chcieliśmy, by autor artykułu mógł po prostu napisać tekst, dodać prosty shortcode z danymi i od razu zobaczyć wykres — bez żadnych wtyczek zewnętrznych, bez logowania do panelu API, bez konieczności znajomości JavaScriptu. Tak właśnie narodził się DC Charts – lekki plugin treści, który generuje dynamiczne wykresy w oparciu o bibliotekę Chart.js.

Z doświadczenia wiemy, że integracja z Chart.js jest najbardziej naturalna w kontekście Joomla 5. Testowaliśmy wiele bibliotek — od Google Charts po d3.js — ale żadna nie współpracowała tak płynnie z nową architekturą systemu. Dlatego zrobiliśmy to po swojemu: minimalistycznie, bez zależności, w duchu open source. Tworzenie stron WWW firmowych których zadaniem jest prezentacja danych analitycznych z DC Charts jest znacznie prostsza.

 

Co potrafi DC Charts

DC Charts to lekki plugin treści, który pozwala w prosty sposób dodawać wykresy bezpośrednio w artykułach Joomla 5. Obsługuje cztery najczęściej używane typy: kołowy, słupkowy, liniowy i pierścieniowy (doughnut) – dzięki czemu możesz przedstawić zarówno strukturę danych, jak i zmiany w czasie.

Plugin umożliwia dodanie tytułu, legendy, etykiet, kolorów oraz podpisów osi, co pozwala dopasować wygląd wykresu do stylu Twojej strony. Wszystkie elementy skalują się automatycznie do szerokości ekranu, więc wykresy zawsze wyglądają dobrze – zarówno na monitorze, jak i w widoku mobilnym.

DC Charts działa w każdym szablonie Joomla 5, również w tych opartych na Bootstrap 5, i nie wymaga żadnych dodatkowych bibliotek. Nie korzysta z jQuery ani z zewnętrznych API (np. Google), dzięki czemu ładuje się błyskawicznie i jest w pełni bezpieczny.

Największą zaletą jest prostota obsługi. Wystarczy w treści artykułu wpisać krótki shortcode z danymi – bez paneli konfiguracyjnych, bez edytowania kodu. Zapisujesz artykuł, a plugin automatycznie generuje interaktywny wykres w miejscu, w którym dodałeś shortcode.

 

Przykłady użycia DC Charts

Aby pokazać, jak elastyczny jest plugin DC Charts, przygotowaliśmy kilka przykładów dla wszystkich obsługiwanych typów wykresów.
W każdym z nich dane możesz dowolnie zmieniać — wystarczy wpisać swoje etykiety, wartości i kolory.

👉Pamiętaj aby poniższy kod umieścić w klamrach {}

 

🥧 Wykres kołowy

Prosty podział metod płatności w sklepie internetowym:

dcchart type="pie" title="Udział metod płatności" labels="BLIK,Szybkie przelewy,Karta,PayPal,BNPL" values="38,32,15,8,7" legend="bottom"

👉 Wykres automatycznie obliczy wartości procentowe i wyświetli je na kolorowych segmentach.

 

🍩 Wykres pierścieniowy (doughnut)

Podobny do kołowego, ale z pustym środkiem — idealny do porównań udziałów:

dcchart type="doughnut" title="Podział kanałów sprzedaży 2025" labels="Sklep online,Marketplace,Social media,B2B" values="45,30,15,10" legend="right"

📊 Wykres słupkowy

Porównanie najczęstszych powodów porzucenia koszyka:

dcchart type="bar" title="Porzucone koszyki – przyczyny" labels="Koszty dostawy,Problemy z płatnością,Brak zaufania,Zbyt długi proces,Inne" values="40,13,18,17,12" color="#007ec3" ylabel="Udział (%)"

👉 W tym typie wykresu możesz też dodać podpisy osi X i Y dla większej czytelności danych.

 

📈 Wykres liniowy

Idealny do prezentowania trendów w czasie, np. wzrost popularności płatności BNPL:

dcchart type="line" title="Wzrost BNPL 2020–2025" labels="2020,2021,2022,2023,2024,2025" values="1,2,3,5,6,7" color="#f66d6d" ylabel="Udział w rynku (%)"

👉 Wartości są połączone płynną linią, a każdy punkt danych jest zaznaczony na wykresie.

Każdy z tych przykładów można skopiować bezpośrednio do edytora artykułów w Joomla 5.
Po zapisaniu — plugin DC Charts automatycznie zamieni je na dynamiczne, interaktywne wykresy dopasowane do Twojego szablonu.

 

Dlaczego to rozwiązanie jest lepsze od gotowych komponentów

Na rynku istnieje wiele rozszerzeń do wizualizacji danych w Joomla, jednak większość z nich jest ciężka, wymaga integracji z zewnętrznymi API lub nie działa poprawnie z najnowszą wersją CMS-a. DC Charts powstał właśnie po to, by rozwiązać te problemy.

• Zero zależności. Plugin nie wymaga żadnych bibliotek typu jQuery ani zewnętrznych API. Ładuje wyłącznie lekki, bezpieczny skrypt Chart.js z CDN, zgodny z nowoczesnymi standardami JavaScript.

• Lekkość. Całość zajmuje mniej niż 10 kB – nie spowalnia strony, nie obciąża serwera, nie wymaga konfiguracji.

• Bezpieczeństwo. Wtyczka działa całkowicie lokalnie – nie wysyła danych do chmury i nie pobiera informacji z zewnętrznych serwisów. Wszystkie dane pochodzą bezpośrednio z artykułów Joomla.

• Integracja z Joomla 5. DC Charts został zaprojektowany specjalnie pod nową architekturę Joomla – działa z systemem treści, DI Containerem i nowym silnikiem pluginów.

• Estetyka. Wykresy automatycznie dopasowują się do kolorystyki szablonu – zarówno w wersji jasnej, jak i ciemnej. Wyglądają profesjonalnie i naturalnie w każdej stylistyce strony.

Efekt? Pełna funkcjonalność bez kompromisów – nowoczesne wykresy, które po prostu działają.

 

Gdzie pobrać wtyczkę

Wtyczka DC Charts jest dostępna całkowicie za darmo w repozytorium Design Cart. Możesz ją pobrać w postaci gotowego pliku ZIP, który zainstalujesz bezpośrednio w panelu Joomla 5.

📦 Pobierz plugin:
👉 https://www.designcart.pl/download/plg_content_dcchart.zip

🔑 Licencja:
Projekt jest udostępniany na licencji GPL (GNU General Public License) – możesz swobodnie używać, modyfikować i rozpowszechniać wtyczkę w swoich projektach.

🧭 Instrukcja instalacji:

1. Wejdź w panel administracyjny Joomla → Rozszerzenia → Instaluj z pakietu.

2. Wskaż pobrany plik plg_content_dcchart.zip.

3. Po instalacji przejdź do System → Wtyczki → Treść i włącz plugin „Content – DC Charts”.

4. Gotowe! Teraz możesz wklejać shortcode’y w artykułach, a Joomla automatycznie zamieni je w interaktywne wykresy.

Dzięki prostocie instalacji i pełnej kompatybilności z Joomla 5, uruchomienie wykresów na stronie zajmuje mniej niż minutę.

 

Najczęstsze pytania

Czy można używać wielu wykresów w jednym artykule?
Tak, bez żadnych ograniczeń. Wystarczy wstawić kilka shortcode’ów w treści artykułu — każdy z nich zostanie automatycznie przetworzony na osobny wykres.

Czy wtyczka działa w Joomla 4?
Tak, DC Charts jest w pełni kompatybilny z Joomla 4.3 i nowszymi, a także z Joomla 5.x. Wykorzystuje nowoczesne mechanizmy systemu treści, dlatego działa równie dobrze na obu wersjach CMS-a.

Czy można zmienić kolory wykresu?
Oczywiście. Kolory można ustawić bezpośrednio w shortcode za pomocą parametru color (np. color="#007ec3") lub dostosować globalnie w pliku CSS szablonu.
Dzięki temu każdy wykres może idealnie pasować do Twojej identyfikacji wizualnej.

 

Dla kogo jest DC Charts

DC Charts to uniwersalny plugin stworzony z myślą o wszystkich, którzy chcą prezentować dane w atrakcyjny i przejrzysty sposób — bez potrzeby pisania kodu czy korzystania z zewnętrznych narzędzi.

• 📰 Dla autorów blogów i magazynów online – pozwala szybko wizualizować dane z ankiet, statystyk odwiedzin czy wyników badań bez opuszczania edytora artykułów.

• 🛒 Dla sklepów internetowych – świetnie sprawdza się przy prezentowaniu udziału metod płatności, poziomu sprzedaży produktów czy sezonowych trendów zakupowych.

• 🎓 Dla edukatorów i instytucji – umożliwia wstawianie wykresów w materiałach dydaktycznych, publikacjach i raportach naukowych.

• 💼 Dla firm i agencji – idealny do tworzenia wizualnych podsumowań raportów, zestawień KPI i wyników kampanii marketingowych.

Niezależnie od branży, DC Charts ułatwia przekazywanie informacji w sposób, który przyciąga uwagę i buduje zaufanie – zgodnie z zasadami E-E-A-T i Helpful Content Update.

 

Podsumowanie

DC Charts to nowoczesny, lekki i w pełni samowystarczalny plugin dla Joomla, który w kilka sekund potrafi zamienić zwykły tekstowy shortcode w efektowny, interaktywny wykres. Bez kodowania, bez integracji z zewnętrznymi usługami, bez zbędnych zależności.

Powstał z praktycznej potrzeby — zbyt wiele gotowych rozszerzeń było ciężkich, przestarzałych lub wymagało ręcznej edycji HTML i JS. DC Charts rozwiązuje ten problem, oferując prostotę, elastyczność i pełną zgodność z Joomla 4 i 5.

Dzięki niemu każdy artykuł, raport czy wpis na blogu może zyskać profesjonalny, wizualny charakter. Wystarczy kilka parametrów, by pokazać dane w formie wykresu kołowego, słupkowego, liniowego lub pierścieniowego.

👉 Pobierz, zainstaluj, wklej shortcode – i gotowe.
DC Charts to małe narzędzie, które robi duże wrażenie.