구글차트 연동

그리드 데이터셀 영역에 구글차트를 활용한 구글차트 연동 데모입니다.

※ 차트는 export시 출력되지 않습니다.

차트패키지 로드

구글차트 사용을 위한 "loader.js" 파일 include 및 차트패키지 로드

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function() {
    createGrid("realgrid");
});

차트 커스텀렌더러 설정

"chart" 컬럼에 커스텀렌더러 설정하기

var columns = [
  {
    name:"chart", 
    header: {
      text: "차트(구글차트)"
    }, 
    renderer: {
      type: "renderer01"
    }, 
    editable: false,
    width: 428
  }
  ...
];

gridView.registerCustomRenderer("renderer01", {
    initContent : function (parent) {
        this.chart = new google.visualization.PieChart(parent);
    },

    clearContent : function(parent) {
        this.chart.clearChart();
        this.chart = null;
    },

    // 셀이 그려질때 호출되는 method이다.
    // 동적으로 그려져야 하는 경우 이곳에서 처리한다.
    render : function(grid, model, width, height, info) {
        var data = grid.getValues(model.index.itemIndex);
        var d = [];
        d[0] = ["이름", "비율"];
        d[1] = [data.GDPName, data.GDP];
        d[2] = [data.GNIName, data.GNI];
        d[3] = [data.PGNIName, data.PGNI];
        d[4] = [data.DIncomeName, data.DIncome];
        
        // 여기서 구글 차트에 맞는 Data 형식의 기초를 작성함.
        var chartData = google.visualization.arrayToDataTable(d);

        // API : https://developers.google.com/chart/interactive/docs/gallery/piechart
        var options = {
            sliceVisibilityThreshold: .1,
            height: height,
            chartArea:{height:height-10},
            fontSize: 10,
            tooltip: {trigger:"selection"}

        };
                                                        
        this.chart.draw(chartData, options);            
    },
    // Cell을 클릭했을때 호출되는 method
    // clickData를 return하면 grid.onCellItemClicked의 인자로 전달된다.
    click : function(event) {
        var grid = this.grid.handler; // 
        var index = this.index.toProxy();  // 
        if ( event.target === this._button1 ||  event.target === this._button2 || event.target === this._href) {
            event.preventDefault();
            return {
                cellType:"data",
                target : event.target,
                index: index,
                value: this._value
            }
        }
    }
});