Google Charts - címke - it-tanfolyam.hu

Sankey-diagram készítése

2023. április 17. Szerző: Kaczur Sándor

A Sankey-diagram alkalmas kétféle adatsor közötti N:M fokszámú kapcsolat, összefüggés és a köztes átmenet ábrázolására. Hangsúlyozza a fő átvitelt vagy áramlatokat egy rendszeren belül. Az áramlás irányát nyíllal szemlélteti és az áramlatok szélessége arányos az áramlási mennyiségekkel.

Feladat

Jelenítsük meg HTML formátumú weboldalként a magyarországi régiókban a foglalkoztatottak számát nemzetgazdasági szektorok szerint a KSH 2018-as adatsora alapján! Automatizáljuk egy Java programmal úgy a feladatot, hogy az év paraméterként megadható legyen!

Tervezés

A KSH témastruktúrában a táblázat elérési útja:

5. Területi adatok,
5.1. A munkaerő-piaci tendenciák Magyarország régióiban,
5.1.3. A foglalkoztatottak száma nemzetgazdasági szektorok szerint, nemenként (2008–)

Online böngészhető táblázat:
https://www.ksh.hu/docs/hun/xstadat/xstadat_hosszu/h_qlf017.html

Letölthető táblázat (XLS formátumban):
https://www.ksh.hu/docs/hun/xstadat/xstadat_hosszu/xls/h5_1_3.xls

A táblázatban lévő adatforrás szükséges része látható az ábrán:

A táblázatban a régiók az A105:A112 cellatartományban találhatók. A hozzájuk tartozó 3 nemzetgazdasági szektor a B-C-D oszlopok azonos soraiból olvashatók ki. POJO-k létrehozása mindenképpen hasznos a megvalósításhoz, például new SankeyData("Közép-Dunántúl", "Szolgáltatás", 253.89). Ezekből generikus listát is célszerű építeni: List<SankeyData> sankeyDataList.

Többféleképpen is hozzájuthatunk az adatokhoz attól függően, hogy milyen előismeretekkel rendelkezünk a különböző tanfolyamainkon:

A Java SE szoftverfejlesztő tanfolyamon „kézzel” letölthetjük a projekt files mappájába az XLS fájlt. Ezután akár manuálisan is összeállítható a POJO lista, vagy a JExcel API-val is hatékonyan feldolgozható a XLS fájl aktuális munkalapja. Fájlkezelés előtt az összeállított HTML fájlt kiírathatjuk a konzolra, ahonnan „kézzel” vágólapozva létrehozhatjuk belőle a szükséges HTML fájlt. Fájlkezeléssel persze adott mappába, adott fájlnévvel, kivételkezeléssel a java.io vagy java.nio csomagot használva a HTML fájl generálása is automatizálható.
A Java EE szoftverfejlesztő tanfolyamon megvalósítható, hogy a program kivételkezeléssel hálózati kapcsolatot épít, majd letölti az XLS fájlt és ezzel a feladat visszavezethető az előző esetekre. Azt is megtehetjük, hogy az XLS fájlt nem töltjük le, hanem olvasunk belőle közvetlenül a webről. Ekkor is rendelkezésünkre áll a POJO lista. Itt már tudunk HTML fájlt is automatikusan generálni.

Tanulmányoznunk kell a Google Charts galériában a Sankey diagram dokumentációját! Meg kell ismernünk a paraméterezési lehetőségeit és JavaScript forráskódját!

Megvalósítás

private String createSankeyDiagram(List<SankeyData> sankeyDataList) {

String sankeyData=

sankeyDataList.stream().map(SankeyData::toString).

collect(Collectors.joining(",\n ", " ", "\n"));

String html=

"<html>\n" +

" <head>\n" +

" <script type=\"text/javascript\" " +

" src=\"https://www.gstatic.com/charts/loader.js\"></script>\n" +

" <script type=\"text/javascript\">\n" +

" google.charts.load('current', {'packages':['sankey']});\n" +

" google.charts.setOnLoadCallback(drawChart);\n" +

"\n" +

" function drawChart() {\n" +

" var data = new google.visualization.DataTable();\n" +

" data.addColumn('string', 'Régió');\n" +

" data.addColumn('string', 'Nemzetgazdasági szektor');\n" +

" data.addColumn('number', 'Foglalkoztatottak száma (ezer fő)');\n" +

" data.addRows([\n" +

"#SankeyData#" +

" ]);\n" +

"\n" +

" var options = {\n" +

" width: 500,\n" +

" };\n" +

"\n" +

" var chart=new google.visualization.Sankey("+

" document.getElementById('sankey_basic'));\n" +

" chart.draw(data, options);\n" +

" }\n" +

" </script>\n" +

" </head>\n" +

" <body>\n" +

" <div id=\"sankey_basic\" style=\"width: 500px; height: 300px;\"></div>\n" +

" </body>\n" +

"</html>";

return html.replace("#SankeyData#", sankeyData);

}

A createSankeyDiagram() függvény létrehozza a HTML fájl szöveges tartalmát. Átveszi adatforrásként a sankeyDataList generikus POJO listát. A String típusú sankeyData objektum tartalmazza a Stream API-val hatékonyan összefűzött – POJO-któl elkért – toString() szövegeket. Ezek a diagramhoz szükséges adatok ( addRows …). Például: "['Közép-Dunántúl', 'Szolgáltatás', 253.89]". A String típusú html objektum kezdetben tartalmazza a diagramhoz nem szükséges fix részeket, a diagram alapbeállításait, valamint a diagram fejlécéhez szükséges metaadatokat ( addColumn… Régió, Nemzetgazdasági szektor, Foglalkoztatottak száma (ezer fő)). A függvény végül a html objektum #SankeyData# részét cseréli a sankeyData-val és az adatfüggő résszel frissített HTML tartalommal tér vissza.

Eredmény

Az egyik eredmény a generált HTML fájl (benne a grafikonhoz tartozó JavaScript) forráskódját tartalmazza:

<html>

<head>

src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', {'packages':['sankey']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data=new google.visualization.DataTable();

data.addColumn('string', 'Régió');

data.addColumn('string', 'Nemzetgazdasági szektor');

data.addColumn('number', 'Foglalkoztatottak száma (ezer fő)');

data.addRows([

['Budapest', 'Mezőgazdaság', 1.251],

['Budapest', 'Ipar', 148.004],

['Budapest', 'Szolgáltatás', 684.56],

['Pest', 'Mezőgazdaság', 11.845],

['Pest', 'Ipar', 182.934],

['Pest', 'Szolgáltatás', 400.425],

['Közép-Dunántúl', 'Mezőgazdaság', 22.684],

['Közép-Dunántúl', 'Ipar', 222.544],

['Közép-Dunántúl', 'Szolgáltatás', 253.89],

['Nyugat-Dunántúl', 'Mezőgazdaság', 25.64],

['Nyugat-Dunántúl', 'Ipar', 202.794],

['Nyugat-Dunántúl', 'Szolgáltatás', 253.44],

['Dél-Dunántúl', 'Mezőgazdaság', 26.865],

['Dél-Dunántúl', 'Ipar', 122.281],

['Dél-Dunántúl', 'Szolgáltatás', 224.863],

['Észak-Magyarország', 'Mezőgazdaság', 21.866],

['Észak-Magyarország', 'Ipar', 186.662],

['Észak-Magyarország', 'Szolgáltatás', 276.754],

['Észak-Alföld', 'Mezőgazdaság', 48.301],

['Észak-Alföld', 'Ipar', 206.593],

['Észak-Alföld', 'Szolgáltatás', 384.82],

['Dél-Alföld', 'Mezőgazdaság', 56.402],

['Dél-Alföld', 'Ipar', 174.068],

['Dél-Alföld', 'Szolgáltatás', 329.982]

]);

var options={

width: 500,

};

var chart=new google.visualization.Sankey(

document.getElementById('sankey_basic'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

A másik eredmény a Sankey-diagram képernyőképe, amelyről kiválóan leolvashatók az értékek:

A böngészőben megjelenő HTML oldalon a Sankey-diagram dinamikusan – az egérkurzor pozíciójától függően – képes az aktuális adatok megjelenítésére, mintegy lebegő jelmagyarázatként.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

Organogram készítése

2023. január 3.2021. január 13. Szerző: Kaczur Sándor

Az Oracle HR sémából építünk organogramot, amivel megjeleníthető a szervezeti hierarchia. Személyenként készítünk csomópontokat. (Másképpen is lehetne: például részlegenként.) A megvalósítás során kétszer konvertálunk A-ból B-be. Először az adatbázisból/adatforrásból SQL lekérdezéssel jutunk hozzá a szükséges adatokhoz, amelyeket generikus listába képezzük le. Ezután a listát feldolgozva generálunk HTML fájlt, amely tartalmaz egy Organization Chart diagramot.

Hasonló feladat: Ki kinek a vezetője?, rekurzív lekérdezéssel. Érdemes összehasonlítani a kétféle szemléletmódot.

Tervezés

Most pedig azt használjuk fel, hogy az Oracle HR sémában az EMPLOYEES táblában reflexió van, amelyet az EMPLOYEE_ID és a MANAGER_ID mezők biztosítanak.

Az Organization Chartnál három adatsor adható meg. Ezek most testre szabva (mindegyik szöveges): 'Employee lastname', 'Job ID', valamint jelmagyarázatként további három mező összefűzve: 'Employee name, Department name, Job title'. Az organogramon megjelenő adatok például: "Raphaely", "PU_MAN", valamint a csomópontra fókuszálva megjelenő tooltip: "Employee: Den Raphaely, Department: Purchasing, Job: Purchasing Manager". A DEPARTMENTS táblából – az EMPLOYEES-zel a DEPARTMENT_ID-vel összekötve – megkapjuk a DEPARTMENT_NAME-t. A JOBS táblából pedig – az EMPLOYEES-zel a JOB_ID-vel összekötve – megkapjuk a JOB_TITLE-t.

A lekérdező parancs

Az EMPLOYEE_ID elsődleges kulcs, vagyis kötelező. A MANAGER_ID nem kötelező, a hierarchia tetején álló vezetőnél ez a mező null értékű. Mivel a MANAGER_ID nem kötelező, így külön lekérdező parancsban kell előállítani a 15 középvezetőt együtt a 2 felső vezetővel, valamint az egyetlen felső vezetőt, akinek a MANAGER_ID-ja null. Ezt a két részeredményt össze kell fűzni ( UNION).

Az eredménytábla

Az adatfeldolgozás lépései

Java programozási nyelven kötelező a kivételkezelés a JDBC kapcsolatfelvétel, SQL parancs futtatása, valamint a fájlkezelés során. A JDBCConnection interfészben definiált szöveges konstansok: DRIVER, URL, USER, PASSWORD (az adatbázis-szerverrel való kommunikációhoz), SQL (a lefuttatandó lekérdező parancs). Az OrganizationChart interfészbe került a HTML_FILE_PATH (a generálandó HTML fájl Path útvonala) és a HTML (konstans váz az organogram testre szabott HTML+JavaScript forráskódja). Az SQL parancs ResultSet eredménytáblájának feldolgozása során áll elő az orgChartDataList generikus lista. A HTML konstans szövegben lévő #OrgChartData# elemet ki kell cserélni a generikus listából Stream API-val dinamikusan összefűzött adatokra. A fenti példa ide kapcsolódó része: "[{'v':'Raphaely', 'f':'Raphaely<div style="color:red; font-style:bold">PU_MAN</div>'}, 'King', 'Employee: Den Raphaely, Department: Purchasing, Job: Purchasing Manager']". Ezt követően a java.nio csomag Files osztályának write() metódusával fájlba menthető az előállított fájltartalom. A konkrét Java forráskódot most nem részletezem.

Az elkészült organogram

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A feladat a Java adatbázis-kezelő tanfolyam 9-12. óra: Oracle HR séma elemzése, 13-16. óra: Konzolos kliensalkalmazás fejlesztése JDBC alapon, 1. rész, 33-36. óra: Grafikus kliensalkalmazás fejlesztése JDBC alapon, 2. rész alkalomhoz kapcsolódik.

Céline Dion – Courage World Tour

2023. január 1.2020. június 1. Szerző: Kaczur Sándor

A Céline Dion – Courage World Tour esettanulmányunkban a turné első részének koncerthelyszíneit jelenítjük meg Google Charts segítségével. Ebben a blog bejegyzésben a tervezés, megvalósítás lépéseit tekintjük át és megmutatjuk az eredményeket. A Java és JavaScript forráskódokat most nem részletezzük.

Háromféle grafikont használunk

idővonal (Timeline) időpontok és helyszínek Gantt diagram-szerűen,
térkép (Geo Chart) városok megjelölésével és időpontok jelmagyarázatban,
tematikus térkép az USA államaival (szintén Geo Chart), az állam területén adott koncertek száma alapján és db jelmagyarázatban.

A tervezés és megvalósítás lépései

Adatokat kell szerezni egy weboldal (https://www.celinedion.com/in-concert/) feldolgozásával ( saveHTML()). Ehhez a művelet a GET. Figyelni kell a megfelelő User-Agent paraméterezésére és a karakterkódolásra ( ISO-8859-1). A kapott bemeneti folyam feldolgozását pufferelt módon érdemes elvégezni. Célszerű az adatforgalom minimalizásása érdekében a weboldal tartalmát helyi fájlba menteni ( tour.html). Ügyelni kell a kötelező és az ajánlott kivételkezelésre.
Értelmezni kell a tour.html fájlt. A HTML tartalom végén JSON formátumban beágyazva elérhetők a koncert turné állomásainak adatai: nekünk kell a város ( city), helyszín ( venue), dátum/idő ( startDate). Érdemes külön fájlba menteni a tour.html-ből a JSON tartalmat ( tour.json), mert abból egyszerűen betölthető ( saveJSON()).
Tanulmányozni kell a Google Charts diagramok közül azt a kettőt, amiket testre kell szabni: Timeline és Geo Chart. Tudni kell: mi a diagramot tartalmazó weboldal állandónak tekinthető eleje és vége (ezeket hasznos külön interfészben konstansként tárolni: HTMLFileContent), valamint mi az adatoktól függő része (közepe). Ismerni kell a szükséges metaadatok és adatok formátumát. Érdemes átnézni a különböző testre szabási és formázási lehetőségeket a fenti diagramtípusoknál (esetleg a többi típusból is meríthetünk ötleteket).
A koncert turné állomásainak összetartozó 3 adatát le kell képezni POJO-vá ( Event). Ezt érdemes privát változókkal ( city, venue, startDate) és factory metódussal megvalósítani. Célszerű, ha az adatok visszakérésére alkalmas getter metódusok is készülnek ( getTimelineChartDataTableRow(), getGeoChartDataTableRow()), amelyek kiszolgálják a megfelelő diagramtípus igényeit.
A tour.json fájl feldolgozásával (parszolásával) Event típusú generikus listába vagy JSON tömbbe könnyen leképezhetők az adatok.
Hasznos egy vezérlőosztály létrehozása, amely a 3 diagramtípust előállító (HTML fájlt generáló) metódust ( createTimelineChart(), createGeoChartCity(), createGeoChartCountry()) valamint a belépési pontot ( main()) tartalmazza.
Generálható az idővonalat tartalmazó timelineChart.html fájl a createTimelineChart()metódussal. Ehhez 5 oszlop megadása szükséges (ebben a sorrendben): label, city, tooltip, start, end. Az első 3 adat string, az utolsó 2 adat date típusú. Egy példa Event: ['2019.09.18.', 'Québec, QC', 'Videotron Centre', new Date(2019, 09, 18, 19, 0, 0), new Date(2019, 09, 18, 21, 0, 0)].
Regisztrálni kell egy Google Cloud Platform felhasználói fiókot és tanulmányozni kell a geokódolás folyamatát és lehetőségeit, hiszen a városok nevéből (formátum pl.: 'Minneapolis, MN') szükség lesz azok térképi koordinátáira. Aktiválni kell a szolgáltatás használatához szükséges mapsApiKey-t.
Generálható a városokat tartalmazó geoChartCity.html fájl a createGeoChartCity() metódussal. Ehhez 3 oszlop megadása szükséges (ebben a sorrendben): city, dateCity, no . Egy példa Event: ['Minneapolis, MN', '2019.11.01. Minneapolis, MN', 1].
Generálható a régiókat/államokat tartalmazó geoChartCountry.html fájl a createGeoChartCountry() metódussal. Ez egy tematikus térkép: a különböző színek jelölik az egy régió/állam városaiban tartott koncertek számát. Ehhez az adatok megfelelő rendezését követően végrehajtott csoportváltás algoritmus szükséges. 2 oszlop megadása szükséges: country, concertNo. Egy példa adatsor: ['US-TX', 3].

Az eredmények

TimelineChart grafikon:

GeoChartCity grafikon:

GeoChartCountry grafikon:

Érdemes megismerni további – térképekhez kapcsolódó – grafikontípusokat is: Geomap, Intensity Map.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A példák a Java SE szoftverfejlesztő tanfolyam 37-44. óra: Fájlkezelés és a Java EE szoftverfejlesztő tanfolyam 1-4. óra: Elosztott alkalmazások, webszolgáltatások és 13-16. óra: JSON feldolgozás alkalmaihoz kötődnek.

Kutatók éjszakája 2019

2023. január 3.2019. szeptember 14. Szerző: Kaczur Sándor

A Kutatók éjszakája nemzetközi rendezvénysorozat 2005-ben indult. Magyarország 2006-ban csatlakozott. Azóta évről-évre egyre több intézmény nyitja meg hazánkban kapuit, szervez érdekes programokat, sok-sok településen, több száz helyszínen, több ezer eseményt meghirdetve sok tízezer érdeklődő/résztvevő látogatónak biztosít tartalmas estét.

Bár a kezdeményezés elsősorban a kutatói pálya népszerűsítését szolgálja, ezért leginkább a tizen- és huszonévesekre számít, az események vonzók és elég érdekesek ahhoz, hogy a kisgyerekektől a legidősebbekig mindenki megtalálja a számára izgalmas programokat. Korábban nagyobb felsőoktatási intézmények és kutatóintézetek szerepeltek döntően, de az utóbbi néhány évben egyre több kisebb intézmény, tehetséggondozással foglalkozó középiskola, cég, egyesület is csatlakozott a rendezvényhez. A Kutatók éjszakája rendezvény minden meghirdetett programja ingyenes.

Rendezvényünk plakátja

Az it-tanfolyam.hu 2019-ben sem marad ki a sorból. (2018-ban is szerveztünk programokat.) Meghirdettünk öt programot a kutatokejszakaja.hu weblapon. Az eseményekre regisztrálni kell a weblapon, ami talán szervezőként ránk keresve bizonyul legegyszerűbbnek. A regisztrációs időszak szeptember 14-26-ig tart és a programjainkra szeptember 27-én 17:40-20:50 óráig kerül sor.

Bízunk abban, hogy idei programjaink is népszerűek lesznek, sok-sok kérdés is elhangzik és kellemes hangulatú szakmai párbeszéd alakul ki.

Az előadások prezentációit tanfolyamaink hallgatói számára – a témához kapcsolódó témakörökhöz, ILIAS-ra feltöltve – tesszük elérhetővé.

17:40-18:10 – Milyen eséllyel és hány találatos szelvénnyel nyerhetünk, ha sok lottószelvénnyel fogadunk?
Véletlenszám-generátorral lottószelvényeket állítunk elő. Különbözőeket. Sokat: ezret, tízezret, százezret. Azután szimulálunk egy lottósorsolást. Megnézzük az eredményeket: hány darab két-, három-, négy- és telitalálatos szelvényt kaptunk. Átgondoljuk, hogy milyen eltérések adód(ná)nak ötös-, hatos- és heteslottó esetén. Közösen áttekintjük a Java nyelven implementált szoftver lépéseit és testre szabásának lehetőségeit. A program a Java SE szoftverfejlesztő tanfolyamunk tematikájához kapcsolódik.

18:20-18:50 – Tervezzünk hálózatos programokat! – Denevérek a barlangban
Adott a szerver és kliensek. Előbbi a barlang, utóbbiak a denevérek. Átgondoljuk, hogyan kommunikálnak egymással és ennek milyen elvi és gyakorlati megvalósítási lehetőségei adódnak. Ismertetjük a Java RMI technológiáját. Mit érdemes megmutatni a két program működése közben? Közösen áttekintjük az osztálydiagramot és a Java forráskódokat. Ötletelünk és megfogalmazunk sok-sok ötletet a továbbfejlesztésre. A program a Java EE szoftverfejlesztő tanfolyamunk tematikájához kapcsolódik.

19:00-19:30 – Jelenítsük meg webes térképeken Céline Dion koncertturnéjának helyszíneit!
A híres énekesnő idén szeptemberben világ körüli turnéba kezd (Courage World Tour) és ennek állomásait kb. fél évre előre meghirdették már áprilisban. Ismertetünk egy esettanulmányt. Ez egy hálózatos Java projekt, amely webről összegyűjtött adatok alapján, többféle Google Charts objektumot állít elő. A termék JavaScript-re épülő weboldalak sokasága, amely tipikus felhasználói igényeket/követelményeket kielégíthet. A megvalósítás kivételkezelést alkalmaz, HTML és JSON tartalmat olvas és generál, valamint elvégzi/elvégezteti az adatok térképen való megjelenítéséhez szükséges geokódolást. Az előadás ismerteti a specifikáció és a tervezés lépéseit, az implementációt, a tesztelést, valamint továbbfejlesztési javaslatokat is ad.
A program a Java EE szoftverfejlesztő tanfolyamunk tematikájához kapcsolódik.

19:40-20:10 – Írjunk hatékony adatbázis-lekérdezéseket!
Az Oracle HR sémában, először tipikus, hétköznapi szavakkal megfogalmazunk néhány lekérdezést, majd SQL nyelven megvalósítjuk és elemezzük, hogy helyesek-e, hatékonyak-e, mit adnak vissza. Szükség esetén optimalizáljuk, testre szabjuk ezeket. Kategóriák: egyszerű, összetett, aggregáló, soktáblás, hierarchikus/rekurzív lekérdezések. Ha lehet, grafikusan is megjelenítjük a lekérdezések eredményeit Java swing felületen, beépített JTable és JTree komponensekkel, illetve JFreeChart grafikonnal is. A Java adatbázis-kezelő tanfolyamunk tematikájához kötődik a program.

20:20-20:50 – Gondolkodjunk logikusan!
Az előadás során áttekintjük az intelligencia, a kreatív problémamegoldó és logikus gondolkodás összefüggéseit és izgalmas feladatokból válogatva közösen megoldunk néhány fejtörő feladatot.