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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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
            //center
        },
        subtitle: {
            text: 'www.realgrid.com',
            x: -20
        },
        xAxis: {
            categories: categories,
            crosshair: true
        },
        yAxis: [{
            title: {
                text: '소득 ($)'
            },
            labels: {
                format: '{value} $'
            }
        }],
        tooltip: {
            shared: true
            // 한 로우에 여러 컬럼의 값을 표시
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            type: 'spline',
            name: "GDP",
            //              data : provider.getFieldValues("GDP"),
            tooltip: {
                valueSuffix: "$ ($100 million)"
            }
        }, {
            type: 'spline',
            name: "GNI",
            //              data : provider.getFieldValues("GNI"),
            tooltip: {
                valueSuffix: "$ ($100 million)"
            }
        }, {
            type: 'spline',
            name: "PGNI",
            //              data : provider.getFieldValues("PGNI"),
            tooltip: {
                valueSuffix: "$"
            }
        }, {
            type: 'spline',
            name: "DIncome",
            //              data : diVal,
            tooltip: {
                valueSuffix: "$"
            }
        }, {
            type: 'pie',
            name: 'Total consumption',
            data: [{
                name: 'GDP',
                y: gridView.getValue(gridView.getCurrent().itemIndex, 1),
                color: Highcharts.getOptions().colors[0]
            }, {
                name: 'GNI',
                y: gridView.getValue(gridView.getCurrent().itemIndex, 2),
                color: Highcharts.getOptions().colors[1]
            }, {
                name: 'PGNI',
                y: gridView.getValue(gridView.getCurrent().itemIndex, 3),
                color: Highcharts.getOptions().colors[3]
            }, {
                name: 'DIncome',
                y: gridView.getValue(gridView.getCurrent().itemIndex, 4) == undefined ? null : gridView.getValue(gridView.getCurrent().itemIndex, 4),
                color: Highcharts.getOptions().colors[4]
            }],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: true
            }
        }],
        chart: {
            events: {
                load: function () {
 
                },
                click: function (e) {
                    console.log(e);
                }
            }
        }
    });
}

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
function gridEvents(grid, provider) {
    grid.onCurrentChanged = function (grid, index) {
        var chart = $("#container").highcharts();
        if (!chart)
            return;
        setPie(chart);
    }
 
    provider.onRowCountChanged = function () {
        setHiChart(dataProvider);
    }
 
    grid.onItemChecked = function (grid, itemIndex, checked) {
        var checkItems = grid.getCheckedItems();
        var values = [];
        $.each(checkItems, function () {
            values.push(grid.getValues(this));
        });
        setCheckValueToChart(values);
    }
 
    grid.onItemAllChecked = function (grid, checked) {
        if (checked) {
            setCheckValueToChart(dataProvider.getJsonRows());
        } else {
            setCheckValueToChart([]);
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
function setPie(chart, index) {
    index = index ? index : gridView.getCurrent();
    var rowValue = dataProvider.getJsonRow(index.dataRow);
    var hcData = [];
    $.each(rowValue, function (k, v) {
        if (v == undefined)
            v = null;
        if (k == "Year")
            return true;
        hcData.push(v);
    });
    chart.series[4].setData(hcData);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function setCheckValueToChart(values) {
    var year = [], gdp = [], gni = [], pgni = [], dincome = [];

    $.each(values, function (k, v) {
        year.push(v.Year);
        gdp.push(v.GDP);
        gni.push(v.GNI);
        pgni.push(v.PGNI);
        dincome.push(v.DIncome ? v.DIncome : null);
    });

    var chart = $("#container").highcharts();
    if (!chart)
        return;
    chart.xAxis[0].setCategories(year);
    chart.series[0].setData(gdp);
    chart.series[1].setData(gni);
    chart.series[2].setData(pgni);
    chart.series[3].setData(dincome);

    setPie(chart, gridView.getCurrent());
}