CherryFramework 4.0 – dodawanie wykresów oraz obsługa shortcode

Cherry Chart

Pierwszą z wtyczek, które opiszę, będzie Cherry Chart. Za pomocą tego pluginu możemy szybko i sprawnie dodawać wykresy na stronę internetową. Co więcej do dyspozycji mamy następujące rodzaje prezentacji danych:

• pasek postępu,
• wykres kołowy,
• wykres pierścieniowy,
• pasek.

Za pomocą Cherry Chart stworzymy powyższe wykresy na obydwóch stronach i porównamy je ze sobą.

Na początku przechodzimy do panelu administracyjnego pierwszej strony i przełączamy się do sekcji Charts (Wykresy), która pojawiła się po instalacji wtyczki Cherry Charts. Dalej klikamy przycisk Add new chart (Dodaj nowy wykres), po czym pojawi się nowe okno z ustawieniami dla tworzenia wykresu (rys. 3):

W analogiczny sposób przechodzimy do tworzenia wykresu na stronie drugiej (rys. 4):

Porównując okno z opcjami wtyczki na dwóch stronach www, można zobaczyć, że mają one różny wygląd. Na stronie 1 nie działają przyciski „+” i „–”, i nie ma opcji wyboru koloru sektorów i tła wykresu z wyskakującego okna (kolory można tylko wpisywać ręcznie w formacie szesnastkowym). Na stronie 2 takie opcje są dostępne. Różnica miedzy funkcjonalnością pomiędzy opcjami na stronie 1 i stronie 2 wskazuje na to, że ostatnie związane są z CherryFramework. To oznacza, że wtyczka niestety nie jest całkowicie niezależna od frameworku.

Przejdźmy teraz do tworzenia wykresów, zacznijmy od paska postępu. W polu Chart typ (Typ wykresu) wybieramy wykres: Progress bar (Pasek postępu) i ustawiamy parametr Radial (Promeniowy). Inne możliwe warianty to Horizontal (Horyzontalny), Vertical (Wertykalny). 

Także dla tego typu wykresu dostępne są również inne opcje, pozwalające wgrać odpowiednie dane i stylizować wykres pod własne potrzeby. Dotyczą one:

1. Rozmiaru wykresu:
   • Inner cutout percentage czyli odległość paska od środka ekranu,
   • Width czyli szerokość,
   • Height czyli wysokość
2.  Treści wykresu:
   • Progress bar template czyli szablon pasku postępu,
   • Chart icon – ikona dla wykresu,
   • Chart icon size – roomier irony,
   • Chart icon color – kolor ikony.
3. Danych wykresu:
4. Wyglądu wykresu
   • Item #n color – kolor n-go elementu (sektora) wykresu,
   • Background color – color tła,
   • Items opacity – przezroczystość elementów,
   • Background opacity – przezroczystość tła,
   • Chart stroke thickness – grubość linii,
   • Chart stroke color – kolor linii,
   • Chart stroke opacity – przezroczystość linii.
5. Autorstwa:

Przedstawione wyżej opcje pozwalają dopasować wykres pod własne potrzeby. W naszym przypadku będziemy jednak korzystać się z ustawień domyślnych, gdyż naszym głównym celem jest porównanie wykresu z tymi samymi ustawieniami na dwóch różnych stronach.

Na sam końcu przypisujemy nazwę do naszego wykresu: „Pasek dostępu” i zapiszemy go. W taki sam sposób tworzymy wykres na stronie 2.

Teraz można opublikować nasz wykres bezpośrednio na stronie internetowej. W naszym przypadku zrobimy to za pomocą zwykłego wpisu, ale warto też wspomnieć, że wykresy  można dodawać w dowolne miejsca. Stworzony wykres można opublikować umieszczając go w artykule za pomocą jednego z poniższych sposobów:

1. Możemy skopiować shortcode wykresu z sekcji Shortcode to paste (Shortcode do skopiowania) (rys. 9) i stworzyć nowy wpis:Skopiowany shortcode należy wstawić w dowolne miejsce artykułu (rys. 10):Możemy zapisać zmiany i przejść na stronę www z artykułem (rys. 11):Jak widać przygotowany przez nas wykres pojawił się na stronie.
2. Możemy również z poziomu okna edytowanego wpisu wybrać przycisk Wstaw shortcode (rys.12):Następnie pojawi się okno, w którym można wybrać różne shortcodes. W naszym przypadku należy wybrać shortcode Chart (Wykres) (rys. 13):Dalej w nowym oknie przechodzimy do pola Chart ID (ID wykresu), w którym należy podać numer ID wykresu. Zobaczyć go można pod czas edycji wykresu w polu Shortcode to paste. W naszym przypadku, id to 6. Również w tym oknie można zmodyfikować styl wykresu, który my zostawiamy bez zmian. Wstawiamy nasz shortcode do artykułu za pomocą przycisku Wstaw shortcode (rys.14):Dzięki temu stworzony przez nas shortcode pojawi się w artykule (rys. 10). Po tym jak zmiany będą zapisane, otrzymamy stronę www zawierającą wykres (rys.11).Proszę zwrócić uwagę, że podany sposób działa tylko przy zainstalowanej i aktywowanej wtyczce Cherry Shortcodes.

Porównując wykresy paska postępu na stronach 1 oraz 2 widać, że wyglądają one tak samo. To znaczy, że funkcje wtyczki działają poprawnie również bez zainstalowanego CherryFramework.

Dalej porównamy sobie pozostałe wykresy, które będziemy tworzyć w taki sam sposób jak i pasek postępu. W rezultacie będą one wyglądać następująco:

1. Wykres kołowy
2. Wykres pierścieniowy:

Stworzone powyżej wykresy na stronach 1 i 2 będą wyświetlane w jednakowy sposób. To potwierdza, że wtyczka jest praktyczni niezależna od CherryFramework. Jedyny problem jest z niektórymi opcjami stylizacji, które nie działają poprawnie na stronie bez frameworku.

Wtyczka CherryCharts jest bardzo prostym instrumentom dla tworzenia wykresów na stronę www, w porównywaniu do innych dostępnych na rynku rozwiązań. Wykonuje ona w pełni swoją rolę i ma wszystkie potrzebne funkcje dla tworzenia wykresów na stronie www.  A po usunięciu niektórych problemów z opcjami związanymi z CherryFramework stanie się dobrym rozwiązaniem dla tworzenia infografiki.

Strony: 1 2 3 4 5 6

Chart, Cherry Chart, Cherry Framework, Cherry Shortcode Templater, Cherry Shortcodes, Dodawanie wykresu na stronie internetowej, Programowanie, Tworzenie stron WWW, WordPress, Wykresy w Wordpressie