Ympyrä- ja palkkikaavioita

HTML-, CSS- ja Javascript-koodausta

Vuonna 2019 aloin testailla Bloggerissa erilaisia taulukoita ja palkkeja sekä tein Taulukoita ja palkkeja - Palkkisimulaattorin. Tämä kehityslinja johti viihteellisiin Big brother Suomi -äänestystilannesimulaattoriin sekä vaalikoneisiiin. Viimeisin ja kehittynein vaalikone oli Presidenttikone.

Keväällä 2025 aloitin uuden kehityslinjan, joka alkoi ympyräkaaviosta, jota voisi helposti käyttää ja kopioida moniin kirjoituksiin - eikä se olisi vain viihteellinen. Ensimmäinen ympyräkaavioversio nähtiin Epookki blogin tilastoja - alkuvuonna 2025 -kirjoituksessa. Seuraava 2.0 versio oli Todellinen sananvapaus -kirjoituksen alaosassa.

Uuden kehityslinjan ideana oli luoda kuin koodin sisäinen "sovellus", kaavion koodin voisi kopioida ja asetuskohdassa olisi kohtia, joita muuttamalla saa halutunlaisen kaavion. Asetuksien mukaan luodaan kaavio.

Esimerkki kaaviokoodin yleisasetuksista:
• Näkyykö kaavio: kyllä/ei
• Näkyykö taulukossa Arvo-sarake: kyllä/ei
• Montako desimaalia prosenttiluvussa on: 0 = ei yhtään jne.
• Määritä kaavion pääotsikko: Esimerkkikaavio
  • Määritä kaavion pääotsikon tekstin koko: 1 = normaali, 2 = suurempi jne.
  • Määritä kaavion pääotsikon tekstin väri: värin nimi tai värin hex-arvo
• Määritä kaavion nimi-otsikko: Puolue
• Määritä kaavion arvo-otsikko: Äänimäärät
• Määritä kaavion prosentti-otsikko: Prosentit
• Näkyykö infoteksti taulukon alla: kyllä/ei
  • Infoteksti: Lähde xxx

Kaavioissa voi olla enintään 10 tietoriviä.

Esimerkki kaaviokoodin tietorivisasetuksista (yhden rivin asetukset):
• Näkyykö tietorivi: kyllä/ei
• Määritä tietorivin otsikko: SDP
• Määritä tietorivin arvolukema: 1000
• Määritä tietorivin prosenttilukema: 24
• Määritä tietorivin kohteen väri: värin nimi tai värin hex-arvo

Muokattavan ympyräkaavion koodin pohjalta tein myös muokattavan palkkikaavion - alla on siitä esimerkki.

OTSIKKO

Otsikko	Arvo	Prosentti	Prosenttipalkki
nimi	00	100 %
nimi	00	100 %
nimi	00	100 %
nimi	00	100 %
nimi	00	100 %
nimi	00	100 %
nimi	00	100 %
nimi	00	100 %
nimi	00	100 %
nimi	00	100 %
Yhteensä	00	100 %	Asteikko: 000 %
INFO
HUOMIO

Jos ympyräkaavion joutuisi aina koodaamaan täysin uudestaan, niin suurin työ olisi laskea aina itse ympyräkaavio, montako astetta esimerkiksi 23,2 % on 360° (ympyrästä), lohkojen alku- ja loppukohdat. Kun on luonut koodin sisäisen sovelluksen, niin silloin sovellus osaa luoda automaattisesti kaavioon prosenttilohkot. Tosin, sovellusta koodatessa minun on täytynyt itse määrittää ne matemaattiset laskukaavat, jolla sovellus osaa ne laskea - koodatessa tarvitaan matematiikkaa enemmän ja vähemmän.

Yllä on palkkikaavio, jossa ei tarvitse laskea ympyrän prosenttilohkoja, mutta palkkikaavioon rakensin "palkkizoomauksen". Jos palkkikaavion suurin prosenttiosuus jää alle 25 %, niin silloin kaavio "zoomataan" näyttämään vain 25 %:n osuutta. Näin lyhyetkin palkit saadaan näkymään paremmin. Jos suurin prosenttiosuus on 25 % - 50 % välissä, niin silloin kaavion suurin prosenttiarvo on 50 %. Mikäli suurin prosenttiosuus on yli 50 %, niin silloin kaavion asteikkona on 100 %. Asteikkozoomaukseenkin täytyi keksiä matemaattinen laskukaava.

Huom. jos palkkikaavion suurin prosenttiosuus on 22 %, niin silloin muut osuudet ovat sitäkin pienempi, jolloin palkit näyttävät pieniltä, jos ne sijoitetaan 100 %:n tilaan.

YHTEENVETOA
Blogger-palvelua pidetään karuna ja yksinkertaisena ja sitähän se on, mutta kyllä tämän kanssa pärjää. Eihän Blogger ole mikään WordPress-alusta. Bloggerin asetuksiin voi määrittää omia CSS-juttuja, mutta eipä sinne jaksa laittaa kuin pakolliset, koska ei ole käyttäjäystävällinen ominaisuus. Helpompi Bloggerissa on upottaa CSS:t suoraan HTML-tageihin tai laittaa kirjoituksen koodiin oman STYLE-lohkon (ihme kyllä toimii - kannattaa sijoittaa koodin loppuun).

Blogger-blogissa voi tehdä kaikenlaista CSS:n ja Javascriptin avulla, mutta se vaatii aikaa ja pitkää pinnaa - hidasta puuhaa. Yllä oleva palkkikaavio voi näyttää kuvalta, mutta sen ns. MouseOver-efekti paljastaa sen olevan koodattu elementti.

Boggerin kuviin liittyvät ominaisuudet ovat rajalliset, mutta CSS:n avulla kuvillekin voi tehdä melkein mitä vaan, mutta se vaatii, että tietää CSS:n mahdollisuudet - täytyy kumota Bloggerin omat CSS-säädöt.

Bloggerissakin voi kirjoittaa tekstinäkymässä tai koodinäkymässä. Tekstinäkymässä näkee tekstin suoraan kuin se tulee näkymään, peruskirjoittaja voi käyttää tätä. Jos sitten katsoo koodinäkymää, niin koodi voi näyttää karmealta sekasotkulta, vaikka teksti näyttäisi siltä kuin itse haluaakin. Peruskirjoittajaa ei haittaa miltä koodipuoli näyttää, kunhan teksti on selkeää. Itse kirjoitan pääosin koodinäkymässä, koska hion tekstiä enemmän tai vähemmän CSS:n avulla ja näin koodista tulee juuri sellaista kuin itse haluan - selkeää.

Huom. jos on itse paljon lisännyt koodiin CSS:ää, niin silloin ei kannata avata tekstinäkymää, koska silloin itse kirjoitettu koodi voi muuttua / hajota. Tekstinäkymä ei varmaan ymmärrä kaikkea CSS:ää, joten voi poistaakin sitten osan.

Blogger-palvelu ei ole paras blogialusta, mutta kun tietää sen rajoitteet ja jaksaa vääntää koodia, niin kyllä silläkin saa ihan hyviä kirjoituksia aikaiseksi.