Kaaviot toteutetaan ”samk.html”-tiedostoon. Kansioon ”js” luotiin JavaScript-tiedosto
”app.js”, johon määritellään kaaviot. Toimiakseen kaavio tarvitsee ”Chart.min.js”-tie-doston, joka ladattiin Chart.js GitHub-sivustolta. Tiedostot ”app.js” ja ”Chart.min.js”
linkitettiin ennen <body>-elementin sulkemistagia. Linkitettiin myös jQuery-tiedosto, jota tarvitaan kaavio datan hakemiseen.
Kuva 6. Tarvittavien JavaScript-tiedostojen linkitys ”samk.html”-tiedostoon.
Seuraavaksi määriteltiin elementti, johon kaavio sijoitetaan. Chart.js käyttää HTML5
<canvas>-elementtiä, johon määritellään ID. ID:n nimeksi annettiin ”chart”.
Kuva 7. Kaavion paikan määritteleminen ”samk.html”-tiedostossa.
5.3.1 Datan lisääminen kaavioon
Kaavion datan ja asetuksien määritteleminen tapahtuu ”app.js”-tiedostossa. Data kaa-vioon haettiin jQueryn ajax()-metodilla URL-osoitteesta. Chart.js olettaa, että data syötetään kaavioihin taulukkona (array).
Kuva 8. Datan hakeminen jQueryn ajax()-metodin avulla "app.js"-tiedostossa.
Data, jota kaaviossa käytetään, on JSON-muodossa ja se sijaitsee URL-osoitteessa.
Dataa tulee tiedostoon viiden minuutin välein ja päiväkohtaisesti. Tiedosto koostuu sisäkkäisistä JSON objekteista. Yksi objekti sisältää seuraavat ominaisuudet: date, dev211, dev212, dev213, dev214, dev215, dev216, dev217, dev218, dev222, dev223.
”Date”-ominaisuuteen tulee arvoksi päivämäärä. ”Dev”-alkuiset ominaisuudet ovat in-verttereitä, joihin tulee arvoksi teholukema kilowattituntina (kWh).
Kuva 9. Kuvakaappaus objektien rakenteesta ”data.json”-tiedostosta.
Seuraavaksi luotiin tyhjät taulukkomuuttujat, jotka nimettiin samannimisiksi kuin
”data.json”-tiedostossa olevien objektien ominaisuudet. Tämän jälkeen lisättiin data muuttujiin for-silmukassa push()-metodin avulla.
Kuva 10. Datan lisäys muuttujiin push()-metodin avulla.
5.3.2 Kaavion luominen
Seuraavaksi luotiin muuttuja ”ctx”, johon sijoitettiin document-olion getElement-ById()-metodi. Metodin arvoksi annettiin ID ”chart”. Tämä on sama ID, jonka annet-tiin HTML-tiedostossa <canvas>-elementille. Uusi kaavio luoannet-tiin käyttämällä Chart()-konstruktoria, joka ottaa kaksi parametria: ensimmäinen parametri on canvas, johon kaavio sijoitetaan eli muuttuja ”ctx”. Toinen parametri on objekti eli olio, jossa on kaavion ominaisuudet. Kaavion ominaisuudet sijoitetaan aaltosulkeiden sisälle. Kaa-vion tyyppinä käytettiin viivakaaviota. KaaKaa-vion tyypin määrittely tapahtuu sijoitta-malla type-ominaisuudelle arvoksi ”line”.
Kuva 11. Uuden kaavion luominen ja kaavion tyypin määrittäminen.
Seuraavaksi lisättiin data kaavioon. Type-ominaisuuden jälkeen lisättiin data-objekti, joka sisältää kaksi ominaisuutta labels ja datasets. Ominaisuudet laitettiin aaltosulkei-den sisälle. Labels-ominaisuus ottaa arvoksi taulukon, joka sisältää x-akselin nimik-keet. Tässä kaaviossa x-akseliin tulee päivämäärät, joten label-ominaisuuteen sijoitet-tiin muuttuja ”date”. Datasets-ominaisuus on taulukko, joka sisältää ainakin yhden dataset-objektin. Datasets-ominaisuuden avulla lisätään lukuarvot kaavioon, joita hyö-dynnetään kaavion piirtämisessä.
Dataset-objektiin lisättiin neljä ominaisuutta: label, borderColor, data, fill. Label-omi-naisuus määrittelee datasetin nimen ja borderColor-omiLabel-omi-naisuus viivan värin. Data-ominaisuuteen sijoitettiin taulukko muuttuja ”dev211”, joka sisältää lukuarvoja. Fill-ominaisuuteen määriteltiin arvo ”false”. Tämä poistaa viivan alla olevan alueen täytön.
Kuva 12. Datan määrittely kaavion.
Kaavion tulee dataa kymmenestä invertteristä, joten dataset-objekteja tehtiin yhdeksän kappaletta ja niille määriteltiin samat ominaisuudet. Dataset-objektit erotetaan toisis-taan pilkulla. Label-ominaisuuteen vaihdettiin datasetin nimi ja viivan värin. Data-ominaisuuteen vaihdettiin eri taulukkomuuttuja. Näillä muutoksilla syntyy alla olevan kuvan näköinen kaavio (Kuva 13).
Kuva 13. Kuvakaappaus ”samk.html”-tiedoston kaaviosta data lisäämisen jälkeen.
5.3.3 Kaavion asetuksien määrittely
Seuraavaksi tehtiin muutoksia kaavion oletusasetuksiin. Data-objektin jälkeen lisättiin options-objekti, johon määriteltiin seuraavat ominaisuudet (Kuva 14).
Kuva 14. Kuvakaappaus kaavion asetuksista.
Elements-objektin point.radius-ominaisuus muuttaa viivan pisteen muotoa. Tässä ta-pauksessa arvoksi asetettiin nolla, koska pistettä ei haluttu näkyviin. Datassa päivä-määrä on muodossa ”DD.MM.YYYY HH:MM” ja se näkyy kaavion x-akselissa sa-massa muodossa. Toimeksiantaja halusi, että x-akselissa näkyy vain kellonaika. Tätä varten piti ladata ”moment.js” tiedosto ja lisätä se HTML-tiedostoon ennen <body>
elementin sulkemistägiä. Scales-objektin xAxes.time.displayFromats.hours-ominai-suuden avulla saa muutettua päivämäärän siten, että pelkkä kellonaika näkyy. Ensin pitää xAxes.time.parser-ominaisuudessa kertoa, missä muodossa päivämäärä alun pe-rin oli.
Kun xAxes.ticks.autoSkip-ominaisuuden arvo on ”true”, kaikkia x-akselin arvoja ei näytetä. Ominaisuus automaattisesti laskee, kuinka monta arvoa akselille mahtuu. Jos arvo olisi ”false”, näytettäisiin kaikki arvot, vaikka ne eivät mahtuisi ja menisivät pääl-lekkäin. Y-akselin minimi arvo määritellään yAxes.ticks.min-ominaisuudessa eli alle nollan olevia arvoja ei näytetä.
Kuva 15. Kuvakaappaus kaaviosta oletusasetuksien muutosten jälkeen.
5.3.4 Kaavioiden ryhmittely
Edellisessä luvussa luotiin kaavio, jossa oli kaikki invertterit. Seuraavaksi on tarkoitus ryhmitellä kaaviot eli luoda vielä neljä uutta kaaviota edellisessä luvussa luodun kaa-vion alapuolelle. Ensimmäiseen kaavioon tulee invertterit dev211, dev212 ja dev213.
Tätä kaaviota kutsutaan nimellä ”Itä-Länsi tutkimus”. Toiseen kaavioon tulee invert-terit dev214, dev215, dev216, dev217 ja dev218. Tätä kaaviota kutsutaan nimellä ”Ri-vivälitutkimus”. Kolmanteen kaavion tulee invertteri dev222 ja kaaviota kutsutaan ni-mellä ”Iso tracker”. Neljänteen kaavion tulee invertteri dev223 ja kaaviota kutsutaan nimellä ”Sähköpyöräkatos”.
Kaavioiden ryhmittelyssä hyödynnettiin Bootstrapin accordion-komponenttia. Mikäli kaikki kaaviot olisi laitettu allekkain, olisi se vienyt enemmän tilaa ja sivusto olisi näyttänyt sekavammalta. Accordion avulla pystyy piilottamaan ja näyttämään sisältöä.
Alla olevassa kuvassa (Kuva 16) on esimerkki accordion-komponentin rakenteesta.
Kuva 16. Esimerkki accordion-komponentin rakenteesta HTML-tiedostossa.
Tässä tapauksessa <div>-elementtejä, joihin on määritetty luokka ”card”, tulee neljä kappaletta, koska kaaviota on neljä. Kaavio sijoitettiin ”card-body”-luokan sisälle.
Kaavion lisäys HTML-tiedostoon ja asetuksien määrittely tapahtui samalla tavalla kuin edellisessä luvussa. Alhaalla olevassa kuvassa (Kuva 17) on kuvakaappaus siitä miltä accordion-komponetti näyttää sivustolla.
Kuva 17. Kuvakaappaus ”samk.html”-sivun accordion-komponentista.
Alhaalla olevassa kuvassa (Kuva 18) on kuvakaappaus siitä, miltä accordion-kompo-nentti näyttää sivustolla, kun yhtä listan otsikoista klikataan. Silloin sisältöosuus eli tässä tapauksessa kaavio tulee näkyviin. Kun seuraavaa otsikkoa klikkaa, edellinen sisältöosuus menee automaattisesti kiinni ja toinen avautuu.
Kuva 18. Kuvakaappaus ”samk.html”-sivun accordion-komponentista, kun yhtä listan otsikoista on klikattu.