본문바로가기

Thirdparty

Chart

Basic

amCharts

Chart는 amCharts사의 Javascript Charts v3 상용 제품을 OEM 라이선스로 제공합니다.
JavaScript/HTML5 기반으로 다양한 차트(column, bar, line, area, step line, step without risers, smoothed line, candlestick and ohlc graphs), pie/donut, radar/polar, y/scatter/bubble, Funnel/Pyramid charts and Angular Gauges)를 제공합니다.

Column With Rotated Series

Stacked Bar Chart

Stacked Bar Chart

3D Donut Chart

Angular Gauge

디렉토리 구조

amcharts 라이브러리 전체 구성은 아래와 같습니다.

  • 라이브러리 내 amCharts 폴더 위치
AlopexUI_3rdParty_library
	┣━ javascript_chart
	|   ┗━ amcharts (folder)
	┗━ javascript_stockchart
			┗━ amcharts (folder)
  • amCharts 폴더 구조
amcharts (folder)
	┣━ amcharts.js
	┣━ funnel.js
	┣━ gantt.js
	┣━ gauge.js
	┣━ pie.js
	┣━ radar.js
	┣━ serial.js
	┣━ xy.js
	┣━ images (folder)
	┣━ lang (folder)
	┣━ patterns (folder)
	┣━ plugins (folder)
	┗━ themes (folder)

적용

amcharts 라이브러리 적용 방법입니다.
아래와 같이 필수/선택적으로 적용하도록 합니다.

serial 차트 구현 시

<script src="{path}/amcharts/amcharts.js"></script> <!-- 공통 (필수) -->
<script src="{path}/amcharts/serial.js"></script> <!-- serial 차트 (선택) -->
<script src="{path}/amcharts/themes/light.js"></script> <!-- 테마 (선택) -->

pie 차트 구현 시

<script src="{path}/amcharts/amcharts.js"></script> <!-- 공통 (필수) -->
<script src="{path}/amcharts/pie.js"></script> <!-- pie 차트 (선택) -->
<script src="{path}/amcharts/themes/light.js"></script> <!-- 테마 (선택) -->

gauge 차트 구현 시

<script src="{path}/amcharts/amcharts.js"></script> <!-- 공통 (필수) -->
<script src="{path}/amcharts/gauge.js"></script> <!-- gauge 차트 (선택) -->
<script src="{path}/amcharts/themes/light.js"></script> <!-- 테마 (선택) -->

다른 여러 가지 차트에 대한 필수/선택적 적용 방법은 amCharts Demo 화면을 통해 확인하신 후,
구현하고자 하는 차트에 필요한 라이브러리만 적용할 수 있도록 해야 합니다.

사용방법 및 API
  • AmCharts.makeChart() API 를 통해 차트를 생성 합니다.
  • AmCharts.makeChart() API 첫 번째 인자는 차트를 생성하고자하는 DIV 엘리먼트의 ID(string type) 입니다. 이러한 DIV를 container라 부릅니다.
  • AmCharts.makeChart() API 두 번째 인자는 차트 설정(object type)입니다. 설정은 크게 아래와 같이 구분할 수 있겠습니다.
  • 아래의 serial 차트 샘플 코드를 통해 차트 설정 부분을 확인하시기 바랍니다.

    • 전체 차트 설정 부분 - "type": "serial", "marginRight": 70, ...
    • 차트 data 부분 - "dataProvider": [ ... ]
    • 그래프 설정 부분 - "graphs": [ ... ]
    • axis(축) 설정 부분 : "categoryField": "country", "categoryAxis": { ... }
// serial 차트 샘플 코드
var chart = AmCharts.makeChart("chartdiv", {
	"type": "serial",
	"theme": "light",
	"marginRight": 70,
	"dataProvider": [{
		"country": "USA",
		"visits": 3025,
		"color": "#FF0F00"
	}, {
		"country": "China",
		"visits": 1882,
		"color": "#FF6600"
	}, {
		"country": "Japan",
		"visits": 1809,
		"color": "#FF9E01"
	}, {
		"country": "Germany",
		"visits": 1322,
		"color": "#FCD202"
	}, {
		"country": "UK",
		"visits": 1122,
		"color": "#F8FF01"
	}, {
		"country": "France",
		"visits": 1114,
		"color": "#B0DE09"
	}, {
		"country": "India",
		"visits": 984,
		"color": "#04D215"
	}, {
		"country": "Spain",
		"visits": 711,
		"color": "#0D8ECF"
	}, {
		"country": "Netherlands",
		"visits": 665,
		"color": "#0D52D1"
	}, {
		"country": "Russia",
		"visits": 580,
		"color": "#2A0CD0"
	}, {
		"country": "South Korea",
		"visits": 443,
		"color": "#8A0CCF"
	}, {
		"country": "Canada",
		"visits": 441,
		"color": "#CD0D74"
	}],
	"valueAxes": [{
		"axisAlpha": 0,
		"position": "left",
		"title": "Visitors from country"
	}],
	"startDuration": 0,
	"graphs": [{
		"balloonText": "<b>[[category]]: [[value]]</b>",
		"fillColorsField": "color",
		"fillAlphas": 0.9,
		"lineAlpha": 0.2,
		"type": "column",
		"valueField": "visits"
	}],
	"chartCursor": {
		"categoryBalloonEnabled": false,
		"cursorAlpha": 0,
		"zoomable": false
	},
	"categoryField": "country",
	"categoryAxis": {
		"gridPosition": "start",
		"labelRotation": 45
	},
	"export": {
		"enabled": true
	}

});

type {string}

  • 해당 차트 종류를 설정합니다. serial, pie, gauge, ...

theme {string}

  • 해당 차트의 테마를 설정합니다. light, dark, chalk, patterns

dataProvider {array}

  • 해당 차트의 데이터를 set 합니다. 특정 데이터의 key가 차트의 categoryField 및 valueField 가 될 수 있습니다.

startDuration {number}

  • 해당 차트를 그릴 때 애니메이션 효과의 시간을 설정합니다.
  • startDuration: 0.5 (0.5초) / startDuration: 1 (1초)

chartCursor {object}

  • 해당 차트 상의 마우스 움직임에 대한 커서 형태를 설정합니다. chartCursor 상세 참고.
var chart = AmCharts.makeChart("chartdiv",{
	...
	"chartCursor": {
		"oneBalloonOnly": true
	}
});

graphs {object}

  • 해당 차트의 데이터 시각화(line, column, step line, smoothed line, olhc and candlestick) 설정입니다. graphs 상세 참고.
var chart = AmCharts.makeChart("chartdiv",{
	...
	"graphs": [
		{
			"id"      : "AmGraph-1",
			"title"   : "Column graph",
			"type"    : "column",
			"valueField"  : "column-1",
			"fillAlphas"  : 1
		}
	]
});

valueAxes {object}

  • 해당 차트의 x,y 축 중 value 축 관련 설정입니다. valueAxes 상세 참고.
var chart = AmCharts.makeChart("chartdiv",{
	...
	"valueAxes": [
		{
			"title": "Axis title"
		}
	]
});

categoryField {string}

  • 해당 차트의 x,y 축 중 category 축을 설정합니다. dataProvider 상의 특정 key 값을 지정할 수 있습니다.
  • country 를 category 로 지정한 예시 입니다.
var chart = AmCharts.makeChart("chartdiv",{
	...
		"dataProvider": [{
		"country": "USA",
		"visits": 3025,
		"color": "#FF0F00"
		}],
		"categoryField" : "country"
});

categoryAxis {string}

  • 해당 차트의 x,y 축 중 category 축 관련 설정입니다. categoryAxis 상세 참고.
var chart = AmCharts.makeChart("chartdiv",{
	...
	"categoryAxis": {
		"gridPosition": "start"
	}
});

export {string}

  • image/data 등을 추출 및 annotation/print 기능 추가를 위한 설정입니다.
var chart_export = AmCharts.makeChart("chartdiv_export",{
	...
	"export": {
		"enabled": true
	}
});


  • export 라이브러리가 필요합니다.
<link rel="stylesheet" href="{path}/script/src/amcharts/plugins/export/export.css" />
<script src="{path}/script/src/amcharts/plugins/export/export.js"></script>


  • export 코드 샘플의 우측 다운로드 버튼을 확인해 보시기 바랍니다.
<div id="chartdiv_export" style="height:300px;"></div>
var chart_export = AmCharts.makeChart( "chartdiv_export", {
	"type": "serial",
	"theme": "light",
	"dataProvider": [ {
		"country": "USA",
		"visits": 2025
	}, {
		"country": "China",
		"visits": 1882
	}, {
		"country": "Japan",
		"visits": 1809
	}, {
		"country": "Germany",
		"visits": 1322
	}, {
		"country": "UK",
		"visits": 1122
	}, {
		"country": "France",
		"visits": 1114
	}, {
		"country": "India",
		"visits": 984
	}, {
		"country": "Spain",
		"visits": 711
	}, {
		"country": "Netherlands",
		"visits": 665
	}, {
		"country": "Russia",
		"visits": 580
	}, {
		"country": "South Korea",
		"visits": 443
	}, {
		"country": "Canada",
		"visits": 441
	}, {
		"country": "Brazil",
		"visits": 395
	} ],
	"valueAxes": [ {
		"gridColor": "#FFFFFF",
		"gridAlpha": 0.2,
		"dashLength": 0
	} ],
	"gridAboveGraphs": true,
	"startDuration": 0,
	"graphs": [ {
		"balloonText": "[[category]]: <b>[[value]]</b>",
		"fillAlphas": 0.8,
		"lineAlpha": 0.2,
		"type": "column",
		"valueField": "visits"
	} ],
	"chartCursor": {
		"categoryBalloonEnabled": false,
		"cursorAlpha": 0,
		"zoomable": false
	},
	"categoryField": "country",
	"categoryAxis": {
		"gridPosition": "start",
		"gridAlpha": 0,
		"tickPosition": "start",
		"tickLength": 20
	},
	"export": {
		"enabled": true
	}

} );

Etc.

Alopex UI FWK - amCharts 연동

Request/Response & Chart

form 데이터, chart 데이터를 각각 get 하고, $a.request() API 의 통신 파라미터로 전송하는 예제 입니다.
response로 받은 데이터를 이용하여 Chart를 갱신 합니다.


    <input id="textId" class="Textinput" value="expenses">
	<button class="Button" id="btn_request">Request</button>
	<div id="chartdiv_request"></div>
chart_request = AmCharts.makeChart("chartdiv_request", {
	"type": "serial",
		 "theme": "light",
	"categoryField": "year",
	"rotate": true,
	"startDuration": 0,
	"categoryAxis": {
		"gridPosition": "start",
		"position": "left"
	},
	"trendLines": [],
	"graphs": [
		{
			"balloonText": "Income:[[value]]",
			"fillAlphas": 0.8,
			"id": "AmGraph-1",
			"lineAlpha": 0.2,
			"title": "Income",
			"type": "column",
			"valueField": "income"
		}, {
			"balloonText": "Expenses:[[value]]",
			"fillAlphas": 0.8,
			"id": "AmGraph-2",
			"lineAlpha": 0.2,
			"title": "Expenses",
			"type": "column",
			"valueField": "expenses"
		}
	],
	"guides": [],
	"valueAxes": [{
		"id": "ValueAxis-1",
		"position": "top",
		"axisAlpha": 0
	}],
	"allLabels": [],
	"balloon": {},
	"titles": [],
	"dataProvider": [
		{
			"year": 2005,
			"income": 23.5,
			"expenses": 18.1
		}, {
			"year": 2006,
			"income": 26.2,
			"expenses": 22.8
		}, {
			"year": 2007,
			"income": 30.1,
			"expenses": 23.9
		}, {
			"year": 2008,
			"income": 29.5,
			"expenses": 25.1
		}, {
			"year": 2009,
			"income": 24.6,
			"expenses": 25
		}
	],
	"export": {
		"enabled": true
	}
});

$("#btn_request").click(function(){

	$a.request.setup({
		url : function(id, param) {
			return '//' + location.host + '/development/thirdparty/chart/' + id; // $a.request 서비스 ID가 적용될 것이다
		},
		method: 'get',
		timeout: 30000,
		before: function(id, option) {
			$("#textarea_request").val("request data :\n\n" + JSON.stringify(this.data));
		}
	});

	$a.request('chartData01.json', { // 서비스 ID

		data : {textData : $("#textId").val(), chartData : chart_request.dataProvider},
		success : function(res) {
			// 통신이 성공적으로 이루어 진 경우 호출되는 콜백함수
			$("#textarea_response").val("success response data :: \n\n" + JSON.stringify(res));

			$("#textId").val(res.textData);

			chart_request = AmCharts.makeChart("chartdiv_request", {
				"type": "serial",
					 "theme": "light",
				"categoryField": "year",
				"rotate": true,
				"startDuration": 0,
				"categoryAxis": {
					"gridPosition": "start",
					"position": "left"
				},
				"trendLines": [],
				"graphs": [
					{
						"balloonText": "Income:[[value]]",
						"fillAlphas": 0.8,
						"id": "AmGraph-1",
						"lineAlpha": 0.2,
						"title": "Income",
						"type": "column",
						"valueField": "income"
					}, {
						"balloonText": "Expenses:[[value]]",
						"fillAlphas": 0.8,
						"id": "AmGraph-2",
						"lineAlpha": 0.2,
						"title": "Expenses",
						"type": "column",
						"valueField": "expenses"
					}
				],
				"guides": [],
				"valueAxes": [{
					"id": "ValueAxis-1",
					"position": "top",
					"axisAlpha": 0
				}],
				"allLabels": [],
				"balloon": {},
				"titles": [],
				"dataProvider": res.chartData,
				"export": {
					"enabled": true
				}
			});
		},
		fail : function(res) {
			// 통신은 성공적으로 이루어 졌으나, 서버오류가 발생한 경우 호출되는 콜백함수
			$("#textarea_response").val("fail!! :: \n\n" + JSON.stringify(errObject));
			$("#textarea_chart").val("get chart data :: \n\n" + JSON.stringify(chart_request.dataProvider));
		},
		error : function(errObject) {
			// 통신이 실패한 경우 호출되는 콜백함수
			$("#textarea_response").val("error!! :: \n\n" + JSON.stringify(errObject));
			$("#textarea_chart").val("get chart data :: \n\n" + JSON.stringify(chart_request.dataProvider));
		}
	});
});

Popup & Chart

통신 response의 success callback에서 받은 parameter를 이용하여 chart를 생성 합니다.

    <button class="Button" id="btn_popup">Popup</button>
$("#btn_popup").click(function(){
	$a.popup({
		title: "Chart in Popup",
		url: "/development/thirdparty/chart/chart_popup.html",
		width: 600,
		height: 600,
		iframe: false,
		data : {
			chartData : [{
				"name": "John",
				"startTime": 8,
				"endTime": 11,
				"color": "#FF0F00"
			}, {
				"name": "Joe",
				"startTime": 10,
				"endTime": 13,
				"color": "#FF9E01"
			}, {
				"name": "Susan",
				"startTime": 11,
				"endTime": 18,
				"color": "#F8FF01"
			}, {
				"name": "Eaton",
				"startTime": 15,
				"endTime": 19,
				"color": "#04D215"
			}]
		}
	});
});