맨위로가기

SBGRID

전체메뉴보기

Samples

선형 차트

SBGrid와 선형 SBChart를 연동합니다.

원형 및 기타 차트 막대형 차트

차트종류

mergecells

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

예시

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

								var lineChart;
								var datagrid;
						
						
								function lineChart(){
									lineChart = sb.chart.render("#lineChartWrap", {
										data : {
											type:"line",
											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, ",");
												}
											}
										}
									});	
									lineChart.global({
										color : {
											pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
										}
									}).render();		
								};
						
						
								$(document).ready(function(){
									createElements();
									lineChart();
								});
						
						
								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:'comboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
										{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'comboData', 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(){
									lineChart.data({json:grid_data}).render();
								};

								var splineChart;
								var datagrid;
						
						
								function fnSplineChart() {
									splineChart = sb.chart.render("#splineChartWrap", {
										data : {
											type:"spline",
											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, ",");
												}
											}
										}
									});	
									splineChart.global({
										color : {
											pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
										}
									}).render();						
								};
						
						
								$(document).ready(function(){
									createElements();
									fnSplineChart();
								});
						
						
								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:'comboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
										{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'comboData', 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(){
									splineChart.data({json:grid_data}).render();
								};

								var areaChart;
								var datagrid;
						
						
								function fnAreaChart(){
									areaChart = sb.chart.render("#areaChartWrap", {
										data : {
											type:"area",
											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, ",");
												}
											}
										}
									});	
									areaChart.global({
										color : {
											pattern: ["#5071B8","#49C6B8","#F1983E","#F16448","#A266AC"]
										}
									}).render();		
								};
						
						
								$(document).ready(function(){
									createElements();
									fnAreaChart();
								});
						
						
								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:'comboData', label:'name', value:'code' , itemcount : 4, 'displayui':true} },
										{caption: ['통계정보','지출비'],		width:'12%',	ref :'outcome', type : 'inputcombo',	style: 'text-align:center;' ,	typeinfo : {ref:'comboData', 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(){
									areaChart.data({json:grid_data}).render();
								};