Kurs "WordPress: Pierwsze kroki" (na dobry początek)

Napisała do mnie koleżanka, że wymyśliła sobie, by na swojej stronie zrobić coś w stylu Wheel Of Life (koło życia) w formie wykresu radarowego. Można powiedzieć, że nawet odrobiła „pracę domową”, bo „zapukała do mnie” z gotową propozycją, tzn. skryptem, z którego chciałaby skorzystać. Chodziło o projekt Wheel-Of-Life (codescale), który nie tylko jest dostępny w serwisie GitHub, ale chyba można z niego korzystać bezpłatnie, również w celach komercyjnych. Już samo to brzmi wystarczająco dobrze… ;-)

Wheel Of Life z demo amCharts w WordPressie

Po wstępnej analizie potrzeb i przedstawionego projektu (rozwiązania) uznałem, że będzie można zaadaptować to do wymagań, choć z pewnych względów stronę tę wyjmiemy z WordPressa, na którym działa strona. Co nie tyle oznaczało, że strona będzie całkowicie niezależna, ile po prostu wykorzystamy tutaj mechanizm szablonów stron, by przygotować odpowiednią stronę.

Prace ruszyły, aż tu nagle koleżanka pisze, że znalazła coś, co jej (jeszcze) bardziej odpowiada, czyli Wheel Of Life z demo amCharts… I trzeba uczciwie przyznać, że faktycznie ta wersja „z automatu” prezentuje się lepiej.

Kliknij i sprawdź przykładowe wdrożenia wykresów radarowych na stronie internetowej na WordPressie.

Co jeszcze ciekawsze, dostępna jest oficjalna wtyczka do WordPressa (amCharts: Charts and Maps), dzięki czemu taki wykres można osadzić właściwie w dowolnym miejscu, za pomocą tzw. krótkiego kodu (shortcode):

Kolejny krokiem było przeniesienie demo „Interactive Wheel of Life” do WordPressa, a konkretnie do ich wtyczki, tak by to wszystko nie tylko działało, ale by później koleżanka mogła edytować m.in. kolory i treści:

Mamy tutaj 5 pól do wypełnienia, zaczynając od tytułu, który właściwie może być dowolny, i ma najmniejsze znaczenie.

Dalej mamy „resources”, i tutaj wpisujemy (lub wybieramy z listy) zasoby/biblioteki, które będą załadowane na potrzeby danego wykresu. Bazując na dostępnym na stronie amCharts demo Wheel Of Life wybrałem z listy:

//www.amcharts.com/lib/4/core.js
//www.amcharts.com/lib/4/charts.js
//www.amcharts.com/lib/4/themes/animated.js

Kolejne istotne pole, to HTML, i tutaj również skorzystałem z demo. Na początku – by sprawdzić, czy to w ogóle tak zadziała – jedynie rozbijając kod na HTML i JavaScript, oraz zmieniając w dwóch miejscach identyfikator głównego DIVa z „chartdiv” na „$CHART$” (zresztą zgodnie z informacją przekazywaną przez wtyczkę). Od razu dodałem też akapit dla opisu przy każdym pytaniu oraz „spolszczyłem” teksty, tak by osoba podmieniająca później tekst lepiej wiedziała co i gdzie zrobić:

<style>
body {}

#$CHART$ {
  width: 100%;
  height: 600px;
}

.areas {
  text-align: center;
  margin-bottom: 15px;
  min-height: 95px;
}

.areas .value {
  display: inline-block;
  font-size: 1.3em;
  padding: 5px 10px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.areas .value:hover {
  background: #ecc;
}

.area p {
  margin: 1em 0 1em 0;
}

.area.finisz {
  margin: 1em 0 1em 0 !important;
}
</style>

<div class="areas">
	<div class="area">
		<h3>Pytanie 1</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit?</p>
		<div class="values">
			<div class="value" onclick="setValue(0, 1);">1</div>
			<div class="value" onclick="setValue(0, 2);">2</div>
			<div class="value" onclick="setValue(0, 3);">3</div>
			<div class="value" onclick="setValue(0, 4);">4</div>
			<div class="value" onclick="setValue(0, 5);">5</div>
			<div class="value" onclick="setValue(0, 6);">6</div>
			<div class="value" onclick="setValue(0, 7);">7</div>
			<div class="value" onclick="setValue(0, 8);">8</div>
			<div class="value" onclick="setValue(0, 9);">9</div>
			<div class="value" onclick="setValue(0, 10);">10</div>
		</div>
	</div>
	<div class="area" style="display: none;">
		<h3>Pytanie 2</h3>
		<p>Quisque hendrerit sagittis massa, fermentum vestibulum?</p>
		<div class="values">
			<div class="value" onclick="setValue(1, 1);">1</div>
			<div class="value" onclick="setValue(1, 2);">2</div>
			<div class="value" onclick="setValue(1, 3);">3</div>
			<div class="value" onclick="setValue(1, 4);">4</div>
			<div class="value" onclick="setValue(1, 5);">5</div>
			<div class="value" onclick="setValue(1, 6);">6</div>
			<div class="value" onclick="setValue(1, 7);">7</div>
			<div class="value" onclick="setValue(1, 8);">8</div>
			<div class="value" onclick="setValue(1, 9);">9</div>
			<div class="value" onclick="setValue(1, 10);">10</div>
		</div>
	</div>
	<div class="area" style="display: none;">
		<h3>Pytanie 3</h3>
		<p>Integer aliquet justo posuere magna efficitur commodo?</p>
		<div class="values">
			<div class="value" onclick="setValue(2, 1);">1</div>
			<div class="value" onclick="setValue(2, 2);">2</div>
			<div class="value" onclick="setValue(2, 3);">3</div>
			<div class="value" onclick="setValue(2, 4);">4</div>
			<div class="value" onclick="setValue(2, 5);">5</div>
			<div class="value" onclick="setValue(2, 6);">6</div>
			<div class="value" onclick="setValue(2, 7);">7</div>
			<div class="value" onclick="setValue(2, 8);">8</div>
			<div class="value" onclick="setValue(2, 9);">9</div>
			<div class="value" onclick="setValue(2, 10);">10</div>
		</div>
	</div>
	<div class="area" style="display: none;">
		<h3>Pytanie 4</h3>
		<p>Nam cursus, turpis non consequat mattis, lacus odio pretium?</p>
		<div class="values">
			<div class="value" onclick="setValue(3, 1);">1</div>
			<div class="value" onclick="setValue(3, 2);">2</div>
			<div class="value" onclick="setValue(3, 3);">3</div>
			<div class="value" onclick="setValue(3, 4);">4</div>
			<div class="value" onclick="setValue(3, 5);">5</div>
			<div class="value" onclick="setValue(3, 6);">6</div>
			<div class="value" onclick="setValue(3, 7);">7</div>
			<div class="value" onclick="setValue(3, 8);">8</div>
			<div class="value" onclick="setValue(3, 9);">9</div>
			<div class="value" onclick="setValue(3, 10);">10</div>
		</div>
	</div>
	<div class="area" style="display: none;">
		<h3>Pytanie 5</h3>
		<p>Orci varius natoque penatibus et magnis dis parturient montes?</p>
		<div class="values">
			<div class="value" onclick="setValue(4, 1);">1</div>
			<div class="value" onclick="setValue(4, 2);">2</div>
			<div class="value" onclick="setValue(4, 3);">3</div>
			<div class="value" onclick="setValue(4, 4);">4</div>
			<div class="value" onclick="setValue(4, 5);">5</div>
			<div class="value" onclick="setValue(4, 6);">6</div>
			<div class="value" onclick="setValue(4, 7);">7</div>
			<div class="value" onclick="setValue(4, 8);">8</div>
			<div class="value" onclick="setValue(4, 9);">9</div>
			<div class="value" onclick="setValue(4, 10);">10</div>
		</div>
	</div>
	<div class="area" style="display: none;">
		<h3>Pytanie 6</h3>
		<p>In semper, erat ac scelerisque sagittis, ipsum orci magna?</p>
		<div class="values">
			<div class="value" onclick="setValue(5, 1);">1</div>
			<div class="value" onclick="setValue(5, 2);">2</div>
			<div class="value" onclick="setValue(5, 3);">3</div>
			<div class="value" onclick="setValue(5, 4);">4</div>
			<div class="value" onclick="setValue(5, 5);">5</div>
			<div class="value" onclick="setValue(5, 6);">6</div>
			<div class="value" onclick="setValue(5, 7);">7</div>
			<div class="value" onclick="setValue(5, 8);">8</div>
			<div class="value" onclick="setValue(5, 9);">9</div>
			<div class="value" onclick="setValue(5, 10);">10</div>
		</div>
	</div>
	<div class="area" style="display: none;">
		<h3>Pytanie 7</h3>
		<p>Vestibulum volutpat turpis mauris, quis hendrerit augue?</p>
		<div class="values">
			<div class="value" onclick="setValue(6, 1);">1</div>
			<div class="value" onclick="setValue(6, 2);">2</div>
			<div class="value" onclick="setValue(6, 3);">3</div>
			<div class="value" onclick="setValue(6, 4);">4</div>
			<div class="value" onclick="setValue(6, 5);">5</div>
			<div class="value" onclick="setValue(6, 6);">6</div>
			<div class="value" onclick="setValue(6, 7);">7</div>
			<div class="value" onclick="setValue(6, 8);">8</div>
			<div class="value" onclick="setValue(6, 9);">9</div>
			<div class="value" onclick="setValue(6, 10);">10</div>
		</div>
	</div>
	<div class="area" style="display: none;">
		<h3>Pytanie 8</h3>
		<p>Nam cursus, turpis non consequat mattis, odio pretium nulla?</p>
		<div class="values">
			<div class="value" onclick="setValue(7, 1);">1</div>
			<div class="value" onclick="setValue(7, 2);">2</div>
			<div class="value" onclick="setValue(7, 3);">3</div>
			<div class="value" onclick="setValue(7, 4);">4</div>
			<div class="value" onclick="setValue(7, 5);">5</div>
			<div class="value" onclick="setValue(7, 6);">6</div>
			<div class="value" onclick="setValue(7, 7);">7</div>
			<div class="value" onclick="setValue(7, 8);">8</div>
			<div class="value" onclick="setValue(7, 9);">9</div>
			<div class="value" onclick="setValue(7, 10);">10</div>
		</div>
	</div>
	<div class="area finisz" style="display: none;">
		<h3>Gotowe!</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</div>
</div>
<div id="$CHART$"></div>

Przedostatnie pole to JavaScript, i tutaj wklejamy resztę kodu z demo (pamiętając o podmianie „chartdiv” na „$CHART$”):

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("$CHART$", am4charts.RadarChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.data = [ {
	"category": "Pytanie 1",
	"value": 0,
	"color": chart.colors.next()
}, {
	"category": "Pytanie 2",
	"value": 0,
	"color": chart.colors.next()
}, {
	"category": "Pytanie 3",
	"value": 0,
	"color": chart.colors.next()
}, {
	"category": "Pytanie 4",
	"value": 0,
	"color": chart.colors.next()
}, {
	"category": "Pytanie 5",
	"value": 0,
	"color": chart.colors.next()
}, {
	"category": "Pytanie 6",
	"value": 0,
	"color": chart.colors.next()
}, {
	"category": "Pytanie 7",
	"value": 0,
	"color": chart.colors.next()
}, {
	"category": "Pytanie 8",
	"value": 0,
	"color": chart.colors.next()
} ];

chart.padding(20, 20, 20, 20);

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.template.location = 0.5;
categoryAxis.renderer.tooltipLocation = 0.5;

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;
valueAxis.max = 10;
valueAxis.renderer.minGridDistance = 10;

var series = chart.series.push(new am4charts.RadarColumnSeries());
series.columns.template.tooltipText = "{categoryX}: {valueY.value}";
series.columns.template.width = am4core.percent(100);
series.columns.template.strokeWidth = 0;
series.columns.template.column.propertyFields.fill = "color";
series.dataFields.categoryX = "category";
series.dataFields.valueY = "value";

/**
 * Sets value for particular index
 */
function setValue(index, value) {

	// Set value
	chart.data[index].value = value;
	chart.invalidateRawData();

	// Reveal next question
	var areas = document.getElementsByClassName("area");
	for(var i = 0; i < areas.length; i++) {
		areas[i].style.display = (index + 1) === i ? "block" : "none";
	}
}

Na koniec jeszcze „slug” zmieniłem na „wol-1”, ta by łatwiej było zapamiętać, i po zapisaniu można było już skorzystać z krótkiego kodu na stronie, by wyświetlić nasze „koło życia”:

[amcharts id="wol-1"]

A efekt wyglądał mniej więcej tak:

Mniej więcej, bo dla przykładu, by koleżanka wiedziała gdzie i jak podmieniać kolory na wykresie, od razu dla pytania pierwszego ustawiłem konkretny kolor, zamiast „automatycznego”.

W tym celu zamieniłem:

"color": chart.colors.next()

na:

"color": "#88b15b"

I gdy myślałem, że na tym już koniec, koleżanka rzuciła, że dobrze by było, gdyby użytkownik mógł sobie pobrać wygenerowany wykres, tak, by mógł sobie później porównać „przed” z „po” (prawdopodobnie w kontekście jakiegoś kursu internetowego, ale w to już nie wnikałem ;-)).

Zobacz również: Eksport wykresu z amCharts do pliku PDF wraz z jego modyfikacją, na przykładzie koła życia (Wheel Of Life)

Uznałem, że amCarts wydaje się na tyle zaawansowanym rozwiązaniem, że na pewno jakieś opcje eksportu wykresu muszą być. I faktycznie, wystarczyło w sekcji JavaScript, zaraz za zamknięciem ostatniego nawiasu klamrowego dodać linijkę:

chart.exporting.menu = new am4core.ExportMenu();

Minusem tego rozwiązania było to, że użytkownik dostawał pełno opcji i formatów, i potencjalnie łatwo mógł się w tym zgubić. Dlatego postanowiłem ograniczyć dostępne opcje do 2 pozycji, czyli zapisz PNG i drukuj, dodając poniżej jeszcze:

chart.exporting.menu.items = [{
	"label": "...",
	"menu": [
    	{ "type": "png", "label": "Pobierz", "options": { "quality": 1 } },
    	{ "label": "Drukuj", "type": "print" }
  	]
}];

Kolejną modyfikacją było wymuszenie nazwy pliku (prefiks), tak by po pobraniu nie zginął on wśród innych. W tym celu dodałem jeszcze:

chart.exporting.filePrefix = "webinsider-wol";

Dzięki czemu plik zapisuje się jako „webinsider-wol.png”, zamiast „image.png”. I jeśli chodzi o moje zadanie to najpewniej na tym koniec, dalej już koleżanka musi sobie ten wykres zasilić treścią. Chyba że jeszcze coś jej do głowy wpadnie… A nawet jak nie, to przy tej okazji powstał projekt WykresyRadarowe.pl, gdzie nie tylko umieszczam przykładowe wykresy, ale oferuję usługi związane z ich wdrażaniem… :-)

Przejdź do strony głównej

Lub napisz komentarz

Pomogłem? To może postawisz mi wirtualną kawę?

LUTy dla D-Cinelike (DJI Mini 3 Pro, DJI Avata, OSMO Pocket) od MiniFly

Wdrożenie Omnibusa w sklepie na WooCommerce

Jak (legalnie) latać dronem w Kategorii Otwartej

Kurs "WordPress: Pierwsze kroki" (bezpłatna lekcja)

O autorze
Ostatnie artykuły

Patryk

CEO Webinsider.pl, a do tego CTO, CIO, CFO, CMO, CSO, COO i CRO ;-)
Pasjonat nowych technologii - od sprzętu po oprogramowanie, od serwerów po smartfony i rozwiązania IoT. Potencjalnie kiepski bloger, bo nie robi zdjęć "talerza" zanim zacznie jeść.

Dumny przyjaciel swoich psów :-)

Ostatnie artykuły: Patryk (zobacz wszystkie)

Tworzysz stronę internetową i potrzebujesz pomocy?

Napisz komentarz Anuluj pisanie odpowiedzi

Pamiętaj by podpisać się imieniem lub pseudonimem (nick) - inne podpisy (zwłaszcza słowa kluczowe, nazwa domeny, nazwa firmy, itp.) mogą być modyfikowane. Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *.
Komentarze mogą być moderowane - dlatego może się zdarzyć, że Twój komentarz nie pojawi się od razu...

Komentarz

Komentarze mogą być moderowane - dlatego może się zdarzyć, że Twój komentarz nie pojawi się od razu...

Nazwa *

E-mail *

Uwaga *

Informuj mnie o odpowiedziach poprzez email. Subskrybuj bez komentarza.

Klikając przycisk "wyślij komentarz" akceptujesz, że Twoje dane będą przetwarzane zgodnie z naszą polityką prywatności.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Interaktywne Wheel Of Life (koło życia) w WordPressie, generowane przy pomocy biblioteki amCharts

Wheel Of Life z demo amCharts w WordPressie

O autorze

Patryk

Napisz komentarz Anuluj pisanie odpowiedzi

Zostańmy przyjaciółmi

Wesprzyj nas!

Promocja własna

Najnowsze wpisy

Wakacje składkowe ZUS a zawieszenie działalności gospodarczej, czyli uważaj, bo być może nie będziesz mógł skorzystać (w 2024)

Przykładowy kalkulator wyceny usługi druku 3D, czyli nie tylko materiał się liczy

Home Assistant 2024.10, czyli nowa karta „nagłówek” i niedziałający TTS w ramach usługi Google Cloud

Zero Trust od Cloudflare, czyli prosty i bezpieczny sposób na dostęp do lokalnych zasobów z zewnątrz, bez publicznego adresu IP i otwierania portów na routerze

Home Assistant i integracja z IMGW-PIB, czyli tworzymy automatyzację z powiadomieniami bazując na sensorach zagrożenie i alarm powodziowy

Promocja własna

Newslog

Matt Mullenweg (Automattic) kontra WP Engine, czyli gdy tak się zagapisz w źdźbło w oku brata swego, a belki w oku swoim nie dostrzegasz

Google Home for web (Google Home dla przeglądarek) teraz z eksperymentalną opcją pisania skryptów/automatyzacji wraz ze wsparciem AI

MerkleMap, czyli prosty i szybki sposób na poznanie (praktycznie) wszystkich subdomen dostępnych w ramach domeny

Orange dalej testuje… swoich klientów, czyli po wrześniowym zniknięciu doładowania za 5 zł, teraz przyszła pora na doładowanie za 25 zł

Strefa DRA-R wzdłuż Odry, czyli legalnie dronem nie polatasz

Promocja własna

Pin It on Pinterest

Interaktywne Wheel Of Life (koło życia) w WordPressie, generowane przy pomocy biblioteki amCharts

Wheel Of Life z demo amCharts w WordPressie

O autorze

Podobne wpisy

Napisz komentarz Anuluj pisanie odpowiedzi

Zostańmy przyjaciółmi

Wesprzyj nas!

Promocja własna

Najnowsze wpisy

Promocja własna

Newslog

Promocja własna

Pin It on Pinterest