리얼차트 연동 행 선택

RealGrid와 RealChart를 사용하여 연계한 예제입니다.
각 행의 Checkbar를 선택/해제하면 선택된 행만 Line Chart에 표시가 됩니다. 또한 Focus된 행을 별도의 Pie Chart로 표시됩니다.

RealGrid와 RealChart를 연계

RealChart는 https://service.realgrid.com/ (opens in a new tab) 에서 다운 받을수 있습니다.

pie 타입 차트 생성

function setRealChart(provider) {
    var categories = provider.getFieldValues("year");
    var diVal = provider.getFieldValues("DIncome");
    $.each(diVal, function (k, v) {
        if (v == undefined) diVal[k] = null;
    });
 
    config = {
        title: {
            text: "통계청 총생산소득",
        },
        subtitle: {
            text: "www.realgrid.com",
        },
        xAxis: {
            categories: categories,
            grid: false,
        },
        yAxis: [
            {
                title: {
                    text: "소득 ($)",
                },
                label: {
                    suffix: " $",
                    numberSymbols: "",
                },
            },
        ],
        legend: {
            location: "right",
        },
        series: [
            {
                type: "line",
                lineType: "spline",
                name: "GDP",
                displayInLegend: false,
                color: "#7cb5ec",
                yAxis: 1,
            },
            {
                type: "line",
                lineType: "spline",
                name: "GNI",
                displayInLegend: false,
                color: "#434348",
            },
            {
                type: "line",
                lineType: "spline",
                name: "PGNI",
                color: "#90ed7d",
                displayInLegend: false,
            },
            {
                type: "line",
                lineType: "spline",
                name: "DIncome",
                color: "#f7a35c",
                displayInLegend: false,
            },
            {
                type: "pie",
                centerX: "15%",
                centerY: "35%",
                displayInLegend: true,
                radius: "15%",
                pointLabel: {
                    visible: true,
                    position: "outside",
                    text: "${name}",
                },
                legendByPoint: true,
                data: [
                    {
                        name: "GDP",
                        color: "#7cb5ec",
                        y: gridView.getValue(
                            gridView.getCurrent().itemIndex,
                            1
                        ),
                    },
                    {
                        name: "GNI",
                        color: "#434348",
                        y: gridView.getValue(
                            gridView.getCurrent().itemIndex,
                            2
                        ),
                    },
                    {
                        name: "PGNI",
                        color: "#90ed7d",
                        y: gridView.getValue(
                            gridView.getCurrent().itemIndex,
                            3
                        ),
                    },
                    {
                        name: "DIncome",
                        color: "#f7a35c",
                        y:
                            gridView.getValue(
                                gridView.getCurrent().itemIndex,
                                4
                            ) == undefined
                                ? 0
                                : gridView.getValue(
                                      gridView.getCurrent().itemIndex,
                                      4
                                  ),
                    },
                ],
            },
        ],
    };
 
    rChart = RealChart.createChart(document, "realchart", config, true, () => {
        setPie();
    });
}

이벤트 설정

function gridEvents(grid, provider) {
    grid.onCurrentChanged = function (grid, index) {
        setPie();
    };
 
    provider.onRowCountChanged = function () {
        setRealChart(dataProvider);
    };
 
    grid.onItemChecked = function (grid, itemIndex, checked) {
        var checkItems = grid.getCheckedItems();
        var values = [];
        $.each(checkItems, function () {
            values.push(grid.getValues(this));
        });
        setCheckValueToChart(values);
    };
 
    grid.onItemsChecked = function (grid, items, 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([]);
        }
    };
}

setPie 설정 함수

function setPie() {
    var index = gridView.getCurrent();
    var rowValue = dataProvider.getJsonRow(index.dataRow);
    var rcData = [];
    $.each(rowValue, function (k, v) {
        if (v == undefined) v = 0;
        if (k == "Year") return true;
        rcData.push(v);
    });
 
    var pieSeries = rChart.getSeries("pie").get("data");
 
    var updateData = pieSeries.map((e, i) => {
        return { name: e.name, color: e.color, y: rcData[i] };
    });
    
    rChart.getSeries("pie").updateData(updateData);
}

Line Chart 설정 함수

function setCheckValueToChart(values) {
    var mapValues = (values, name) => {
        return values.map((e) => [e.Year, e[name]]);
    };
 
    if (!rChart) return;
    config.series.forEach((series) => {
        if (series.name !== "pie") {
            rChart.getSeries(series.name).updateData(mapValues(values, series.name));
        }
    });
}

리얼차트 연동 컬럼 필터링 추천 설정