Dashboard 1 (PC)

#latest  #demo

실시간 Dashboard 구현 예제입니다. (PC 전용)

data를 추가하고 render() 함수 실행해 실시간 그래프를 구현할 수 있습니다.


Status

INTEGRATED SDK

iOS 11.4.1

 PROCESSING DATA     SDK UPDATE AVAILABLE

SINCE 15:00

34.00

CONCURRENT USERS

SINCE 15:00

1,488.00

INCOMING EVENTS

New Users
Performance
CPU
Memory

Code

#chartWrap1	.sbchart-axis-x .tick line { display: none; }	/* x축 tick 라인 숨김 */
#chartWrap1	.sbchart-axis-x .tick text { fill: #999; }	/* x축 tick 폰트색 */
#chartWrap1	.sbchart-axis-x .domain { display: none; }	/* x축 라인 숨김 */
#chartWrap1	.sbchart-axis-y .tick line { display: none; }	/* y축 tick 라인 숨김 */
#chartWrap1	.sbchart-axis-y .tick text { fill: #999; }	/* y축 tick 폰트색 */
#chartWrap1	.sbchart-axis-y .domain { display: none; }	/* y축 라인 숨김 */
#chartWrap1	.sbchart-grid-y-line { stroke-dasharray: 3; }	/* y축 그리드 라인 점선처리 */
#chartWrap1	.sbchart-grid line { stroke: #666; }	/* 그리드 라인 색 */
#chartWrap1	.sbchart-shapes-other { stroke-width: 4; }	/* other 값 라인 굵기 */

var chart1 = new sb.chart("#chartWrap1", {
	global: {
		color: {
			pattern: ["#00a9ff", "#4a82b6"]
		},
		padding: { 
			right: 10
		}			
	},
	data: {
		types: {capital: "area", other: "line"},
		json: [],
		keys: {
			x: "day",
			value: ["capital", "other"]
		},
	},
	axis: {
		x: {
			type: "timeseries",
			tick: {
				count: 5,
				format: "%M'%S''"
			}
		},
		y: {
			tick: {
				values: [0, 2, 4, 6, 8, 10]
			}
		}
	},
	grid: {
		x: { 
			show: false 
		}
	},
	legend: {
		show: false
	},
	tooltip: {
		show: false
	},
	extend: {
		point: { 
			show: false 
		}
	}
});

//차트 #1 랜덤 데이터 생성
for(var i = 20; i > 0; i--) {
	var dt = new Date();
	dt.setSeconds(dt.getSeconds() - (i));
	chart1.data().json.push({ day: dt, capital: Math.floor((Math.random() * 9) + 1), other: Math.floor((Math.random() * 9) + 1) });
}

// 도넛 차트 2개 공통 속성
var conf = {
	global: {
		color: {
			pattern: ["#86b9e6", "#f2f2f2"]
		}
	},
	data: {
		type: "donut"
	},
	extend: {
		donut: {
			label: false,
			innerRadius: 40
		}
	},
	legend: {
		show: false
	},
	tooltip: {
		show: false
	}
};

var chart2 = new sb.chart("#chartWrap2", conf);
var chart3 = new sb.chart("#chartWrap3", conf);
chart3.global({
	color: {
		pattern: ["#f5707a", "#f2f2f2"]
	}
});


// 렌더링 수행
doRender1();
doRender2();
doRender3();

//차트 #1 렌더링
function doRender1() {
	//랜덤 데이터
	chart1.data().json.push({ day: new Date(), capital: Math.floor((Math.random() * 9) + 1), other: Math.floor((Math.random() * 9) + 1)});
	if(chart1.data().json.length > 20) chart1.data().json.shift();
	chart1.render();

	setTimeout(doRender1, 500);	//0.5초후 재실행
}

//차트 #2 렌더링
function doRender2() {
	var d = chart2.data().columns ? (chart2.data().columns[0][1] + (Math.random() * 10 / 100)) : 0;	//랜덤 데이터
	if(d >= 1) d = 0;

	chart2.data({
		columns: [
			["d", d],
			["a", (1 - d)]
		]
	}).extend({
		donut: { 
			title: (d * 100).toFixed(0) + "%"
		}
	}).render();

	setTimeout(doRender2, 1000);	//1초후 재실행
}

//차트 #3 렌더링
function doRender3() {
	var d = chart3.data().columns ? (chart3.data().columns[0][1] - (Math.random() * 5 / 100)) : 1;	//랜덤 데이터
	if(d <= 0) d = 1;

	chart3.data({
		columns: [
			["d", d],
			["a", (1 - d)]
		]
	}).extend({
		donut: { 
			title: (d * 100).toFixed(0) + "%"
		}
	}).render();

	setTimeout(doRender3, 500); //0.5초후 재실행
}