그리드 headersummary 리얼차트 연동
RealGrid와 RealChart를 사용하여 연계한 예제입니다.
그리드 headerSummary 영역에 템플릿을 사용해 리얼차트를 연동합니다.
Loading RealGrid...
RealGrid와 RealChart를 연계
RealChart는 https://service.realgrid.com/ (opens in a new tab) 에서 다운 받을수 있습니다.
차트 생성 함수
gridView.onDataLoadComplated = function(grid){
//realChart
summaryChart = {
chart:{
theme: 'custom'
},
title: {
visible: false
},
series: [
{
type: 'pie',
pointLabel: {
visible: true,
position: 'outside',
text: '\${name}'
},
data: [
{ name: 'GDP ($100 milion)', y: gridView.getSummary("GDP","sum") ,color: '#7cb5ec'},
{ name: 'GNI ($100 milion)', y: gridView.getSummary("GNI","sum") ,color: '#434348'},
{ name: 'DIncome ($)', y: gridView.getSummary("DIncome","sum") ,color: '#90ed7d'},
{ name: 'GDP ($100 milion)', y: gridView.getSummary("GDP","sum") ,color: '#f7a35c'}
]
}
]
};
setTimeout(() => {
chart = RealChart.createChart(document, "sumarryChart", summaryChart);
}, 100);
}