Drupal a interaktivní grafy jednoduše pomocí Views

Nejrůznější přehledy, které je Drupal schopen generovat, můžete vylepšit o zobrazení ve formě grafů. Své uplatnění najdou jak v eshopech, tak na obsahových webech. Podívejme se, jak na grafy v Drupalu s použitím Google Chart Tools.

Pro vytvoření grafů na webu existuje spousta open source projektů v JavaScriptu nebo jiné technologii, které vám umožní vizualizovat vaše data na webu bez toho, že byste museli funkcionalitu grafů nějak složitě programovat. Obvykle jen sestavíte sadu dat a předáte je nějaké knihovně v JavaScriptu nebo PHP. Výstupem je pak buď statický obrázek vykreslený do stránky nebo nějaká interaktivní forma grafu.

Google Chart Tools fungují podobně. Sestavíte sadu dat, předáte je JavaScriptové knihovně a ta vám na požadované místo na webové stránce vykreslí graf. Grafy jsou tvořeny pomocí HTML5 a vektorů SVG, běží tedy bez jakýchkoli doplňků ve všech moderních webových prohlížečích, včetně těch mobilních.

Pokud přijde řeč na téma grafy a Drupal, pak se to prakticky neliší ničím od jiných webových stránek. Můžete použít prakticky jakoukoli knihovnu pro grafy a vykreslit je. Kromě toho existuje několik modulů, které knihovny pro grafy zapouzdřují a umožňují s nimi snazší manipulaci. V článku si ukážeme propojení dat získaných modulem Views právě do Google Chart Tools.

Co budete v Drupalu na grafy potřebovat

Výstupem této ukázky bude jednoduchý graf zobrazující uživatele s nejvíce komentáři. Pokud si nechcete hrát na nějakém svém živém webu s Drupalem, připravte si nějaký obsah s komentáři od přihlášených uživatelů.

Dále budete potřebovat moduly:

Jestli váš web s grafy od Google funguje správně, se přesvědčíte po zapnutí pomocného modulu Site Analytics Dashboard a poté návštěvou administrační části Logy > Analytics.

Drupal a grafy

Sestavte si Views s přehledem nejaktivnějších diskutérů

Nyní si připravte pohled zobrazující seznam uživatelů s nejvíce komentáři. Doporučuji jej vytvořit jako blok, který si pak můžete umístit třeba na Ovládací panel (nástěnku) v Drupalu 7.

Přidejte nové View založené nikoli na obsahu, ale na Komentářích. Jako způsob zobrazení zvolte tabulku. Do pohledu přidejte dvě pole, která budou tvořit sloupce tabulky. Prvním polem bude Komentář: ID, tedy identifikátor komentáře. Druhým polem bude jméno autora komentáře. Aby vám jej Views nabídly, musíte do pohledu v sekci Pokročilé přidat nový vztah Komentář: autor a při přidávání pole Uživatel: jméno tento vztah z rozbalovací nabídky zvolit.

Drupal a grafy

Měli byste mít tabulku se seznamem uživatelů a identifikátorů jednotlivých komentářů. To nám zatím nevypovídá nic o tom, kolik komentářů každý autor napsal. Musíme je sečíst. K tomuto účelu slouží ve Views agregace. Zapněte ji v sekci Pokročilé > Use Aggregation.

Přehoďte pořadí políček v pohledu tak, aby na prvním místě byl autor a na druhém ID komentářů. U autora klepněte na odkaz Aggregation settings a typ agregace nastavte na seskupení výsledků (Group results together). IDčka komentářů ale potřebujeme sečíst, abychom dostali počet komentářů pro každého uživatele. Takže v nastavení jejich agregace zvolte Count Distinct.

V tabulce v náhledu View byste tedy měli nyní vidět uživatelská jména s počty komentářů. View ještě malinko vylepšíme. Stránkovač nastavte na specifikovaný počet položek, konkrétně 8. Větší počet pak může graf v tomto případě zobrazovat s problémy (záleží na typu grafu, který si později zvolíte a jeho rozměrech).

Do Kritérií řazení vložte jediný způsob řazení, a sice podle Komentář: ID, sestupně a agregaci opět nastavte na Count.

Abyste eliminovali anonymní komentáře, přidejte do filtrů Komentář: Author uid, který budete chtít filtrovat pro hodnoty větší jak 0. Případně zadejte jedničku, čímž eliminujete jak anonymy, tak admina webu.

Do filtrů doporučuji přidat také jen schválené, zveřejněné komentáře a případně filtrování komentářů jen pro vydaný obsah (ten lze do filtrů přidat po doplnění Vztahu Komentář: Obsah).

Drupal a grafy

Pohled s tabulkou nejaktivnějších diskutérů máte nyní hotový. Je důležité naučit se pracovat s agregací, pokud jste ji ještě ve svých pohledech nevyužili. Bez ní pak grafy nebudou dávat moc smysl.

Vytvořte si View ve formě grafu

V předchozí části vytvořený blok si umístěte někam na web. Až jeho tabulku přetvoříte na graf, budete tak moci hned zkontrolovat, zda správně funguje. V náhledu View se grafy bohužel nevykreslují.

Přejděte zpět do editace našeho View a jako Formát zvolte Google Chart Tools. V nastavení pak vyberte Typ grafu (například Bar Chart), nastavte šířku a výšku (třeba 350 a 400), zapněte vykreslení ve 3D a nastavení uložte. Uložte i celé View a zkuste se podívat na blok umístěný na webu. Graf by měl vypadat nějak následovně:

Drupal a grafy

Všimněte si, že graf reaguje na najetí myši nad jednotlivé části a zobrazuje bublinu s doplňujícím textem. Vzhled grafu můžete dále upravit tím, že se vrátíte do nastavení pohledu a zadáte například barvy, titulky, popisky os, případně vyberete jiný typ grafu.

Vytváření grafů s pomocí Views a Google Chart Tools je v Drupalu docela snadné, vyžaduje jen dobrou znalost práce s Views, kterou byste měli mít v malíčku.

Chcete-li si s grafy v Drupalu trošku více hrát, koukněte se také na moduly Flot, Raphaël a Google Chart API. Jsou dostupné jak pro Drupal 7, tak pro starší Drupal 6.

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Děkuji za nakopnutí, už jsem zkoušel dříve, ale nenapadlo mne se podívat na stránku, prostě jsem je neviděl ve views, tak jsem myslel, že nejedou a modul vypnul. Nicméně nejsem schopen to nijak stylovat. Potřebuji jediné, dát legendu pod graf - lze to nějak? Díky moc.

návštěvník

nojo, ale čemu? jsou tam jen samé <g> jak vybrat cokolik ostylování? hledal jsem i u googlů a nějak nepochopil

návštěvník

i tak díky, možná zkusím ještě jiné grafy a nebo si načtu více informací u gůůglů

návštěvník

Také koukám na modul flot a ten potřebuje views_decorator v dev verzi a to navíc velmi staré - obejít to asi nepůjde?

Profile picture for user Jan Polzer

Asi ne. Chtěl jsem napsat, že bych se té DEV verze u Views Decoratoru nebál, ovšem jediná issue o tom, že to někomu zabilo server, můj názor změnila :-)

návštěvník

Já to zkusil, jenže to chce ještě modul decorator a ten vypíše stránku chyb a to se mi nechce i když se tváří, že chodí - už je to pryč...
Budu testovat dál. Sakra, ten google je nejjednodušší, dobře vypadá, jen jak ho stylovat - zasahovat do modulu se mi nechce, ale když bude nejhůř... Možná bych mohl napsat autorovi?
Díky za reakce, třeba se i vám někdy hodí to zkoumat.

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru