하이차트 연동 컬럼 선택
RealGrid와 HighCharts를 사용하여 연계한 예제입니다.
컬럼 헤더의 CheckBox를 클릭하면 발생하는 그리드의 이벤트함수 onColumnCheckedChanged를 사용하여 Highcharts의 컬럼을 숨기거나 보이도록 하였습니다.
※ 하이차트 관련 문의는 하이차트 업체에 문의를 해주시기 바랍니다.
RealGrid와 HighCharts를 연계
HighCharts는 http://www.highcharts.com/download 페이지에서 다운 받을수 있습니다.
차트 생성 함수
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
},
subtitle: {
text: 'www.realgrid.com',
x: -20
},
xAxis: {
categories: categories,
crosshair: true
},
yAxis: [{
title: {
text: '소득 ($)'
},
labels: {
format: '{value} $'
}
}],
tooltip: {
shared: true // 한 로우에 여러 컬럼의 값을 표시
},
legend: {
enabled : false
},
series: [{
name: "GDP",
data: provider.getFieldValues("GDP"),
tooltip: {
valueSuffix: "$ ($100 million)"
}
}, {
name: "GNI",
data: provider.getFieldValues("GNI"),
tooltip: {
valueSuffix: "$ ($100 million)"
}
}, {
name: "PGNI",
data: provider.getFieldValues("PGNI"),
tooltip: {
valueSuffix: "$"
}
}, {
name: "DIncome",
data: diVal,
tooltip: {
valueSuffix: "$"
}
}],
chart: {
type: 'column',
events: {
load: function () {
var chart = $("#container").highcharts();
$.each(chart.series, function () {
});
},
click: function (e) {
}
}
}
});
}
컬럼 헤더 체크 및 데이터 행 변경 이벤트
function gridEvents(grid, provider) {
grid.onColumnCheckedChanged = function (grid, column, checked) {
var colName = column.name;
var chart = $("#container").highcharts();
$.each(chart.series, function () {
if (this.name === colName) {
this.setVisible(checked);
}
});
}
provider.onRowCountChanged = function () {
setHiChart(dataProvider);
}
}