Select real chart linked column
This is an example linking RealGrid and RealChart. We used the grid's event function onColumnCheckedChanged, which occurs when the CheckBox in the column header is clicked, to hide or show RealChart columns.
Linking RealGrid and RealChart
RealChart can be downloaded from https://service.realgrid.com/ (opens in a new tab).
Chart creation function
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: "Statistics Korea's total production income",
},
subtitle: {
text: "www.realgrid.com",
},
options: {},
xAxis: {
categories: categories,
},
yAxis: [
{
title: {
text: "Income ($)",
},
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);
}Column header check and data row change event
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);
};
}