Linking RealChart with Grid headersummary
This is an example linking RealGrid and RealChart.
Link RealChart using a template in the grid headerSummary area.
Loading RealGrid...
Linking RealGrid and RealChart
RealChart can be downloaded from https://service.realgrid.com/ (opens in a new tab).
Chart creation function
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);
}