SBCHART

var chart = sb.chart.render("#chartWrap", {
    data: {
	type : "heatmap",
	json : [
            { xData : "2018", yData : "서울",	data : 30 },
            { xData : "2018", yData : "경기도",	data : 95 },
            { xData : "2018", yData : "부산",	data : 22 },
            { xData : "2019", yData : "서울",	data : 72 },
            { xData : "2019", yData : "경기도",	data : 25 },
            { xData : "2019", yData : "부산",	data : 81 },
            { xData : "2020", yData : "서울",	data : 120 },
            { xData : "2020", yData : "경기도",	data : 86 },
            { xData : "2020", yData : "부산",	data : 43 },
            { xData : "2021", yData : "서울",	data : 100 },
            { xData : "2021", yData : "경기도",	data : 57 },
            { xData : "2021", yData : "부산",	data : 98 },
        ],
        keys : {
            x : "xData",
            value : [ { y : "yData", value : "data" } ]
        }
    },
    extend : {
        heatmap : {
            axisYFormat : function(v) {
                return v+"지역";
            },
            startColor : "#F2D3C1",
            endColor : "#867182"
        }
    }
});

// axisYFormat
document.getElementById("txtaxisYFormat").onchange = function() {
    chart.extend({
        heatmap : {
            axisYFormat : document.getElementById("txtaxisYFormat").checked ?
                function(v) { return v+"지역"; }
                : undefined
            }
    }).render();
};
	
// startColor
document.getElementById("txtStartColor").onchange = function() {
    chart.extend({
        heatmap : {
            startColor : document.getElementById("txtStartColor").value
        }
    }).render();
};
	
// endColor	
document.getElementById("txtEndColor").onchange = function() {
    chart.extend({
        heatmap : {
            endColor : document.getElementById("txtEndColor").value
        }
    }).render();
};