SBCHART

var chart = sb.chart.render("#chartWrap", {
    data: {
        type: "barrange",
        json : [
            { time : "10:00", sValue : 65, eValue : 100 },
            { time : "10:30", sValue : 50, eValue : 85 },
            { time : "11:00", sValue : 46, eValue : 80 },
            { time : "11:30", sValue : 45, eValue : 90 },
            { time : "12:00", sValue : 60, eValue : 95 }, 
            { time : "12:30", sValue : 45, eValue : 80 },
            { time : "13:00", sValue : 70, eValue : 100 },
            { time : "13:30", sValue : 45, eValue : 82 },
            { time : "14:00", sValue : 70, eValue : 98 },
            { time : "14:30", sValue : 73, eValue : 95 },
        ],
        keys : {
            x : "time",
            value : [ { start : "sValue", end : "eValue" } ]
        }
    }
});
// type
document.getElementById("selectType").onchange = function() {
    chart.extend({
        barrange: {
            type: this.value
        }
    }).render();
};
// width
document.getElementById("txtWidth").onchange = function() {
    chart.extend({
        barrange: {
            width: this.value
        }
    }).render();
};