horizon chart - options

3Overview

HORIZON CHART 의 전반적인 설정에 대한 값을 정의 하는 곳으로

데이터, 데이터들의 표현 형식, 시계열 적용, Tool Tip 등의 설정을 합니다.

var defaultOptions = {
	data : {
		data : null,
		url: '',
		type: 'json',
		reverse: false,
		jsonDepth: 'output.result',
		use : ''
	},
	xAxis : {
		select : '',
		format : null
	},
	yAxis : {
		select : '',
		format : null
	},
	toolTip : {
		use : true,
		className : null,
		position : {
			x : -90,
			y : -90
		},
		func : null
	},
	timeSlice : {
		use : false,
		delay : 500,
		animate : {
			use : false,
			type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut|none */
			speed : 200
		},
		slider : null,
		play : null,
		pause : null,
		stop : null,
		data : function (data) {
		
		}
	},
	resize : {
		use : false
	}
}

Configuration Options

data

data.data

URL이 아닌 JSON 데이터가 바로 입력될 경우에 사용

Parameters

datas

array

JSON DATA가 들어간 배열

Usage

var options = {
	data : {
		data : [
			{date: '20120101', data1: 1200, data2: 300, data3: 900, data4: 350 },
			{date: '20120102', data1: 800, data2: 400, data3: 700, data4: 300 },
			{date: '20120103', data1: 900, data2: 200, data3: 800, data4: 400 },
			{date: '20120104', data1: 800, data2: 250, data3: 600, data4: 200 },
			{date: '20120105', data1: 1100, data2: 150, data3: 1100, data4: 150 },
			{date: '20120106', data1: 600, data2: 200, data3: 800, data4: 250 },
			{date: '20120107', data1: 800, data2: 400, data3: 900, data4: 200 },
			{date: '20120108', data1: 700, data2: 300, data3: 800, data4: 400 },
			{date: '20120109', data1: 900, data2: 350, data3: 1200, data4: 300 }
		]
	}
}

data.url

Horizon chart 에 사용할 데이터 주소

Parameters

value

string

데이터 주소(AJAX로 호출)

Usage

var options = {
	data: {
		url: 'http://www.cyber-i.com/'
	}
}

data.type

Horizon chart 에 사용할 데이터 타입

Parameters

value

string

데이터 타입 ["json", "text"]

Usage

var options = {
	data: {
		type: 'json'
	}
}

data.reverse

Parameters

value

boolean

데이터의 정렬이 내림차순이 아닌 오름차순으로 들어올 경우 사용 [false, true]

Usage

var options = {
	data: {
		reverse: false
	}
}

data.jsonDepth

json 데이터에 깊이가 있는 경우

Parameters

value

string

실제 데이터가 있는 곳까지 '.' 로 연결

Usage

var options = {
	data: {
		jsonDepth: 'output.result'
	}
}

// DATA RESULT
{
	output: {
		result: [
			{date: '20120101', data1: 1200, data2: 300, data3: 900, data4: 350 },
			{date: '20120102', data1: 800, data2: 400, data3: 700, data4: 300 },
			{date: '20120103', data1: 900, data2: 200, data3: 800, data4: 400 },
			{date: '20120104', data1: 800, data2: 250, data3: 600, data4: 200 },
			{date: '20120105', data1: 1100, data2: 150, data3: 1100, data4: 150 },
			{date: '20120106', data1: 600, data2: 200, data3: 800, data4: 250 },
			{date: '20120107', data1: 800, data2: 400, data3: 900, data4: 200 },
			{date: '20120108', data1: 700, data2: 300, data3: 800, data4: 400 },
			{date: '20120109', data1: 900, data2: 350, data3: 1200, data4: 300 }
		]
	}
}

xAxis

xAxis.select

x 축의 값을 결정하는 데이터

Parameters

value

string

X 축의 값을 결정하는 데이터

Usage

var options = {
	xAxis: {
		select: 'date'
	}
}

Demo

Publisher Go

xAxis.format

X 축 텍스트 Formatting

Parameters

formatter

function

X 축 데이터 출력 형식 정의

value

string

X 축 TEXT 출력 형식 변경

Returns

value

string

출력 형식이 적용된 텍스트

Usage

var options = {
	xAxis: {
		format: function(data){
			var formatData = 'ex' + data;
			return formatData ;
		}
	}
}

Demo

Publisher Go

yAxis

yAxis.select

Y 축의 값을 결정하는 데이터

Parameters

			value	type	설명
yAxis	select	s1	'data1'	string	Horizon Chart 에서 각각의 시리즈에 Y 축 값을 결정하는 데이터로 select.s 의 숫자를 늘릴 수록 시리즈는 늘어난다. yAxis.select.s[1++]
		s2	'data2'	string
		s3	'data3'	string
		s4	'data4'	string
		s···

value

string

Y 축의 값을 결정하는 데이터

Usage

var options = {
	yAxis: {
		select: {
			s1 : 'data1',
			s2 : 'data2',
			s3 : 'data3',
			s4 : 'data4'
		}
	}
}

Demo

Publisher Go

yAxis.format

Y 축 텍스트 Formatting

Parameters

formatter

function

Y 축 데이터 출력 형식 정의

value

string

Y 축 TEXT 출력 형식 변경

Returns

value

string

출력 형식이 적용된 텍스트

Usage

var options = {
	yAxis: {
		format: function(data){
			var formatData = 'ex' + data;
			return formatData ;
		}
	}
}

Demo

Publisher Go

toolTip

toolTip.use

툴팁의 사용 여부 결정

Parameters

value

boolean

툴팁의 사용 여부

Usage

var options = {
	toolTip: {
		use: true
	}
}

toolTip.className

툴팁의 class 명 지정

Parameters

value

string

툴팁의 class 명 지정

Usage

var options = {
	toolTip: {
		className: 'tip'
	}
}

toolTip.position

툴팁의 X,Y 좌표 설정

Parameters

value

object

툴팁의 X,Y 좌표 설정

Usage

var options = {
	toolTip: {
		position: {
			x : 20,
			y : 20	
		}
	}
}

toolTip.func

툴팁 관련 function

Parameters

tipfunction

function

출력 데이터 및 css 를 변경을 할 수 있음.

data	object	툴팁에 사용되는 data
tipElement	dom	툴팁으로 사용되는 DIV

Usage

var options = {
	toolTip: {
		func: function(tipElement, data){
			tip.html( '날짜 : ' + data.date + '<br/>데이터 : ' + data.gap );
			tip.css({color : 'gray'});
		}
	}
}

Demo

Publisher Go

timeSlice

timeSlice.use

시계열의 사용 여부 결정

Parameters

value

boolean

시계열의 사용 여부

Usage

var options = {
	timeSlice: {
		use: true
	}
}

Demo

Publisher Go

timeSlice.delay

시계열 재생시 그려지는 속도

Parameters

value

number

setTimeout 함수에 쓰여지는 interval과 동일(밀리초 단위)

timeSlice.slider

시계열 jQuery UI - Slider

Parameters

element

dom

Slider로 사용할 jQuery selector

timeSlice.play

시계열 재생버튼

Parameters

element

dom

재생버튼으로 사용할 jQuery selector

timeSlice.pause

시계열 일시정지버튼

Parameters

element

dom

일시정지버튼으로 사용할 jQuery selector

timeSlice.stop

시계열 정지버튼

Parameters

element

dom

정지버튼으로 사용할 jQuery selector

timeSlice.animate.use

시계열의 animate 사용 여부 결정

Parameters

value

boolean

시계열의 animate 사용 여부

Usage

var options = {
	timeSlice: {
		animate : {
			use : true
		}
	}
}

Demo

Publisher Go

timeSlice.animate.type

시계열의 animate type

Parameters

value

string

“linear”
“<” or “easeIn” or “ease-in”
“>” or “easeOut” or “ease-out”
“<>” or “easeInOut” or “ease-in-out”
“backIn” or “back-in”
“backOut” or “back-out”
“elastic”
“bounce”

Usage

var options = {
	timeSlice: {
		animate: {
			type: 'linear' 
		} 
	}
}

Demo

Publisher Go

timeSlice.data

시계열 jQuery UI - slider 위치에 대한 데이터

Parameters

sliderfunction

function

차트에서 사용하는 슬라이더는 thumb가 2개이다.

thumb[0] 에서부터 thumb[1] 까지 사이의 데이터를 넘겨받는다.

Usage

var options = {
	timeSlice: {
		delay: 300,
		slider: $('#slider'),
		play: $('#playBtn'),
		pause: $('#pauseBtn'),
		stop: $('#stopBtn'),
		data: function(data){
			$('#info').text(data[0].date + '~' + data[data.length - 1].date);
		}
	}
}

Demo

Publisher Go

resize

resize.use

resize 이벤트 사용 여부 결정

Parameters

value

boolean

resize 이벤트사용 여부 결정

scatter plot 을 포함하는 DIV 의 width 값이 100% 로 지정 되었을 경우 사용 가능

Usage

var options = {
	resize: {
		use : true
	}
}

Demo

Publisher Go