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.

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

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 listat

const 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);

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

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

});

Aiheesta muualla

• Frappen sivusto