리얼차트 연동 컬럼 필터링
RealGrid와 RealChart를 사용하여 연계한 예제입니다.
RealGrid의 Column Filter를 변경하면 발생하는 onFilteringChanged이벤트를 통해 필터링된 데이터를 RealChart에 적용되도록 구현하였습니다.
Year 컬럼의 필터를 변경해여 차트가 변경되는것을 확인하세요.
RealGrid와 RealChart를 연계
RealChart는 https://service.realgrid.com/ (opens in a new tab) 에서 다운 받을수 있습니다.
그리드 필터 설정
function setFilter() {
var filters = [];
var vals = dataProvider.getDistinctValues("year");
$.each(vals, function (k, v) {
var filter = {};
filter.name = v;
filter.criteria = "value = '" + v + "'";
filters.push(filter);
});
var col = gridView.columnByName("Year");
col.filters = filters;
gridView.setColumn(col);
}필터 목록 변경 및 데이터 행 변경 이벤트
function gridEvents(grid, provider) {
grid.onFilteringChanged = function (grid) {
var count = grid.getItemCount();
var jArr = [];
for (var i = 0; i < count; i++) {
var jObj = grid.getValues(i);
if (!jObj.Year) jObj.Year = null;
jArr.push(jObj);
}
if (!config) return;
$.each(config.series, function (index, series) {
var updateData = jArr.map(function (val) {
return [val.Year, val[series.name]];
});
rChart.getSeries(series.name).updateData(updateData);
});
};
}차트 생성 함수
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",
},
options: {},
xAxis: {
categories: categories,
},
yAxis: [
{
title: {
text: "소득 ($)",
},
label: {
suffix: " $",
numberSymbols: "",
},
},
],
series: [
{
name: "GDP",
data: provider.getFieldValues("GDP"),
color: "#7cb5ec",
},
{
name: "GNI",
data: provider.getFieldValues("GNI"),
color: "#434348",
},
{
name: "PGNI",
data: provider.getFieldValues("PGNI"),
color: "#90ed7d",
},
{
name: "DIncome",
data: diVal,
color: "#f7a35c",
},
],
};
rChart = RealChart.createChart(document, "realchart", config);
}