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초후 재실행
}