들어가며

이번 강좌에서는 RealPivot의 설치에 대해 배워보겠습니다.
RealPivot은 단독으로 동작하지 않고 RealGridJS가 반드시 설치되어 있어야 사용 가능 합니다.(DataProvider를 같이 사용하며 GridView에서 보여지고 있는 데이터들을 Pivot으로 표시할 수 있습니다.)

RealGridJS 설치 방법은 [A1 RealGridJS 설치하기 (v1.0.10 이상)]강좌를 참조하세요.

이론

RealPivot을 개발환경에 맞게 설치하는 방법을 알아보도록 하겠습니다. 만약, RealPivot이 없다면 라이선스를 발급 요청하는 사이트인 http://service.realgrid.com에서 평가판을 신청하면 다운로드 받을 수 있습니다. 내려받은 압축 파일에 포함된 파일중 설치에 반드시 필요한 파일은 아래 목록중 맨 밑에 위치한 두 개의 Javascript파일들과 CSS 파일 하나 입니다.

Javascript파일중 jszip.min.js파일은 엑셀파일 Export에 필요한 파일이므로 엑셀 내보내기 기능이 필요한 화면에서는 반드시 포함시켜주셔야 합니다.

그러나 위에서 언급한 것과 같이 RealPivot은 단독으로 동작하지 않으며 RealGridJS가 반드시 필요하기 때문에 실제로 필요한 파일 목록은 아래와 같습니다.

참고로 RealPivot는 JQuery와 같은 외부 라이브러리가 필요없습니다.

RealPivot 평가용/개발자용 버전 파일

<link rel="stylesheet" type="text/css" href="css/default_blue.css">

<script type="text/javascript" src="scripts/jszip.min.js"></script>
<script type="text/javascript" src="scripts/realgridjs-lic.js"></script>
<script type="text/javascript" src="scripts/realgridjs_eval.1.1.27.min.js"></script>
<script type="text/javascript" src="scripts/realgridjs-api.1.1.27.js"></script>

<script type="text/javascript" src="messages/realpivot-messages.js"></script>
<script type="text/javascript" src="scripts/realpivot_eval.0.9.0.min.js"></script>

RealPivot 운영용 버전 파일

<link rel="stylesheet" type="text/css" href="css/default_blue.css">

<script type="text/javascript" src="scripts/jszip.min.js"></script>
<script type="text/javascript" src="scripts/realgridjs-lic.js"></script>
<script type="text/javascript" src="scripts/realgridjs.1.1.27.min.js"></script>
<script type="text/javascript" src="scripts/realgridjs-api.1.1.27.js"></script>

<script type="text/javascript" src="messages/realpivot-messages.js"></script>
<script type="text/javascript" src="scripts/realpivot.0.9.0.min.js"></script>

그리고 라이선스 파일인 realgridjs-lic.js 안에는 아래와 같이 RealGridJS와 RealPivot의 라이선스 정보가 생성되어 있어야 정상 동작합니다. 물론 service.realgrid.com에서 RealPivot용으로 다운 받으셨다면 정상적으로 보이실 것입니다.

var realGridJsLic = '......라이선스정보.....';
var realPivotLic = '......라이선스정보.....';    

실습

이제 RealPivot을 웹 화면에 올려 보겠습니다.

1. CSS 및 스크립트파일 순서대로 include합니다. 반드시 아래의 순서대로 파일을 불러와야 합니다.

    <link rel="stylesheet" type="text/css" href="css/default_blue.css">
    <script type="text/javascript" src="scripts/realgridjs-lic.js"></script>
    <script type="text/javascript" src="scripts/realgridjs_eval.1.1.27.min.js"></script>
    <script type="text/javascript" src="scripts/realgridjs-api.1.1.27.js"></script>
    <script type="text/javascript" src="messages/realpivot-messages.js"></script>
    <script type="text/javascript" src="scripts/realpivot_eval.0.9.0.min.js"></script>
    <script type="text/javascript" src="scripts/jszip.min.js"></script>
   
   

2. RealPivot이 표시될 div 태그를 작성하고 크기를 지정해야 합니다. 크기가 지정되지 않으면 화면에 RealPivot이 표시되지 않습니다.

    <div id="realpivotDiv" style="width: 100%; height: 500px;"></div>

3. Pivot객체를 저장할 pivot변수를 정의 합니다.

    var pivot;

4. LocalDataProvider객체를 저장할 dataProvider변수를 정의 합니다.

    var dataProvider;

5. LocalDataProvider객체를 생성 합니다.

    dataProvider = new RealGridJS.LocalDataProvider();

6. 생성한 dataProvider에 field들을 지정 합니다.

    var fields = [{
        fieldName: "OrderID"
    }, {
        fieldName: "CustomerID"
    }, {
        fieldName: "EmployeeID"
    }, {
        fieldName: "OrderDate",
        dataType: "datetime",
        datetimeFormat: "yyyy-MM-dd a hh:mm:ss",
        amText: "오전",
        pmText: "오후"
    }, {
        fieldName: "CompanyName"
    }, {
        fieldName: "Country"
    }, {
        fieldName: "Phone"
    }, {
        fieldName: "ProductName"
    }, {
        fieldName: "QuantityPerUnit"
    }, {
        fieldName: "Quantity",
        dataType: "number"
    }, {
        fieldName: "UnitPrice",
        dataType: "number"
    }];
        
    dataProvider.setFields(fields);

7. DataProvider에 데이터들을 로드 한다.

    var datas = [{
        "OrderID":"10248",
        "CustomerID":"VINET",
        "CustomerID2":"VINAC",
        "EmployeeID":"5",
        "OrderDate":"1996-07-04 오전 12:00:00",
        "RequiredDate":"1996-08-01 오전 12:00:00",
        "ShippedDate":"1996-07-16 오전 12:00:00",
        "ShipVia":"3",
        "Freight":"32.3800",
        "ShipName":"Vins et alcools Chevalier\r\nVins et alcools Chevalier\r\nVins et alcools Chevalier",
        "ShipAddress":"59 rue de l\u0027Abbaye",
        "ShipCity":"Reims",
        "ShipRegion":null,
        "ShipPostalCode":"51100",
        "ShipCountry":"France",
        "CompanyName":"Vins et alcools Chevalier\r\n",
        "Country":"France",
        "Shipping":"True",
        "SmallFlag":"http://dev.demo.realgrid.net/img/demo/smallflag/fr.png",
        "NormalFlag":"http://dev.demo.realgrid.net/img/demo/normalflag/fr.png",
        "Phone":"26.47.15.10",
        "ProductName":"Queso Cabrales",
        "QuantityPerUnit":"1 kg pkg.",
        "Quantity":"1200",
        "UnitPrice":"14.0000"
    }, {
    ....
    }];
   
    dataProvider.fillJsonData(datas);

8. Pivot객체를 생성하고 Pivot의 DataProvider를 생성된 LocalDataProvider로 지정하는 코드를 추가 합니다.

    pivot = new RealPivot("realpivotDiv");
    pivot.setDataProvider(dataProvider);

9. DataProvider의 필드와 Pivot의 필드를 서로 맵핑하는 코드를 추가 합니다.

    pivot.setFieldMapping([{
        name: "OrderID",
        sourceField: "OrderID",
        fieldHeader: "주문ID",
        summaryFormat: "${label} 요약",
        prefix: "앞",
        suffix: "뒤",
        valueEnable: false
    }, {
        name: "CustomerID",
        sourceField: "CustomerID",
        fieldHeader: "고객사",
        summaryFormat: "${value} 요약",
        valueEnable: false
    }, {
        name: "EmployeeID",
        fieldHeader: "처리자",
        sourceField: "EmployeeID",
        valueEnable: false
    }, {
        name: "OrderYear",
        sourceField: "OrderDate",
        dateType: "year",
        fieldHeader: "영업년도",
        displayFormat: "${value}년도",
        summaryFormat: "${value}년도 요약",
        valueEnable: false
    }, {
        name: "OrderHalf",
        sourceField: "OrderDate",
        dateType: "half",
        fieldHeader: "영업반기",
        displayLabels: {
            1: "상반기",
            2: "하반기"
        },
        summaryFormat: "${label} 요약",
        valueEnable: false
    }, {
        name: "OrderQuarter",
        sourceField: "OrderDate",
        dateType: "quarter",
        fieldHeader: "영업분기",
        displayLabels: { 
            1: "일사분기",
            2: "이사분기",
            3: "삼사분기",
            4: "사사분기"
        },
        summaryFormat: "${label} 요약",
        valueEnable: false
    }, {
        name: "OrderMonth",
        sourceField: "OrderDate",
        dateType: "month",
        fieldHeader: "영업월",
        displayFormat: "${value}월",
        summaryFormat: "${label} 요약",
        valueEnable: false
    }, {
        name: "WeekDay", 
        sourceField: "OrderDate",
        dateType: "weekday",
        fieldHeader: "영업요일",
        displayLabels: {
            1: "일",
            2: "월",
            3: "화",
            4: "수",
            5: "목",
            6: "금",
            7: "토"
        },
        mustValues: [1,2,3,4,5,6,7],
        valueEnable: false
    }, {
        name: "OrderDay",
        sourceField: "OrderDate",
        dateType: "day",
        fieldHeader: "영업일자",
        displayFormat: "${value}일",
        summaryFormat: "${value}일 요약",
        valueEnable: false
    }, {
        name: "CompanyName",
        sourceField: "CompanyName",
        fieldHeader: "생산자",
        valueEnable: false
    }, {
        name: "ProductName",
        sourceField: "ProductName",
        fieldHeader: "품명 Product Name",
        summaryFormat: "${value} 요약",
        valueEnable: false
    }, {
        name: "Quantity",
        sourceField: "Quantity",
        fieldHeader: "판매량",
        numberFormat: "#,##0.000",
        labelEnable: false
    }, {
        name: "UnitPrice",
        sourceField: "UnitPrice",
        fieldHeader: "판매액",
        numberFormat: "#0.00",
        labelEnable: false
    }]);

10. Pivot 화면에 표시될 Column필드들과 Row필드, Value필드들을 지정하는 코드를 추가합니다.

    pivot.setPivotFields({
        columns: [
            {
                name: "OrderYear",
                direction: "descending"
            }, {
                name: "OrderQuarter",
                direction: "ascending"
            }
        ],
        rows: ["CustomerID", "ProductName"],
        values: [{
            name: "Quantity",
            expression: "sum"
        }, {
            name: "UnitPrice",
            expression: "sum"
        }],
    });

11. Pivot 화면을 생성하여 화면에 표시하는 코드를 추가 합니다.

    pivot.drawView();

실행화면

전체 소스코드

SCRIPT

<link rel="stylesheet" type="text/css" href="css/default_blue.css">
<script type="text/javascript" src="scripts/realgridjs-lic.js"></script>
<script type="text/javascript" src="scripts/realgridjs_eval.1.1.27.min.js"></script>
<script type="text/javascript" src="scripts/realgridjs-api.1.1.27.js"></script>
<script type="text/javascript" src="messages/realpivot-messages.js"></script>
<script type="text/javascript" src="scripts/realpivot_eval.0.9.0.min.js"></script>
<script type="text/javascript" src="scripts/jszip.min.js"></script>

<script>
var pivot;
var dataProvider;

$(document).ready( function(){
    RealGridJS.setRootContext("/scripts");
    
    dataProvider = new RealGridJS.LocalDataProvider();

    var fields = [{
            fieldName: "OrderID"
        }, {
            fieldName: "CustomerID"
        }, {
            fieldName: "EmployeeID"
        }, {
            fieldName: "OrderDate",
            dataType: "datetime",
            datetimeFormat: "yyyy-MM-dd a hh:mm:ss",
            amText: "오전",
            pmText: "오후"
        }, {
            fieldName: "CompanyName"
        }, {
            fieldName: "Country"
        }, {
            fieldName: "Phone"
        }, {
            fieldName: "ProductName"
        }, {
            fieldName: "QuantityPerUnit"
        }, {
            fieldName: "Quantity",
            dataType: "number"
        }, {
            fieldName: "UnitPrice",
            dataType: "number"
        }];     
    dataProvider.setFields(fields);

    var datas = [{
        "OrderID":"10248",
        "CustomerID":"VINET",
        "CustomerID2":"VINAC",
        "EmployeeID":"5",
        "OrderDate":"1996-07-04 오전 12:00:00",
        "RequiredDate":"1996-08-01 오전 12:00:00",
        "ShippedDate":"1996-07-16 오전 12:00:00",
        "ShipVia":"3",
        "Freight":"32.3800",
        "ShipName":"Vins et alcools Chevalier\r\nVins et alcools Chevalier\r\nVins et alcools Chevalier",
        "ShipAddress":"59 rue de l\u0027Abbaye",
        "ShipCity":"Reims",
        "ShipRegion":null,
        "ShipPostalCode":"51100",
        "ShipCountry":"France",
        "CompanyName":"Vins et alcools Chevalier\r\n",
        "Country":"France",
        "Shipping":"True",
        "SmallFlag":"http://dev.demo.realgrid.net/img/demo/smallflag/fr.png",
        "NormalFlag":"http://dev.demo.realgrid.net/img/demo/normalflag/fr.png",
        "Phone":"26.47.15.10",
        "ProductName":"Queso Cabrales",
        "QuantityPerUnit":"1 kg pkg.",
        "Quantity":"1200",
        "UnitPrice":"14.0000"
    }, {
    ....
    }];

    dataProvider.fillJsonData(datas);    

    pivot = new RealPivot("realpivotDiv");
    pivot.setDataProvider(dataProvider);

    pivot.setFieldMapping([{
        name: "OrderID",
        sourceField: "OrderID",
        fieldHeader: "주문ID",
        summaryFormat: "${label} 요약",
        prefix: "앞",
        suffix: "뒤",
        valueEnable: false
    }, {
        name: "CustomerID",
        sourceField: "CustomerID",
        fieldHeader: "고객사",
        summaryFormat: "${value} 요약",
        valueEnable: false
    }, {
        name: "EmployeeID",
        fieldHeader: "처리자",
        sourceField: "EmployeeID",
        valueEnable: false
    }, {
        name: "OrderYear",
        sourceField: "OrderDate",
        dateType: "year",
        fieldHeader: "영업년도",
        displayFormat: "${value}년도",
        summaryFormat: "${value}년도 요약",
        valueEnable: false
    }, {
        name: "OrderHalf",
        sourceField: "OrderDate",
        dateType: "half",
        fieldHeader: "영업반기",
        displayLabels: {
            1: "상반기",
            2: "하반기"
        },
        summaryFormat: "${label} 요약",
        valueEnable: false
    }, {
        name: "OrderQuarter",
        sourceField: "OrderDate",
        dateType: "quarter",
        fieldHeader: "영업분기",
        displayLabels: { 
            1: "일사분기",
            2: "이사분기",
            3: "삼사분기",
            4: "사사분기"
        },
        summaryFormat: "${label} 요약",
        valueEnable: false
    }, {
        name: "OrderMonth",
        sourceField: "OrderDate",
        dateType: "month",
        fieldHeader: "영업월",
        displayFormat: "${value}월",
        summaryFormat: "${label} 요약",
        valueEnable: false
    }, {
        name: "WeekDay", 
        sourceField: "OrderDate",
        dateType: "weekday",
        fieldHeader: "영업요일",
        displayLabels: {
            1: "일",
            2: "월",
            3: "화",
            4: "수",
            5: "목",
            6: "금",
            7: "토"
        },
        mustValues: [1,2,3,4,5,6,7],
        valueEnable: false
    }, {
        name: "OrderDay",
        sourceField: "OrderDate",
        dateType: "day",
        fieldHeader: "영업일자",
        displayFormat: "${value}일",
        summaryFormat: "${value}일 요약",
        valueEnable: false
    }, {
        name: "CompanyName",
        sourceField: "CompanyName",
        fieldHeader: "생산자",
        valueEnable: false
    }, {
        name: "ProductName",
        sourceField: "ProductName",
        fieldHeader: "품명 Product Name",
        summaryFormat: "${value} 요약",
        valueEnable: false
    }, {
        name: "Quantity",
        sourceField: "Quantity",
        fieldHeader: "판매량",
        numberFormat: "#,##0.000",
        labelEnable: false
    }, {
        name: "UnitPrice",
        sourceField: "UnitPrice",
        fieldHeader: "판매액",
        numberFormat: "#0.00",
        labelEnable: false
    }]);

    pivot.setPivotFields({
        columns: [
            {
                name: "OrderYear",
                direction: "descending"
            }, {
                name: "OrderQuarter",
                direction: "ascending"
            }
        ],
        rows: ["CustomerID", "ProductName"],
        values: [{
            name: "Quantity",
            expression: "sum"
        }, {
            name: "UnitPrice",
            expression: "sum"
        }],
    });

    pivot.drawView();

});   
</script>

HTML

<div id="realpivotDiv" style="width: 100%; height: 500px;"></div>