SBGRID

전체메뉴보기

적용예시

원형 및 기타 차트

SBGrid와 원형 및 기타 SBChart를 연동합니다.

막대형 차트 선형 차트

차트종류

mergecells

버튼을 클릭하여 그리드와 연동된 원형 및 다양한 차트를 확인해 보세요.

예시

그리드에서 변경한 데이터가 그리드와 연동된 차트에 바로 적용되는 것을 확인해 보세요.

							var pieChart;
							var datagrid;

							function fnPieChart(){
								pieChart = sb.chart.render("#pieChartWrap", {
									data : {
										type:"pie",
										json: grid_data,
										keys: {
											x: "month",
											value: ["inchon","kimhae","kimpo","jeju","busan"]
										},
										legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"}
									},
									legend: {
										padding: 20
									},
									title : {
										text: "2019년 지역별 자산 대 부채율(단위: %)",
										position: "top-center",
										padding: {
											top: 0, right: 0, bottom: 10, left: 0
										}
									},
									extend: {
										pie: {
											padding: 1
										}
									}, 
									global: {
										color : {
											pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
										},
										animation: {
											show: true,                            
											type: "circle",                        
											delay: 800,                           
											ease: "linear"                     
										}
									}
								}).render();	
							};
					

							$(document).ready(function(){
								createElements();
								fnPieChart();
							});


							function createElements() {
								var SBGridProperties = {};	
								SBGridProperties.parentid 			= 'sbGridArea';
								SBGridProperties.id 				= 'datagrid';
								SBGridProperties.jsonref 			= 'grid_data';
								SBGridProperties.backcoloralternate = '#FAFAFA';
								SBGridProperties.rowheight			= '30';
								SBGridProperties.fixedrowheight 	= '38';
								SBGridProperties.extendlastcol		= 'scroll';
								SBGridProperties.oneclickedit 		= true;
								SBGridProperties.explorerbar 		= 'move';
								
								SBGridProperties.columns = [
									{caption: ['년도','2019년'],	    	width:'7%',		ref: 'month',	type : 'output',   	   style: 'text-align:center;'},
									{caption: ['지역정보','인천'],			width:'9%',		ref: 'inchon',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
									{caption: ['지역정보','김해'],			width:'9%',		ref: 'kimhae', 	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
									{caption: ['지역정보','김포'],			width:'9%',		ref: 'jeju',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
									{caption: ['지역정보','부산'],			width:'9%',		ref: 'busan',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
									{caption: ['통계정보','소득비'],		width:'12%',	ref :'income',  type : 'combo',			style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
									{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} },
									{caption: ['통계정보','시책발표'],		width:'5%',		ref :'chk',  	type : 'checkbox',		style: 'text-align:center;' ,	typeinfo : {checkedvalue : 'Y'} },
									{caption: ['통계정보','전환시점'],		width:'5%',		ref :'rao',  	type : 'radio',			style: 'text-align:center;' },
									{caption: ['통계정보','통계발표일'],	width:'14%',	ref :'stDate',  type : 'inputdate',		style: 'text-align:center;' ,	typeinfo : {locale : 'ko', dateformat : 'yymmdd'}},
									{caption: ['통계정보','비고'],			width:'9%',		ref :'etc',  	type : 'textarea',		style: 'text-align:center;'}			
								];
								datagrid = _SBGrid.create(SBGridProperties);
								datagrid.bind("valuechanged","chartDataChange");
							};


							function chartDataChange(){
								pieChart.data({json:grid_data}).render();
							};

								var donutChart;
								var datagrid;
	
								function fnDonutChart() {
									donutChart = sb.chart.render("#donutChartWrap", {
										data : {
											type:"donut",
											json: grid_data,
											keys: {
												x: "month",
												value: ["inchon","kimhae","kimpo","jeju","busan"]
											},
											legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"}
										},
										legend: {
											padding: 20
										},
										title : {
											text: "2019년 지역별 자산 대 부채율(단위: %)",
											position: "top-center",
											padding: {
												top: 0, right: 0, bottom: 10, left: 0
											}
										},
										extend: {
											donut: {
												padding: 3
											}
										},
										global: {
											color : {
												pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
											},
											animation: {
												show: true,                            
												type: "circle",                          
												delay: 800,                            
												ease: "linear"                    
											}
										}	
									}).render();		
								};										
						
	
								$(document).ready(function(){
									createElements();
									fnDonutChart();
								});
	
	
								function createElements() {
									var SBGridProperties = {};	
									SBGridProperties.parentid 			= 'sbGridArea';
									SBGridProperties.id 				= 'datagrid';
									SBGridProperties.jsonref 			= 'grid_data';
									SBGridProperties.backcoloralternate = '#FAFAFA';
									SBGridProperties.rowheight			= '30';
									SBGridProperties.fixedrowheight 	= '38';
									SBGridProperties.extendlastcol		= 'scroll';
									SBGridProperties.oneclickedit 		= true;
									SBGridProperties.explorerbar 		= 'move';
									
									SBGridProperties.columns = [
										{caption: ['년도','2019년'],	    	width:'7%',		ref: 'month',	type : 'output',   	   style: 'text-align:center;'},
										{caption: ['지역정보','인천'],			width:'9%',		ref: 'inchon',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
										{caption: ['지역정보','김해'],			width:'9%',		ref: 'kimhae', 	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
										{caption: ['지역정보','김포'],			width:'9%',		ref: 'jeju',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
										{caption: ['지역정보','부산'],			width:'9%',		ref: 'busan',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
										{caption: ['통계정보','소득비'],		width:'12%',	ref :'income',  type : 'combo',			style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
										{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} },
										{caption: ['통계정보','시책발표'],		width:'5%',		ref :'chk',  	type : 'checkbox',		style: 'text-align:center;' ,	typeinfo : {checkedvalue : 'Y'} },
										{caption: ['통계정보','전환시점'],		width:'5%',		ref :'rao',  	type : 'radio',			style: 'text-align:center;' },
										{caption: ['통계정보','통계발표일'],	width:'14%',	ref :'stDate',  type : 'inputdate',		style: 'text-align:center;' ,	typeinfo : {locale : 'ko', dateformat : 'yymmdd'}},
										{caption: ['통계정보','비고'],			width:'9%',		ref :'etc',  	type : 'textarea',		style: 'text-align:center;'}			
									];
									datagrid = _SBGrid.create(SBGridProperties);
									datagrid.bind("valuechanged","chartDataChange");
								};
	
	
								function chartDataChange(){
									donutChart.data({json:grid_data}).render();
								};

									var gaugeChart;
									var datagrid;
		
									var rateforJan= Number(grid_data[0].rate);
									function fnGaugeChart(){
										gaugeChart = sb.chart.render("#gaugeChartWrap", {
											data : {
												type:"gauge",
												columns:[
													["1월",rateforJan]
												]
											}, 
											title : {
												text: "2019년 1월 부채율(단위: %)",
												position: "top-center",
												padding: {
													top: 0, right: 10, bottom: 10, left: 20
												}
											},
											global:{
												color : {
													pattern:["#49C6B8"]
												},
												animation: {
													show: true,                             
													type: "circle",                        
													delay: 800,                        
													ease: "bounce"                       
												}
											}
										}).render();	
									};	
							
		
									$(document).ready(function(){
										createElements();
										fnGaugeChart();
									});
		
		
									function createElements() {
										var SBGridProperties = {};	
										SBGridProperties.parentid 			= 'sbGridArea';
										SBGridProperties.id 				= 'datagrid';
										SBGridProperties.jsonref 			= 'grid_data';
										SBGridProperties.backcoloralternate = '#FAFAFA';
										SBGridProperties.rowheight			= '30';
										SBGridProperties.fixedrowheight 	= '38';
										SBGridProperties.extendlastcol		= 'scroll';
										SBGridProperties.oneclickedit 		= true;
										SBGridProperties.explorerbar 		= 'move';
										
										SBGridProperties.columns = [
											{caption: ['년도','2019년'],	    	width:'7%',		ref: 'month',	type : 'output',   	   style: 'text-align:center;'},
											{caption: ['지역정보','인천'],			width:'9%',		ref: 'inchon',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김해'],			width:'9%',		ref: 'kimhae', 	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김포'],			width:'9%',		ref: 'jeju',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','부산'],			width:'9%',		ref: 'busan',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['통계정보','소득비'],		width:'12%',	ref :'income',  type : 'combo',			style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
											{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} },
											{caption: ['통계정보','시책발표'],		width:'5%',		ref :'chk',  	type : 'checkbox',		style: 'text-align:center;' ,	typeinfo : {checkedvalue : 'Y'} },
											{caption: ['통계정보','전환시점'],		width:'5%',		ref :'rao',  	type : 'radio',			style: 'text-align:center;' },
											{caption: ['통계정보','통계발표일'],	width:'14%',	ref :'stDate',  type : 'inputdate',		style: 'text-align:center;' ,	typeinfo : {locale : 'ko', dateformat : 'yymmdd'}},
											{caption: ['통계정보','비고'],			width:'9%',		ref :'etc',  	type : 'textarea',		style: 'text-align:center;'}			
										];
										datagrid = _SBGrid.create(SBGridProperties);
										datagrid.bind("valuechanged","chartDataChange");
									};
		
		
									function chartDataChange(){
										gaugeChart.data({json:grid_data}).render();
									};

									var bubbleChart;
									var datagrid;
		
									function fnBubbleChart(){
										bubbleChart= sb.chart.render("#bubbleChartWrap", {
											data : {
												type: "bubble",
												json: grid_data,
												keys: {
													x: "month",
													value: ["inchon","kimhae","kimpo","jeju","busan"]
												},
												legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"}
											},
											title : {
												text: "2019년 지역별 자산 대 부채액(단위: 천)",
												position: "top-center",
												padding: {
													top: 0, right: 10, bottom: 10, left: 20
												}
											},
											axis: {
												x : {
													type: "category",
													categories: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"]
												},
												y: {
													show:false
												}
											},
											extend: {
												bubble: {
													maxR: 25
												}
											}, 
											legend: {
												padding:20
											},
											global: {
												color : {	
													pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
												},
												animation: {
													show: true,                          
													type: "pop",                         
													delay: 800,                            
													ease: "linear"                       
												}
											}
										}).render();	
									};
							
		
									$(document).ready(function(){
										createElements();
										fnBubbleChart();
									});
		
		
									function createElements() {
										var SBGridProperties = {};	
										SBGridProperties.parentid 			= 'sbGridArea';
										SBGridProperties.id 				= 'datagrid';
										SBGridProperties.jsonref 			= 'grid_data';
										SBGridProperties.backcoloralternate = '#FAFAFA';
										SBGridProperties.rowheight			= '30';
										SBGridProperties.fixedrowheight 	= '38';
										SBGridProperties.extendlastcol		= 'scroll';
										SBGridProperties.oneclickedit 		= true;
										SBGridProperties.explorerbar 		= 'move';
										
										SBGridProperties.columns = [
											{caption: ['년도','2019년'],	    	width:'7%',		ref: 'month',	type : 'output',   	   style: 'text-align:center;'},
											{caption: ['지역정보','인천'],			width:'9%',		ref: 'inchon',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김해'],			width:'9%',		ref: 'kimhae', 	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김포'],			width:'9%',		ref: 'jeju',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','부산'],			width:'9%',		ref: 'busan',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['통계정보','소득비'],		width:'12%',	ref :'income',  type : 'combo',			style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
											{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} },
											{caption: ['통계정보','시책발표'],		width:'5%',		ref :'chk',  	type : 'checkbox',		style: 'text-align:center;' ,	typeinfo : {checkedvalue : 'Y'} },
											{caption: ['통계정보','전환시점'],		width:'5%',		ref :'rao',  	type : 'radio',			style: 'text-align:center;' },
											{caption: ['통계정보','통계발표일'],	width:'14%',	ref :'stDate',  type : 'inputdate',		style: 'text-align:center;' ,	typeinfo : {locale : 'ko', dateformat : 'yymmdd'}},
											{caption: ['통계정보','비고'],			width:'9%',		ref :'etc',  	type : 'textarea',		style: 'text-align:center;'}			
										];
										datagrid = _SBGrid.create(SBGridProperties);
										datagrid.bind("valuechanged","chartDataChange");
									};
		
		
									function chartDataChange(){
										bubbleChart.data({json:grid_data}).render();
									};

									var scatterPlotChart;
									var datagrid;
		
									function fnScatterPlotChart(){
										scatterPlotChart= sb.chart.render("#scatterPlotChartWrap", {
											data : {
												type: "scatter",
												json: grid_data,
												keys: {
													x: "month",
													value: ["inchon","kimhae","kimpo","jeju","busan"]
												},
												legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"}
											},
											title : {
												text: "2019년 지역별 자산 대 부채액(단위: 천)",
												position: "top-center",
												padding: {
													top: 0, right: 10, bottom: 10, left: 20
												}
											},
											axis: {
												x : {
													type: "category",
													categories: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"]
												},
												y: {
													show:false
												}
											},
											extend: {
												bubble: {
													maxR: 25
												}
											},
											legend: {
												show: true,
												position: "inset",
												inset: {
													anchor:"top-right",
													x: 0,
													y: -20
												},
												padding: 20
											},
											global: {
												color : {	
													pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
												},
												animation: {
													show: true,                             // animation 효과 사용여부 (boolean)
													type: "pop",                           // 적용할 animation type (string)
													delay: 800,                             // animation 효과가 완료되기까지의 시간(number, 밀리초단위)
													ease: "linear"                       // animation 가속도 효과
												}
											}
										}).render();	
									};								
							
		
									$(document).ready(function(){
										createElements();
										fnScatterPlotChart();
									});
		
		
									function createElements() {
										var SBGridProperties = {};	
										SBGridProperties.parentid 			= 'sbGridArea';
										SBGridProperties.id 				= 'datagrid';
										SBGridProperties.jsonref 			= 'grid_data';
										SBGridProperties.backcoloralternate = '#FAFAFA';
										SBGridProperties.rowheight			= '30';
										SBGridProperties.fixedrowheight 	= '38';
										SBGridProperties.extendlastcol		= 'scroll';
										SBGridProperties.oneclickedit 		= true;
										SBGridProperties.explorerbar 		= 'move';
										
										SBGridProperties.columns = [
											{caption: ['년도','2019년'],	    	width:'7%',		ref: 'month',	type : 'output',   	   style: 'text-align:center;'},
											{caption: ['지역정보','인천'],			width:'9%',		ref: 'inchon',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김해'],			width:'9%',		ref: 'kimhae', 	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김포'],			width:'9%',		ref: 'jeju',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','부산'],			width:'9%',		ref: 'busan',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['통계정보','소득비'],		width:'12%',	ref :'income',  type : 'combo',			style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
											{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} },
											{caption: ['통계정보','시책발표'],		width:'5%',		ref :'chk',  	type : 'checkbox',		style: 'text-align:center;' ,	typeinfo : {checkedvalue : 'Y'} },
											{caption: ['통계정보','전환시점'],		width:'5%',		ref :'rao',  	type : 'radio',			style: 'text-align:center;' },
											{caption: ['통계정보','통계발표일'],	width:'14%',	ref :'stDate',  type : 'inputdate',		style: 'text-align:center;' ,	typeinfo : {locale : 'ko', dateformat : 'yymmdd'}},
											{caption: ['통계정보','비고'],			width:'9%',		ref :'etc',  	type : 'textarea',		style: 'text-align:center;'}			
										];
										datagrid = _SBGrid.create(SBGridProperties);
										datagrid.bind("valuechanged","chartDataChange");
									};
		
		
									function chartDataChange(){
										scatterPlotChart.data({json:grid_data}).render();
									};

									var combinationChart;
									var datagrid;
		
									function fnCombinationChart(){
										combinationChart = sb.chart.render("#combinationChartWrap", {
											data : {
												types:{"inchon":"bar", "kimhae":"bar", "kimpo":"bar", "jeju":"spline", "busan":"spline"},
												json: grid_data,
												keys: {
													x: "month",
													value: ["inchon","kimhae","kimpo","jeju","busan"]
												},
												legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"}
											},
											legend: {
												padding: 20
											},
											title : {
												text: "2019년 지역별 자산 대 부채액(단위: 천)",
												position: "top-center",
												padding: {
													top: 0, right: 0, bottom: 10, left: 0
												}
											},
											axis: {
												x : {
													type: "category"
												}
											},
											grid: {
												x : { show:false},
												y : { show:false}
											},
											tooltip: {
												format: {
													value: function(value, ratio, id, index) {
														return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
													}
												}
											},
											global: {
												color : {
													pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
												},
												animation: {
													show: true,                             
													type: "rise",                          
													types: {data1: "rise", data2: "fill"}, 
													delay: 800,                             
													ease: "linear"                     
												}
											}
										}).render();		
									};		
							
		
									$(document).ready(function(){
										createElements();
										fnCombinationChart();
									});
		
		
									function createElements() {
										var SBGridProperties = {};	
										SBGridProperties.parentid 			= 'sbGridArea';
										SBGridProperties.id 				= 'datagrid';
										SBGridProperties.jsonref 			= 'grid_data';
										SBGridProperties.backcoloralternate = '#FAFAFA';
										SBGridProperties.rowheight			= '30';
										SBGridProperties.fixedrowheight 	= '38';
										SBGridProperties.extendlastcol		= 'scroll';
										SBGridProperties.oneclickedit 		= true;
										SBGridProperties.explorerbar 		= 'move';
										
										SBGridProperties.columns = [
											{caption: ['년도','2019년'],	    	width:'7%',		ref: 'month',	type : 'output',   	   style: 'text-align:center;'},
											{caption: ['지역정보','인천'],			width:'9%',		ref: 'inchon',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김해'],			width:'9%',		ref: 'kimhae', 	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김포'],			width:'9%',		ref: 'jeju',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','부산'],			width:'9%',		ref: 'busan',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['통계정보','소득비'],		width:'12%',	ref :'income',  type : 'combo',			style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
											{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} },
											{caption: ['통계정보','시책발표'],		width:'5%',		ref :'chk',  	type : 'checkbox',		style: 'text-align:center;' ,	typeinfo : {checkedvalue : 'Y'} },
											{caption: ['통계정보','전환시점'],		width:'5%',		ref :'rao',  	type : 'radio',			style: 'text-align:center;' },
											{caption: ['통계정보','통계발표일'],	width:'14%',	ref :'stDate',  type : 'inputdate',		style: 'text-align:center;' ,	typeinfo : {locale : 'ko', dateformat : 'yymmdd'}},
											{caption: ['통계정보','비고'],			width:'9%',		ref :'etc',  	type : 'textarea',		style: 'text-align:center;'}			
										];
										datagrid = _SBGrid.create(SBGridProperties);
										datagrid.bind("valuechanged","chartDataChange");
									};
		
		
									function chartDataChange(){
										combinationChart.data({json:grid_data}).render();
									};

									var stepChart;
									var datagrid;
		
									function fnStepChart(){
										stepChart = sb.chart.render("#stepChartWrap", {
											data : {
												type:"step",
												json: grid_data,
												keys: {
													x: "month",
													value: ["inchon","kimhae","kimpo","jeju","busan"]
												},
												legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"},
											},
											legend: {
												show: true,
												position: "inset",
												inset: {
													anchor:"top-right",
													x: 0,
													y: -20
												},
												padding: 20
											},
											title : {
												text: "2019년 지역별 자산 대 부채액(단위: 천)",
												position: "top-center",
												padding: {
													top: 0, right: 0, bottom: 10, left: 0
												}
											},
											axis: {
												x : {
													type: "category"
												}
											},
											grid: {
												x : { show:false},
												y : { show:false}
											},
											tooltip: {
												format: {
													value: function(value, ratio, id, index) {
														return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
													}
												}
											},
											global: {
												color : {
													pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
												},
												animation: {
													show: true,                             // animation 효과 사용여부 (boolean)
													type: "rise",                           // 적용할 animation type (string)
													delay: 800,                             // animation 효과가 완료되기까지의 시간(number, 밀리초단위)
													ease: "linear"                       // animation 가속도 효과
												}
											}
										}).render();		
									};
							
		
									$(document).ready(function(){
										createElements();
										fnStepChart();
									});
		
		
									function createElements() {
										var SBGridProperties = {};	
										SBGridProperties.parentid 			= 'sbGridArea';
										SBGridProperties.id 				= 'datagrid';
										SBGridProperties.jsonref 			= 'grid_data';
										SBGridProperties.backcoloralternate = '#FAFAFA';
										SBGridProperties.rowheight			= '30';
										SBGridProperties.fixedrowheight 	= '38';
										SBGridProperties.extendlastcol		= 'scroll';
										SBGridProperties.oneclickedit 		= true;
										SBGridProperties.explorerbar 		= 'move';
										
										SBGridProperties.columns = [
											{caption: ['년도','2019년'],	    	width:'7%',		ref: 'month',	type : 'output',   	   style: 'text-align:center;'},
											{caption: ['지역정보','인천'],			width:'9%',		ref: 'inchon',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김해'],			width:'9%',		ref: 'kimhae', 	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김포'],			width:'9%',		ref: 'jeju',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','부산'],			width:'9%',		ref: 'busan',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['통계정보','소득비'],		width:'12%',	ref :'income',  type : 'combo',			style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
											{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} },
											{caption: ['통계정보','시책발표'],		width:'5%',		ref :'chk',  	type : 'checkbox',		style: 'text-align:center;' ,	typeinfo : {checkedvalue : 'Y'} },
											{caption: ['통계정보','전환시점'],		width:'5%',		ref :'rao',  	type : 'radio',			style: 'text-align:center;' },
											{caption: ['통계정보','통계발표일'],	width:'14%',	ref :'stDate',  type : 'inputdate',		style: 'text-align:center;' ,	typeinfo : {locale : 'ko', dateformat : 'yymmdd'}},
											{caption: ['통계정보','비고'],			width:'9%',		ref :'etc',  	type : 'textarea',		style: 'text-align:center;'}			
										];
										datagrid = _SBGrid.create(SBGridProperties);
										datagrid.bind("valuechanged","chartDataChange");
									};
		
		
									function chartDataChange(){
										stepChart.data({json:grid_data}).render();
									};

									var radarChart;
									var datagrid;
		
									function fnRadarChart(){
										radarChart = sb.chart.render("#radarChartWrap", {
											data : {
												type:"radar",
												json: grid_data,
												keys: {
													x: "month",
													value: ["inchon","kimhae","kimpo","jeju","busan"]
												},
												legends: {"inchon":"인천","kimhae":"김해","kimpo":"김포","jeju":"제주","busan":"부산"}
											},
											legend: {
												padding: 20
											},
											title : {
												text: "2019년 지역별 자산 대 부채율(단위: %)",
												position: "top-center",
												padding: {
													top: 0, right: 0, bottom: 10, left: 0
												}
											},
											extend: {
												donut: {
													padding: 3
												}
											},
											global: {
												color : {
													pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
												},
												animation: {
													show: true,                             // animation 효과 사용여부 (boolean)
													type: "circle",                           // 적용할 animation type (string)
													delay: 800,                             // animation 효과가 완료되기까지의 시간(number, 밀리초단위)
													ease: "linear"                       // animation 가속도 효과
												}
											}	
										}).render();		
									};	
							
		
									$(document).ready(function(){
										createElements();
										fnRadarChart();
									});
		
		
									function createElements() {
										var SBGridProperties = {};	
										SBGridProperties.parentid 			= 'sbGridArea';
										SBGridProperties.id 				= 'datagrid';
										SBGridProperties.jsonref 			= 'grid_data';
										SBGridProperties.backcoloralternate = '#FAFAFA';
										SBGridProperties.rowheight			= '30';
										SBGridProperties.fixedrowheight 	= '38';
										SBGridProperties.extendlastcol		= 'scroll';
										SBGridProperties.oneclickedit 		= true;
										SBGridProperties.explorerbar 		= 'move';
										
										SBGridProperties.columns = [
											{caption: ['년도','2019년'],	    	width:'7%',		ref: 'month',	type : 'output',   	   style: 'text-align:center;'},
											{caption: ['지역정보','인천'],			width:'9%',		ref: 'inchon',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김해'],			width:'9%',		ref: 'kimhae', 	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','김포'],			width:'9%',		ref: 'jeju',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['지역정보','부산'],			width:'9%',		ref: 'busan',	type : 'input',			style: 'text-align:center;' , "format" : "#,###" },
											{caption: ['통계정보','소득비'],		width:'12%',	ref :'income',  type : 'combo',			style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
											{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'chComboData', label:'name', value:'code' , itemcount : 4} },
											{caption: ['통계정보','시책발표'],		width:'5%',		ref :'chk',  	type : 'checkbox',		style: 'text-align:center;' ,	typeinfo : {checkedvalue : 'Y'} },
											{caption: ['통계정보','전환시점'],		width:'5%',		ref :'rao',  	type : 'radio',			style: 'text-align:center;' },
											{caption: ['통계정보','통계발표일'],	width:'14%',	ref :'stDate',  type : 'inputdate',		style: 'text-align:center;' ,	typeinfo : {locale : 'ko', dateformat : 'yymmdd'}},
											{caption: ['통계정보','비고'],			width:'9%',		ref :'etc',  	type : 'textarea',		style: 'text-align:center;'}			
										];
										datagrid = _SBGrid.create(SBGridProperties);
										datagrid.bind("valuechanged","chartDataChange");
									};
		
		
									function chartDataChange(){
										radarChart.data({json:grid_data}).render();
									};