inCharts.js

Class: LineChart

LineChart

new LineChart(view, options)

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

Struktura dat


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


Příklad použití


var chart = incharts.create(
                element,
                 "line",
                 config
                );
chart.setData(data);


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

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


Konfigurace

Properties:
Name Type Description
options object
Properties
Name Type Default Description
timeline boolean false aktivování časové osy
timeFormat string hh:mm formát zobrazení hodnot časové osy
timeFormatFull string DD-MM hh:mm formát zobrazení krajních hodnot časové osy
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

cropTo(min,max)

vymezí časovou oblast vykreslovaných dat

Name Type Description
min number

začátek vymezené oblasti
max number

konec vymezené oblasti

findIntersection(p1,p2,x)

najde průsečík s přímkou mezi dvěma body

Name Type Description
p1 point

počáteční bod přímky
p2 point

koncový bod přímky
x number

pozice na ose X

getTimeLine(values,count)

vygeneruje hodnoty na časové ose

Name Type Description
values number[]

časové hodnoty
count number

požadovaný počet hodnot

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