horizon chart - options

3Overview

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

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

optionsMidnighttruejs
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

datasarrayJSON DATA가 들어간 배열

Usage

data.dataMidnighttruejs
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

valuestring데이터 주소(AJAX로 호출)

Usage

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

data.type

Horizon chart 에 사용할 데이터 타입

Parameters

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

Usage

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

data.reverse

Parameters

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

Usage

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

data.jsonDepth

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

Parameters

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

Usage

data.jsonDepthMidnighttruejs
var options = {
	data: {
		jsonDepth: 'output.result'
	}
}
data.jsonDepth - DATAMidnighttruejs
// 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

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

Usage

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

Demo

Publisher Go

xAxis.format

X 축 텍스트 Formatting

Parameters

formatterfunction

X 축 데이터 출력 형식 정의

valuestringX 축 TEXT 출력 형식 변경

Returns

valuestring출력 형식이 적용된 텍스트

Usage

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

Demo

Publisher Go

yAxis

yAxis.select

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

Parameters

   valuetype설명
yAxisselects1'data1'string

 

Horizon Chart 에서 각각의 시리즈에 Y 축 값을 결정하는 데이터로

select.s 의 숫자를 늘릴 수록 시리즈는 늘어난다.

yAxis.select.s[1++] 

  s2'data2'string
  s3'data3'string
  s4'data4'string
  ··  
valuestringY 축의 값을 결정하는 데이터

Usage

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

Demo

Publisher Go

yAxis.format

Y 축 텍스트 Formatting

Parameters

formatterfunction

Y 축 데이터 출력 형식 정의

valuestringY 축 TEXT 출력 형식 변경

Returns

valuestring출력 형식이 적용된 텍스트

Usage

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

Demo

Publisher Go

toolTip

toolTip.use

툴팁의 사용 여부 결정

Parameters

valueboolean툴팁의 사용 여부

Usage

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

toolTip.className

툴팁의 class 명 지정 

Parameters 

valuestring툴팁의 class 명 지정

 Usage 

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

toolTip.position

툴팁의 X,Y 좌표 설정

Parameters

valueobject툴팁의 X,Y 좌표 설정

Usage 

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

toolTip.func

툴팁 관련 function

Parameters

tipfunctionfunction

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

data

object

툴팁에 사용되는 data

tipElementdom툴팁으로 사용되는 DIV

Usage

toolTip.funcMidnighttruejs
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

valueboolean시계열의 사용 여부

Usage

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

Demo 

Publisher Go

timeSlice.delay

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

Parameters

valuenumber

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

timeSlice.slider

시계열 jQuery UI - Slider

Parameters 

elementdom

 Slider로 사용할 jQuery selector

timeSlice.play

시계열 재생버튼

Parameters 

elementdom

 재생버튼으로 사용할 jQuery selector

timeSlice.pause

 시계열 일시정지버튼

Parameters 

elementdom

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

timeSlice.stop

시계열 정지버튼

Parameters 

elementdom

 정지버튼으로 사용할 jQuery selector

timeSlice.animate.use

시계열의 animate 사용 여부 결정

Parameters

valueboolean시계열의 animate 사용 여부

Usage

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

Demo 

Publisher Go

timeSlice.animate.type

 시계열의 animate type 

Parameters 

valuestring
  • “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 

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

Demo 

Publisher Go

timeSlice.data

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

Parameters 

sliderfunctionfunction

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

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

Usage

timeSlice.dataMidnighttruejs
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

valueboolean

resize 이벤트사용 여부 결정

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

Usage

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

Demo 

Publisher Go