1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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 () {
                        var col = gridView.columnByName(this.name);
                        col.styles = { background: this.color.replace("#", "#39") };
                        gridView.setColumn(col);
                    });
                },
                click: function (e) {
                    console.log(e);
                }
            }
        }
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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);
                setColumnColor(this.name, this.color, checked);
            }
        });
    }
 
    provider.onRowCountChanged = function () {
        setHiChart(dataProvider);
    }
}

1
2
3
4
5
function setColumnColor(name, color, check) {
    var col = gridView.columnByName(name);
    col.styles = check ? { background: color.replace("#", "#39") } : { background: null };
    gridView.setColumn(col);
}