SBCHART

svg { font-family: AppleSDGothicNeo-Regular,Malgun Gothic,"sans-serif"; }
.sbchart-title { font-size: 18px; line-height: 21px; font-weight: bold; }
.sbchart-legend .sbchart-legend-item { font-size: 12px; line-height: 15px; }

sb.chart.render("#chartWrap", {
    global: {
        color: {
            pattern : ["#549FD1","#F36B70","#F22283","#17937C"],
            backgroundImage : {
                DBP : {
                    imageUrl : ["#F22283","#29B9D9","#29B9D9","#F22283","#F22283",
                        "#29B9D9","#F22283","#29B9D9","#F22283","#29B9D9"]
                }
            }
        }
    },
    data: {
        types: {
            DBP : "barrange-start", 
            SBP : "barrange-end",
            s : "line",
            e : "spline",
            pluse : "area-step"
        },
        json: [
            { time : "10:00", DBP : 65,	SBP : 100, s : 36.2, e : 38.1, pluse : 24 },
            { time : "10:30", DBP : 50,	SBP : 85, s : 36.1, e : 37.8, pluse : 24 },
            { time : "11:00", DBP : 46,	SBP : 80, s : 36.3, e : 37.8, pluse : 24 },
            { time : "11:30", DBP : 45,	SBP : 90, s : 36.2, e : 37.7, pluse : 21 },
            { time : "12:00", DBP : 60,	SBP : 95, s : 36.3, e : 37.8, pluse : 24 },
            { time : "12:30", DBP : 45,	SBP : 80, s : 36.5, e : 37.6, pluse : 24 },
            { time : "13:00", DBP : 70,	SBP : 100, s : 36.0, e : 37.8, pluse : 24 },
            { time : "13:30", DBP : 45,	SBP : 82, s : 36.1, e : 37.9, pluse : 24 },
            { time : "14:00", DBP : 70,	SBP : 98, s : 35.8, e : 37.7, pluse : 13 },
            { time : "14:30", DBP : 73,	SBP : 95, s : 36.3, e : 37.6, pluse : 24 },
        ],
        keys : {
            x : "time",
            value : [ "s", "e", { start : "DBP", end : "SBP" }, "pluse" ] 
        },
        legends : { DBP : "혈압", e : "최고체온", pluse : "맥박", s : "최저체온" }
    },
    axis : {
        axes : {
            y2 : ["s", "e"]
        },
        x : {
            type : "category",
            tick : {
                multiline : false
            }
        },
        y : {
            tick : {
                values : [20, 40, 60, 80, 100],
                multiline : false
            },
        },
        y2 : {
            min : 34,
            max : 40,
            multiline : false
        }
    },
    title : { 
        text : "Vital Sign 그래프"
    },
    legend : {
        padding : 20
    },
    extend : {
        point : {
            r : 3,
            color : "#333"
        },
        barrange : {
            type : "arrow",
            width : 2
        }
    }
});