Frappe Charts

Frappe Charts on avoimen lähdekoodin JavaScript-kirjasto, jonka avulla voi helposti luoda erilaisia kaaviota ja kuvaajia.

Frappe-kaavion tekeminen 
Kirjaston saa käyttöön omaan projektiinsa asentamalla sen npm:n kautta komennolla: 

 $ npm install frappe-charts

Tämän jälkeen on lisättävä tuontikäsky JavaScript-tiedostoon:

 import { Chart } from "frappe-charts/dist/frappe-charts.min.esm"

Vaihtoehtoisesti voi sisällyttää HTML-tiedostoon jommankumman seuraavista riveistä: 

 
 

Tämän jälkeen voi alkaa luoda Frappe-kuvaajia.

Ominaisuudet 
Frappe-objekti koostuu tyypillisesti sille annetusta tietosarjaobjektista, kuvaajan tyypistä, kaavion korkeudesta ja kuvaajien värit listaavasta taulukosta. Tietosarjaobjektiin voidaan sisällyttää niin monta yksittäistä tietosarjaa kuin halutaan. Kuvaajat ovat lähtökohtaisesti annetun kuvaajatyypin mukaisia, mutta jokaiselle tietosarjalle voidaan myös erikseen määrittää jokin tietty oma kuvaajatyyppi. Voidaan siis esimerkiksi luoda kaavio, jossa on samanaikaisesti viiva- ja pylväskuvaajia. Kuvaajatyyppejä on useita ja ne sisältävät kaikki yleisimmin käytetyt kuvaajatyypit. Kaavion korkeus annetaan lukuna joka kuvaa korkeutta pikseleinä. Kuvaajien värit listaavaan taulukkoon voidaan listata väri vaikkapa jokaiselle kuvaajalle erikseen. Frappe-objektiin voidaan myös sisällyttää lisäasetuksia kuten barOptions-objekti, axisOptions-objekti ja lineOptions-objekti. barOptions määrittää kaaviopylväiden ja niiden välien suhteen, axisOptions:in avulla voidaan muuttaa X- ja Y-akselien tyyliä ja lineOptions:illa voidaan muuttaa kuvaajien tyyliä esimerkiksi muuttamalla kuvaajien pallukoiden kokoa.

Akseleille voidaan lisätä merkkejä tiettyjen arvojen kohdalle sisällyttämällä tietosarjaobjektiin xMarkers- ja yMarkers-asetuksia. Akseleille voidaan myös merkata kokonaisia alueita xRegions- ja yRegions-asetuksilla. Frappe-kaavioihin voidaan laittaa erilaisia lisämerkintöjä tooltipOptions-asetuksella.

Frappe sisältää kaikki yleiset kuvaajatyypit, kuten viiva- ja pylväskuvaajat. Lisäksi Frappessa on erikoisempia kuvaajatyyppejä kuten ”pie” eli piirakkakuvaaja, ”donut” eli donitsikuvaaja sekä ”percentage” eli proenttikuvaaja.

Frappe-kaavioita voi muokata niiden luonnin jälkeen esimerkiksi lisäämällä tai poistamalla yksittäisiä datapisteitä. Vaihtoehtoisesti voidaan myös uusia kaikki data antamalla kaaviolle uusi tietosarjaobjekti.

Kaaviosta voidaan tehdä nuolinäppäimillä navigoitava, jolloin dataa voidaan analysoida yksitellen.

Frappe-kaaviot ovat responsiivisia, joten ne mukautuvat automaattisesti erikokoisille sivuille.

Frappe-kaaviot voidaan viedä SVG-muotoon komennolla export().

Käyttöesimerkki

HTML 
<div id="kaavio"></div>

Esimerkki kaavio <script> elementin sisällä 
const data = {
    labels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],                          
    datasets: [
        {
            name: "Data", type: "line",
            values: [1,6,3,8,5,9,7]
        }
    ]
}

const kaavio = new frappe.Chart("#kaavio", {
                                            
    title: "Esimerkki kaavio",
    data: data,
    type: 'line',
    height: 450,
    colors: ['#7cd6fd']
})

Kaavion kokoonpano

Container 
Ensimmäinen kaavion rakentajan vaatima parametri on container elementti, joka voidaan antaa DOM objektina tai CSS selectorilla.const kaavio = new Chart('#kaavio', asetukset);
// tai
const container = document.elementById('kaavio');
const kaavio = new Chart(container, asetukset);

Asetukset objekti 
Toinen kaavion rakentajan vaatima parametri on asetukset objekti, jonka vähimmäismäärityksenä on data muuttuja, mikä sisältää labels datasets listatconst asetukset = {
    data: {
        labels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],

        datasets: [
            {
                name: "Data", values: [1,6,3,8,5,9,7]
            }
        ]
    }
}

const kaavio = new Chart(container, asetukset);

Valinnaisia asetuksia

title 

 Type: String
 Default: " "

Lisää otsikon kaavioon.

type 

 Type: String
 Values: line, bar, axis-mixed, pie, percentage, heatmap
 Default: line

Määrittää miten kaavio piirtyy.

colors 

 Type: Array
 Default: ['#00bdff', '#1b3bff', '#8F00FF', '#ff0011', '#ff7300', '#ffd600', '#00c30e', '#65ff00', '#d200ff', '#FF00FF', '#7d7d7d', '#5d5d5d']

Määrittää kaavion värit

height 

 Type: Number
 Default: 240

Määrittää kaavion korkeuden pikseleissä.

Frappe kaavioiden dokumentaatio

Frappe kaikki saatavilla olevat asetukset

Heatmap-kaaviotyyppi 

Heatmap-tyyppinen kaavio tarkoittaa Frappessa datan visualisointia kuukausittaisina kalentereina, kuvaamalla päiväkohtaisten arvojen tasoerot väreinä. Tasoja on aina viisi.

Tämä kaaviotyyppi vaatii erilaisen data-olion kuin muut kaaviotyypit. Labels- tai datasets-taulukkoa ei anneta, vaan pelkät aikaleima-arvoparit dataPoints-oliossa.

Aikaleima: 
Unix-aikaleima, eli montako sekuntia on kulunut ajanhetkestä 1.1.1970 kello 0.00.00 UTC.

Arvo: 
Mitatun suureen arvo tietyllä ajanhetkellä.

const heatmap = new Chart("#kaavio", {
    type: 'heatmap',
    title: “Kuukausijakauma",
    data: {
        dataPoints: {   // olio, jossa on aikaleima-arvopareja
            '1688443269' : 8,
            '1688529669' : 20,
            '1688616069' : 10,
            '1688702469' : 35
        },
        start: startDate,
        end: endDate    // Date-objektit kaavion alku- ja loppuajankohdille
    },
    countLabel: 'Taso',
    discreteDomains: 0, // Erotellaanko kuukaudet toisistaan vai ei, oletus: 1=erotellaan
    colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']    
    // Viiden tummenevan värin setti, vaalein väri nollalle,
    // oletusvärit: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
});

Lähteet

Aiheesta muualla 
 Frappen sivusto

JavaScript
Grafiikkakirjastot