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"

Viimeaikaiset päivitykset tämän sijaan:

 import { Chart } from "frappe-charts"

Tai sisällytä seuraavat es-moduulit (esim:vuejs):

 import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
 // import css
 import 'frappe-charts/dist/frappe-charts.min.css'

Vaihtoehtoisesti voi sisällyttää HTML-tiedostoon jommankumman seuraavista riveistä(päivitetty): 

 <script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>
 <script src="https://unpkg.com/frappe-charts@1.6.1/dist/frappe-charts.min.umd.js"></script>

Tämän jälkeen voi alkaa luoda Frappe-kuvaajia.https://frappe.io/charts/docs

 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.https://frappe.io/charts/docs/basic/basic_chart#responsiveness

Frappe-kaaviot voidaan viedä SVG-muotoon komennolla export().https://frappe.io/charts/docs/exporting/images

 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']
})

 Tai es-moduuleille (korvaa new frappe.Chart() new Chart()): 

- const kaavio = new frappe.Chart("#kaavio", {
+ const kaavio = new Chart("#kaavio", {  // or a DOM element,
                                    // new Chart() in case of ES6 module with above usage
    title: "My Awesome Chart",
    data: data,
    type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
    height: 250,
    colors: ['#7cd6fd', '#743ee2']
})

 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.https://frappe.io/charts/docs/basic/heatmap

 Aikaleima: 
Unix-aikaleima, eli montako sekuntia on kulunut ajanhetkestä 1.1.1970 kello 0.00.00 UTC.https://fi.wikipedia.org/wiki/Unix-aika

 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']
});

 Donut-kaaviotyyppi 
Frappe-munkkikaavio on eräänlainen kaavio, jota käytetään tietojen esittämiseen ympyrämäisessä muodossa, joka on samanlainen kuin ympyräkaavio, mutta jossa on reikä keskellä. Jokainen donitsiviipale edustaa tietoluokkaa, ja kunkin viipaleen koko on verrannollinen kyseisen luokan arvoon. Tämä kaaviotyyppi on hyödyllinen kokonaisuuden koostumuksen näyttämiseen ja eri segmenttien vertailuun.

 Käyttö: 
const donutChart = new Chart("#kaavio", {

    type: 'donut',

    title: "Kategorioiden jakauma",

    data: {

        labels: ["Kategoria 1", "Kategoria 2", "Kategoria 3", "Kategoria 4"], 

        datasets: [

            {

                name: "Arvot", 

                values: [10, 20, 30, 40] 

            }

        ]

    },

    countLabel: 'Osuus',

    colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1'] 

});

 Lähteet 

 Aiheesta muualla 
 Frappen sivusto

Luokka:JavaScript
Luokka:Grafiikkakirjastot