SBGRID

전체메뉴보기

적용예시

막대형 차트

SBGrid와 막대형 SBChart를 연동합니다.

원형 및 기타 차트 선형 차트

차트종류

mergecells

버튼을 클릭하여 그리드와 연동된 막대 차트를 확인해 보세요.

예시

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

							var barChart;
							var datagrid;

							function fnBarChart() {
								barChart = sb.chart.render("#barChartWrap", {
									data : {
										type:"bar",
										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
										}
									},
									extend: {
										bar: {
											width : {
												ratio: 1
											}
										}
									},
									axis: {
										x : {
											type: "category",
											categories: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"]
										}
									},
									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",                          
											delay: 800,                            
											ease: "linear"                      
										},
									}
								}).render();		
							};


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


							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(){
								barChart.data({json:grid_data}).render();
							};

								var barRotatedChart
								var datagrid;
	
								function fnBarRotatedChart() {
									barRotatedChart = sb.chart.render("#barRotatedChartWrap", {
										data : {
											type:"bar",
											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
											}
										},
										extend: {
											bar: {
												width : {
													ratio: 1
												}
											}
										},
										axis: {
											rotated:true,
											x : {
												type: "category",
												categories: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"]
											}
										},
										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",                          
												delay: 800,                             
												ease: "linear"                     
											}
										}
									}).render();			
								};
	
	
								$(document).ready(function(){
									createElements();
									fnBarRotatedChart();
								});
	
	
								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(){
									barRotatedChart.data({json:grid_data}).render();
								};

							var stackbarChart;
							var datagrid;

							function fnStackbarChart() {
								stackbarChart = sb.chart.render("#stackbarChartWrap", {
									data : {
										type:"stackbar",
										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",
											categories: ["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"]
										}
									},
									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",                          
											delay: 800,                           
											ease: "linear"                 
										}
									}
								}).render();		
							};


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


							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(){
								stackbarChart.data({json:grid_data}).render();
							};

							var stackbar100Chart;
							var datagrid;

							function fnStackbar100Chart() {
								stackbar100Chart = sb.chart.render("#stackbar100ChartWrap", {
									data : {
										type:"stackbar.100",
										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: {
										rotated:true,
										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",                          
											delay: 800,                           
											ease: "linear"                       
										}
									}
								}).render();			
							};


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


							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(){
								stackbar100Chart.data({json:grid_data}).render();
							};

							var stackbarRotatedChart;
							var datagrid;

							function fnStackbarRotatedChart() {
								stackbarRotatedChart = sb.chart.render("#stackbarRotatedChartWrap", {
									data : {
										type:"stackbar",
										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: 0
										},
										padding: 20
									},
									title : {
										text: "2019년 지역별 자산 대 부채액(단위: 천)",
										position: "top-center",
										padding: {
											top: 0, right: 0, bottom: 10, left: 0
										}
									},
									axis: {
										rotated:true,
										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",                        
											delay: 800,                         
											ease: "linear"                      
										}
									}
								}).render();			
							};


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


							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(){
								stackbarRotatedChart.data({json:grid_data}).render();
							};