리얼차트 연동 컬럼 선택
RealGrid와 RealChart를 사용하여 연계한 예제입니다.
컬럼 헤더의 CheckBox를 클릭하면 발생하는 그리드의 이벤트함수 onColumnCheckedChanged를 사용하여 RealChart의 컬럼을 숨기거나 보이도록 하였습니다.
RealGrid와 RealChart를 연계
RealChart는 https://service.realgrid.com/ (opens in a new tab) 에서 다운 받을수 있습니다.
차트 생성 함수
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);
}컬럼 헤더 체크 및 데이터 행 변경 이벤트
function gridEvents(grid, provider) {
grid.onColumnCheckedChanged = function (grid, column, checked) {
var colName = column.name;
var options = config;
$.each(options.series, function (e) {
if (this.name === colName) {
rChart.getSeries(this.name).set('visible', checked);
}
});
};
provider.onRowCountChanged = function () {
setRealChart(provider);
};
}