inCharts.js

Class: BarChart

BarChart

new BarChart(view, options)

Komponenta sloupcového grafu
Name Type Description
view HTMLElement Rodičovský element
options object Konfigurační objekt

Sloupcové grafy lze generovat ve dvou variantách – horizontální a vertikální. U horizontální varianty platí, že se názvy kategorií rozloží na ose Y a na ose X se vygeneruje rozsah hodnot. Aktuální hodnotu pak znázorňuje šířka pruhu. Vertikální vykreslování má osy prohozené a aktuální hodnota se znázorňuje pomocí výšky. Směr vykreslování lze volit parametrem options.direction, který lze mimo zmíněné varianty nastavit také na hodnotu „auto“. Při této volbě se varianta grafu zvolí automaticky podle proporcí rodičovského kontejneru.


Struktura dat


 data = {
    "datova_rada_1": [
        {
            "kategorie": "1.4.2016",
            "value": 22,
            "label": "c1"
        },
        {
            "kategorie": "2.4.2016",
            "value": 25,
            "label": "c2"
        }..
    ],
    "datova_rada_2": [
        {
            "kategorie": "1.4.2016",
            "value": 7,
            "label": "n0"
        },
        {
            "kategorie": "2.4.2016",
            "value": 15,
            "label": "n1"
        }..
    ]
}


Příklad použití


var chart = incharts.create(
                element,
                 "bar",
                 config
                );

chart.setData(data);

----------------------------------------------

var chart = new incharts.BarChart(canvas,options);
chart.setData(data);


Konfigurace

Properties:
Name Type Description
options object
Properties
Name Type Default Description
data_fillWidth number 0.95 poměřová šířka sloupce
data_fill string #F0F0F0 podbarvení sloupců
stacked boolean false skládání datových řad na sebe
direction string vertical rozložení grafu [horizontal/vertical]
grid string full zobrazení mřížky [none/full/peaks]
grid_style string dashed styl mřížky [dashed/normal]
grid_color string #dddddd barva mřížky
header string / nadpis grafu
header_size number 18 velikost nadpisu grafu
header_font string Arial font nadpisu grafu
header_style string 18 styl nadpisu grafu
header_color string #000 barva nadpisu grafu
showHeader boolean false zobrazení nadpisu
axis_size number 12 velikost hodnot na ose
axis_font string Arial font hodnot na ose
axis_style string normal styl hodnot na ose
axis_color string #000 barva hodnot na ose
showAxis boolean true zobrazení hodnot na ose
axisX_label string / popisek osy X
axisY_label string / popisek osy Y
axis_angle string/number auto úhel natočení hodnot na ose X
showAxisLabel boolean true popisku os
showDataValues boolean false zobrazení hodnot dat
showAverage boolean true zobrazení průměrné hodnoty
percent boolean false přepočet dat na procenta


Metody

parseData(data)

zpracuje data do objektů

Name Type Description
data object

JSON objekt dat

fitData()

přepočítá rozměr a velikost zobrazovaných objektů

calculateFrame()

přepočítá volný prostor pro vykreslení dat

updateFrame()

překreslí celý layout grafu a uloží do jej do mezipaměti

render()

překreslí všechny vrstvy grafu