Chart-EX

배포 버전 안내

Release No : 7.0.400.20230502

1. Chart- EX 소개

사용자 정의에 따라 다양한 형태의 Chart 컨트롤을 추가할 수 있습니다.

차트의 종류

Bar-Chart
Pie-Chart
ScatterChart
PolygonChart
Chart-EX
Slider

5.1. Chart-EX 상세설명

기본 설명
1. AUD 기본 차트(Chart, Pie, Scatter,Polygon)의 경우, 상용 라이브러리 차트 HighCharts 를 사용하고 있습니다.
  기본 차트의 경우 속성 설정을 디자인 속성 창을 팝업으로 제공하여 설정된 정보를 HighCharts 의 규약에 맞게 전달하여 차트를 출력하고 있습니다.
  
  * HighCharts 의 개발자 라이센스를 별도로 구매하여야 합니다.
  제품에 기본적으로 제공되는 차트(Chart, Pie, Polygon, Scatter) 가 아닙니다.
2. Chart-EX 컨트롤의 경우 기본 차트와 다르게 HighCharts 양식을 바로 사용하는 컨트롤로써 HighCharts 공식 사이트에서 사용하고자 하는 차트의 양식을 복사하여
  Chart-EX 컨트롤의 Script API 로 연결하여 사용 하시면 됩니다.

차트 설정

DataSource 를 연결해서 사용하는 경우
1. Chart-EX 컨트롤에 DataSource 를 연결하는 경우, 해당 차트 컨트롤이 조회되면 OnCustomHighChartBeforeBind 이벤트가 발생합니다.
  ( OnCustomHighChartBeforeBind 이벤트를 통한 작업을 권장합니다. )
  
  ※ 샘플 보고서 : https://rnd.bimatrix.co.kr/aud7/extention/portal/SimpleSSO_Con.jsp?reportCode=REP25C6863E34A740399CF83A37CE9E16E0
  (위 URL 를 통해 샘플 보고서 오픈 후 다른 이름 저장을 통해 보고서 저장 후, 해당 보고서 편집하여 Script Editor 를 통해 확인 바랍니다.)
2. 해당 이벤트에서 arguments 에 DataSet 이 연결된 DataSource 에 대한 조회 결과이고, 이를 통해 구현하고자 하는 차트 유형에 따른 Data 를 구성하시면 됩니다.
3. 아래와 같이 구현하고자 하는 Chart 의 JSON 구조를 설정합니다.
  해당 부분은 HighCharts 의 사이트를 참고해서 동일하게 구현하시면 됩니다.
  다만, JSON 의 chart 부분에서 width, height, renderTo 속성이 있는 경우는 해당 속성을 제거해주서야 합니다.
  (해당 속성은 Chart-EX 컨트롤 크기에 맞게 AUD 내부에서 처리하고 있습니다.)
  
  단, 위에서 구성한 데이터 구조를 각 차트 샘플 예시에서 데이터를 구성하는 부분에 해당 변수로 수정해주셔야 합니다.
  Highcharts 사이트의 샘플에서 아래와 같이 코드 부부분의 Highcharts.chart 함수 안에 구성되는 JSON 객체 부분 복사 & 붙여넣기 후 참고하시면 됩니다.
4. Chart-EX 컨트롤의 SetHighChartScript Script API 를 통해 차트를 그립니다.
  앞서 구성한 Chart 속성을 담은 JSON 객체를 인자로 전달하면, 해당 JSON 구조에 따라 차트를 그리게 됩니다.
```
var ChartEx = Matrix.getObject('ChartEx');		// Chart-EX 컨트롤
var CHART_SCRIPT = {...};						// Chart 를 그리기 위한 속성 JSON 객체
ChartEx.SetHighChartScript(CHART_SCRIPT);		// Chart 를 그리는 함수 호출
```
  최종 구성된 스크립트 구조입니다.
```
/**************************************
 * Chart-EX의 데이터가 바인딩 되는 시점해 발생합니다.
 * * arguments :  
 *       string Id (Readonly:False) : 컨트롤 이름 
 *       istudio.data.DataSet   DataSet (Readonly:False) : 데이터셋 객체 
**************************************/
 var OnCustomHighChartBeforeBind  = function(sender, args){
    data = [];
    
    // Data 기본 구조 설정
    var ds = args.DataSet;
    var dt = ds.GetTable(0);        
    
    for(var i=0; i<dt.GetRowCount(); ++i) {
        var row = dt.GetRow(i);
        var item = [
            row.GetValue('FROM'),
            row.GetValue('TO'),
            row.GetValue('WEIGHT')
        ]
        
        data.push(item);
    }
    
    // WHEEL Chart 옵션 설정 및 Draw
    SetChartScript();                               // Chart JSON 구조 설정 함수(사용자 정의한 부분)
    WHEEL.SetHighChartScript(CHART_SCRIPT);			// WHEEL(Chart-EX 컨트롤)
 };
```

DataSource 를 연결해서 사용하지 않는 경우

이런 경우, OnDocumentLoadComplete 와 같은 다른 이벤트에서 차트 유형에 맞는 데이터를 설정한 후, 동일한 방식으로 JSON 을 구성 및 SetHighChartScript 를 호출하는 방식을 아래 예시와 같이 사용하시면 됩니다.

/*****************************************
* 문서 로드 된 후 AutoRefresh 수행 전에 발생합니다.
* * arguments :  
*****************************************/
 var OnDocumentLoadComplete  = function(sender, args)
 {
 	WHEEL = Matrix.getObject('WHEEL');			// WHEEL 배열 객체
	
	var data = [
		['Brazil', 'Portugal', 5],
       	['Brazil', 'France', 1],
        ['Brazil', 'Spain', 1]
	]
	
	// WHEEL Chart 옵션 설정 및 Draw
	SetChartScript();
	WHEEL.SetHighChartScript(CHART_SCRIPT);
 };

특정 Highcharts 모듈을 추가 Import 해야하는 경우

일부 샘플의 경우, 특정 Highcharts 모듈을 추가로 Import 해야하는 경우가 있습니다. ( ex. Multiple KPI gauge )

아래 목록들의 경우, 이미 AUD 내부에서 포함하고 있는 상태이고 그 외의 모듈의 경우 아래 내용을 통해 신규로 Import 해주셔야 합니다.

[이미 포함되어 있는 모듈]

모듈명	파일명
heatmap	heatmap.js
treemap	treemap.js
data	data.js
accessibility	accessibility.js
wordcloud	wordcloud.js
networkgraph	networkgraph.js
funnel	funnel.js
series-label	series-label.js
sonification	sonification.js
stock	stock.js
sankey	sankey.js
dependency-wheel	dependency-wheel.js
exporting	exporting.js

Import 하려는 모듈 파일은 Highcharts 에서 다운로드 받을 수 있습니다. (단, 9.3.2 버전으로 받아주셔야 합니다.)
Chrome, Edge 브라우저 상에 'code.highcharts.com/9.3.2/modules/[다운로드하고자 하는 파일명]' 형태로 입력 후, 해당 파일을 다운로드 합니다.

(ex. code.highcharts.com/9.3.2/modules/solid-gauge.js )
다운로드한 모듈 파일은 extention / AUD / plugins / highcharts 경로 밑에 파일을 추가합니다.
(※ Import 하기 위한 Script API 함수가 해당 파일 경로 밑에 있는 파일만을 가져올 수 있습니다. )
Chart-EX 컨트롤의 ImportModule Script API 를 통해, 원하는 모듈 파일의 경로를 동적으로 Import 작업을 수행합니다.
해당 모듈이 Import 가 완료된 후, Callback 함수가 호출되는데, 해당 함수에서 차트를 위한 데이터, JSON 객체, 차트를 그리는 작업 등을 수행합니다.

다수의 모듈을 Import 하려면, 문자열 배열 구조로 인자값을 설정하면 됩니다. (ex. [solid-gauge.js, chart-test.js,])

Highcharts Demo 에서 Highcharts 내부에서 제공하는 기능을 사용하고 있는 경우
1. Highcharts Demo 소스에서 간혹 Highcharts 내에서 제공하는 기능을 사용하고 있는 경우가 있습니다.
2. 해당 기능은 Highcharts 내의 소스에서 제공하는 기능으로 그대로 복사 & 붙여넣기해서 사용하는 경우, 오류가 발생할 수 있습니다.
3. 이런 기능을 그대로 사용하고자 한다면, Chart-EX 컨트롤의 GetHighChartsModule Script API 를 통해 Highcharts 객체를 받아와서 사용해야합니다.
  해당 함수는 Highcharts 객체를 반환하고, 해당 객체를 변수에 할당해서 샘플에서 사용하는 Highcharts 부분을 아래와 같이 수정하시면 됩니다.

샘플 보고서

▶ 주의 사항
i-AUD 에서 HighCharts 는 9.3.2 버전을 사용하고 있습니다. 해당 버전까지의 HighCharts 기능 사용이 가능합니다.

페이지 트리

Chart-EX

1. Chart- EX 소개