SBCHART

//pie
var chart1 = sb.chart.render("#chartWrap1", {
    data: {
        type: "pie",
        columns: [
            ["2015",65.26],
            ["2016",12.74],
            ["2017",22]
        ]
    }
});
//donut
var chart2 = sb.chart.render("#chartWrap2", {
    data: {
        type: "donut",
        columns: [
            ["2015",65.26],
            ["2016",12.74],
            ["2017",22]
        ]
    }
}); 
//gauge
var chart3 = sb.chart.render("#chartWrap3", {
    data: {
        type: "gauge",
        columns: [
            ["2015",65.26]
        ]
    }
}); 

// show/hide
document.getElementById("chkShow").onchange = function() {
    //pie
    chart1.extend({
        pie: {
            label: {
                show: this.checked
            }
        }
    }).render();
    //donut
    chart2.extend({
        donut: {
            label: {
                show: this.checked
            }
        }
    }).render();
    //gauge
    chart3.extend({
        gauge: {
            label: {
                show: this.checked
            }
        }
    }).render();
};
// format
document.getElementById("chkFormat").onchange = function() {
    if(this.checked) {
        //apply format
        var func = function(value, ratio, id) {
            return value.toFixed(2) + "%";
        };
        document.getElementById("chkShow").checked = true;
        //pie
        chart1.extend({
            pie: {
                label: {
                    show: true,
                    format: func
                }
            }
        }).render();
        //donut
        chart2.extend({
            donut: {
                label: {
                    show: true,
                    format: func
                }
            }
        }).render();
        //gauge
        chart3.extend({
            gauge: {
                label: {
                    show: true,
                    format: func
                }
            }
        }).render();
    } else {
        //remove format
        delete chart1.extend().pie.label.format;
        delete chart2.extend().donut.label.format;
        delete chart3.extend().gauge.label.format;
        chart1.render();
        chart2.render();
        chart3.render();
    }
};
// position
document.getElementById("chkPosition").onchange = function() {
    if( this.checked ) {
        document.getElementById("chkShow").checked = true;
        chart1.extend().pie.label.position = "outer";
        chart2.extend().donut.label.position = "outer";
        chart3.extend().gauge.label.position = "outer";
    }
    else {
        // remove position
        delete chart1.extend().pie.label.position;
        delete chart2.extend().donut.label.position;
        delete chart3.extend().gauge.label.position;
    }
	
    chart1.render();
    chart2.render();
    chart3.render();
};

// outerRange
document.getElementById("chkOuterRange").onchange = function() {
    if( this.checked ) {
        document.getElementById("chkShow").checked = true;
        var func = function(value, ratio) { return ratio*100 < 30; };

        chart1.extend().pie.label.outerRange = func;
        chart2.extend().donut.label.outerRange = func;
        chart3.extend().gauge.label.outerRange = func;
    }
    else {
        // remove outerRange
        delete chart1.extend().pie.label.outerRange;
        delete chart2.extend().donut.label.outerRange;
        delete chart3.extend().gauge.label.outerRange;
    }
	
    chart1.render();	
    chart2.render();
    chart3.render();
};