하이차트 연동 컬럼 필터링
RealGrid와 HighCharts를 사용하여 연계한 예제입니다.
RealGrid의 Column Filter를 변경하면 발생하는 onFilteringChanged이벤트를 통해 필터링된 데이터를 Highcharts에 적용되도록 구현하였습니다.
Year 컬럼의 필터를 변경해여 차트가 변경되는것을 확인하세요.
※ 하이차트 관련 문의는 하이차트 업체에 문의를 해주시기 바랍니다.
RealGrid와 HighCharts를 연계
HighCharts는 http://www.highcharts.com/download 페이지에서 다운 받을수 있습니다.
그리드 필터 설정
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) {
provider.onRowCountChanged = function () {
setHiChart(dataProvider)
}
grid.onFilteringChanged = function (grid) {
setHiChart(provider);
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);
}
var chart = $("#container").highcharts();
if (!chart) return;
$.each(chart.series, function (k, v) {
if (this.name == "Year") {
var cate = $.map(jArr, function () {
return this.Year;
});
chart.xAxis[0].setCategories(cate);
} else {
var data = [];
$.map(jArr, function (val) {
data.push(val[v.name] ? val[v.name] : null);
})
this.setData(data);
}
});
}
}
차트 생성 함수
function setHiChart(provider) {
//필터 결과에 맞는 categories 목록 생성
var categories = [];
for(var i = 0; i < gridView.getItemCount(); i++){
categories.push(gridView.getValue(i, "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: "$"
}
}],
chart: {
events: {
load: function () {
},
click: function (e) {
}
}
}
});
}