자바스크립트 slice로 배열 10칸씩 옮기기 with 스케줄링

🎨 setTimeout

• setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법

 

🎨 setInterval

• setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법

 

🎨 slice(시작값, 끝값)

function createGraph(data) {
	console.log("create 1");
	var years = [];
	var CNT_WAIT = ["cnt_wait"];

	for (var i = 0; i < data.length; i++) {
		years.push(data[i][0]);
		CNT_WAIT.push(data[i][1]);
	}

	var index = 0;
	setInterval(function run() {
		//years.shift();
		//CNT_WAIT.shift();
		//console.log(years);
		temp = index++
		console.log(CNT_WAIT.slice(temp, 10+temp));
		console.log(CNT_WAIT.length);
	}, 2000)
	
	console.log("finish")
};

parseData(createGraph);

 

 

🎨 10 칸씩 업데이트 되며 new line graph 만들기

• setInterval을 사용해서 새로운 차트를 생성하니 깜박. 깜박.. 한다... ㅜㅜ

/*
 * Parse the data and create a graph with the data.
 */


// 데이터 불러오기
function parseData(createGraph) {
	Papa.parse("../data/test.csv", {
		download: true,
		complete: function(results) {
			createGraph(results.data);
		}
	});
}

function createGraph(data) {
	// console.log("create 1");
	var years = [];
	var CNT_WAIT = [];

	// 새로운 배열에 데이터 각각 주입
	for (var i = 1; i < data.length; i++) {
		years.push(data[i][0]);
		CNT_WAIT.push(data[i][1]);
	}

	// 슬라이스 하며 10칸씩 업데이트 하기 위한 배열 생성
	var index = 0;
	var N_CNT_WAIT = [];
	var N_YEARS = [];

	// 1초씩 반복하며 업데이트된 차트 시각화
	setInterval(function run() {
		temp = index++
		N_CNT_WAIT = CNT_WAIT.slice(temp, 10+temp)
		N_YEARS = years.slice(temp, 10+temp)

		console.log(N_CNT_WAIT);
		console.log(N_YEARS);
		
		// c3.js 사용해서 line chart 그리기
		var chart = c3.generate({
			bindto: '#chart',
			data: {
				columns: [
					N_CNT_WAIT
				],
				labels: true
			},
			
			axis: {
				x: {
					type: 'category',
					categories: N_YEARS,
					tick: {
						multiline: false,
						culling: {
							// 틱이 추려진 다음 제한된 틱 텍스트만 표시
							max: 15
						}
					}
				}
			},
			zoom: {
				enabled: true
			},
			legend: {
				position: 'right'
			}
		});

	}, 1000)
	
	// console.log("finish")
};

parseData(createGraph);