Linking RealChart Grid Cells
This is an example linking RealGrid and RealChart.
You can display a chart inside a grid data cell and use it like a renderer.
Loading RealGrid...
Linking RealGrid and RealChart
RealChart can be downloaded from https://support.realgrid.com/ (opens in a new tab).
Create a custom renderer chart
gridView.registerCustomRenderer('renderer01', {
initContent: function (parent) {
const div = (this._div = document.createElement('div'));
div.className = 'custom_render_div';
div.style.width = '140px';
div.style.height = '100px';
parent.appendChild(div);
gaugeConfig = {
chart: {
},
credits: {
visible: false, // Credit hidden
},
title: '',
gauge: {
name: 'gauge1',
value: 87,
clockwise: true;
startAngle: 0;
sweepAngle: 360;
valueRadius: '100%',
innerRadius: '70%',
centerX:25,
centerY:15,
rim: {
visible: true
},
valueRim: {
visible: true;
thickness: '100%',
ranges: [{
toValue: 30;
color: '#0098ff'
},
{
toValue: 70;
color: '#66d0ff'
},
{
color: '#ff5c35'
}
]
},
scale: {
visible: false;
position: 'default'
},
label: {
style: {
fontSize:13
},
suffix: "%"
}
};
this._rChart = RealChart.createChart(document, div, gaugeConfig);
},
clearContent: function (parent) {
this._rChart = null;
},
render: function (grid, model, width, height, info) {
const data = grid.getValues(model.index.itemIndex);
if(!grid.isEditing()) {
gaugeConfig.gauge.value = data.achievementRate
this._rChart.load(gaugeConfig);
}
}
});