하이차트 연동 컬럼 선택

RealGrid와 HighCharts를 사용하여 연계한 예제입니다.
컬럼 헤더의 CheckBox를 클릭하면 발생하는 그리드의 이벤트함수 onColumnCheckedChanged를 사용하여 Highcharts의 컬럼을 숨기거나 보이도록 하였습니다.

※ 하이차트 관련 문의는 하이차트 업체에 문의를 해주시기 바랍니다.

RealGrid와 HighCharts를 연계

HighCharts는 http://www.highcharts.com/download 페이지에서 다운 받을수 있습니다.

차트 생성 함수

function setHiChart(provider) {
    var categories = provider.getFieldValues("year");
    var diVal = provider.getFieldValues("DIncome");
    $.each(diVal, function (k, v) {
        if (v == undefined)
            diVal[k] = null;
    });
 
    $('#container').highcharts({
        title: {
            text: '통계청 총생산소득',
            x: -20
        },
        subtitle: {
            text: 'www.realgrid.com',
            x: -20
        },
        xAxis: {
            categories: categories,
            crosshair: true
        },
        yAxis: [{
            title: {
                text: '소득 ($)'
            },
            labels: {
                format: '{value} $'
            }
        }],
        tooltip: {
            shared: true // 한 로우에 여러 컬럼의 값을 표시
        },
        legend: {
            enabled : false
        },
        series: [{
            name: "GDP",
            data: provider.getFieldValues("GDP"),
            tooltip: {
                valueSuffix: "$ ($100 million)"
            }
        }, {
            name: "GNI",
            data: provider.getFieldValues("GNI"),
            tooltip: {
                valueSuffix: "$ ($100 million)"
            }
        }, {
            name: "PGNI",
            data: provider.getFieldValues("PGNI"),
            tooltip: {
                valueSuffix: "$"
            }
        }, {
            name: "DIncome",
            data: diVal,
            tooltip: {
                valueSuffix: "$"
            }
        }],
        chart: {
            type: 'column',
            events: {
                load: function () {
                    var chart = $("#container").highcharts();
                    $.each(chart.series, function () {
                        
                    });
                },
                click: function (e) {
                    
                }
            }
        }
    });
}

컬럼 헤더 체크 및 데이터 행 변경 이벤트

function gridEvents(grid, provider) {
    grid.onColumnCheckedChanged = function (grid, column, checked) {
        var colName = column.name;
        var chart = $("#container").highcharts();
        $.each(chart.series, function () {
            if (this.name === colName) {
                this.setVisible(checked);
            }
        });
    }
 
    provider.onRowCountChanged = function () {
        setHiChart(dataProvider);
    }
}