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(); };