Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 500,
		renderTo : Ext.getBody(),
		layout : 'fit',
		items : [{
			xtype : 'cartesian',
			legend : {
				docked : 'bottom'
			},
			innerPadding : 30,
			store : {
				fields : ['year','seoul','busan','gyunggi','jeju'],
				data : [{
					year : 2014,
					seoul : 10143164,
					busan : 3526648,
					gyunggi : 12245960,
					jeju : 594623
				},{
					year : 2015,
					seoul : 10104515,
					busan : 3517898,
					gyunggi : 12366711,
					jeju : 608325
				},{
					year : 2016,
					seoul : 10018537,
					busan : 3513361,
					gyunggi : 12536474,
					jeju : 625451 
				},{
					year : 2017,
					seoul : 9930478,
					busan : 3496779,
					gyunggi : 12728620,
					jeju : 642388
				}]
			},
			axes : [{
				type : 'numeric',
				position : 'left',
				minimum : 0,
				title : '지역별인구수'
			},{
				type : 'category',
				position : 'bottom'
			}],
			series : [{
				type : 'area',
				title : '경기',
				style : {
					opacity : 0.5
				},
				marker : {
					radius : 4
				},
				highlightCfg : {
					scaling : 1.5
				},
				xField : 'year',
				yField : 'gyunggi',
				tooltip : {
					trackMouse : true,
					renderer : function(tooltip,record){
						tooltip.setHtml(record.get("gyunggi")+"명");
					}
				}
			},{
				type : 'area',
				title : '서울',
				style : {
					opacity : 0.5
				},
				marker : {
					radius : 4
				},
				highlightCfg : {
					scaling : 1.5
				},
				xField : 'year',
				yField : 'seoul',
				tooltip : {
					trackMouse : true,
					renderer : function(tooltip,record){
						tooltip.setHtml(record.get("seoul")+"명");
					}
				}
			},{
				type : 'area',
				title : '부산',
				style : {
					opacity : 0.5
				},
				marker : {
					radius : 4
				},
				highlightCfg : {
					scaling : 1.5
				},
				xField : 'year',
				yField : 'busan',
				tooltip : {
					trackMouse : true,
					renderer : function(tooltip,record){
						tooltip.setHtml(record.get("busan")+"명");
					}
				}
			},{
				type : 'area',
				title : '제주',
				style : {
					opacity : 0.5
				},
				marker : {
					radius : 4
				},
				highlightCfg : {
					scaling : 1.5
				},
				xField : 'year',
				yField : 'jeju',
				tooltip : {
					trackMouse : true,
					renderer : function(tooltip,record){
						tooltip.setHtml(record.get("jeju")+"명");
					}
				}
			}]
		}]
	})
});