API

IBChart(H) Data Interface

IBChart(H)의 data interface에 대한 가이드 입니다.

Outline
Property
Data
EtcData

Outline

top

IBChart(H)의 Data Interface Schema는 Option, Data, EtcData 영역으로 구성되어있다. 데이터 형식은 JSON으로 권장한다. (XML도 호환)

Data Interface JSON schema

{
    ibchart: {
        title: "Chart Title",
        subtitle: "subtitle",
        backgroundColor: "#FFFFFF",
        borderWidth: "1",
        borderColor: "#0000FF",
        zoomType: "x",
        etcData: [
            {key: "etc", value: 9.0}
        ],
        data: [{
            axisLabel: "A",
            series: [{
                seriesType : "line",
                seriesName: "중국",
                seriesColor: "blue",
                pointName: "하나",
                pointColor: "yellow",
                value: 10
            },{
                seriesType: "spline",
                seriesName: "호주",
                seriesColor: "red",
                pointName: "열하나",
                pointColor: "black",
                value: 11
            }]
        },{
            axisLabel: "B",
            series: [20,21]
        }]
    }
}

See

• loadSearchData()
• XML

Data Interface XML schema

<IBChart Type='' backgroundColor='#FFFFFF' BorderWidth='1' BorderColor='#0000FF' ZoomType='x' Title='Chart Title' Subtitle='subtitle'>
    <Etc-Data>
        <Etc Key='etc'>9.0</Etc>
    </Etc-Data>
    <Data>
        <PointSet AxisLabel='A'>
            <Sereis SeriesType='line' SeriesName='중국' SeriesColor='blue' PointName='하나' PointColor='yellow'>10</Sereis>
            <Sereis SeriesType='spline' SeriesName='호주' SeriesColor='red' PointName='열하나' PointColor='black'>11</Sereis>
        </PointSet>
        <PointSet AxisLabel='B'>
            <Sereis>11</Sereis>
            <Sereis>21</Sereis>
        </PointSet>
    </Data>
</IBChart>

Deprecated See

• loadSearchData()
• JSON

Property

top

차트의 속성을 데이터와 동적으로 조회해서 적용한다.

{
    title: "Chart Title",
    subtitle: "subtitle",
    backgroundColor: "#FFFFFF",
    borderWidth: "1",
    borderColor: "#0000FF",
    zoomType: "x"
}

각 property에 대한 설명은 아래와 같다.

Data

top

차트를 그리기 위해 필요한 x축, y축, z축에 대한 데이터를 동적으로 조회해서 적용한다.

{
    data: [{
            axisLabel: "A",
            series: []
    }]
}

각 property에 대한 설명은 아래와 같다.

series

series는 array로 구성되는데 index 순서로 시리즈가 만들어진다. 일의 자리 시리즈 A와 십의 자리 시리즈 B로 예를 들면 아래와 같다.

[{
    series: [{
        seriesType : "line",
        seriesName: "A",
        seriesColor: "blue",
        pointName: "하나",
        pointColor: "yellow",
        value: 1
    },{
        seriesType: "spline",
        seriesName: "B",
        seriesColor: "red",
        pointName: "열",
        pointColor: "black",
        value: 10
    }]
},{
    series: [2,20]
}]

각 property에 대한 설명은 아래와 같고 개별 시리즈 공통 설정(seriesType,seriesName,seriesColor)은 Data의 첫번째 series에만 설정하면 된다.

기본적으로 데이터는 숫자 배열로 입력 가능하다. (3개의 시리즈)

ex) x1: 0, x2: 2, x3: 3, y1: 1, y2: 10, y3: 100

[{
    series: [1,10,100]
}]

데이터는 object 형식으로 입력하거나 n차 배열로 입력이 가능하다. (3개의 시리즈)

ex) x1: 1, x2: 2, x3: 3, y1: 1, y2: 10, y3: 100

[{
    series: [[1,1],[2,10],[3,100]]
}]

or

[{
    series: [{
        x: 1,
        y: 1
    },{
        x: 2,
        y: 10
    },{
        x: 3,
        y: 100
    }]
}]

or

[{
    series: [{
        value: [1,1]
    },{
        value: [2,10]
    },{
        value: [3,100]
    }]
}]

ex) x1: 1, x2: 2, x3: 3, y1: 1, y2: 10, y3: 100, z1: 1, z2: 1, z3: 1

[{
    series: [[1,1,1],[2,10,1],[3,100,1]]
}]

or

[{
    series: [{
        x: 1,
        y: 1,
        z: 1
    },{
        x: 2,
        y: 10,
        z: 1
    },{
        x: 3,
        y: 100,
        z: 1
    }]
}]

or

[{
    series: [{
        value: [1,1,1]
    },{
        value: [2,10,1]
    },{
        value: [3,100,1]
    }]
}]

Etc Data

top

속성이나 데이터 이외의 정보를 담아서 차트에 포함 시킬 수 있다.

{
    etcData: [{
        key: "etc",
        value: 9.0
    }]
}

각 property에 대한 설명은 아래와 같다.