Real chart linked column filtering
This is an example linking RealGrid and RealChart. We implemented the filtered data to be applied to RealChart through the onFilteringChanged event that occurs when RealGrid's Column Filter is changed. Change the filter in the Year column and see the chart change.
Linking RealGrid and RealChart
RealChart can be downloaded from https://service.realgrid.com/ (opens in a new tab).
Grid filter settings
function setFilter() {
var filters = [];
var vals = dataProvider.getDistinctValues("year");
$.each(vals, function (k, v) {
var filter = {};
filter.name = v;
filter.criteria = "value = '" + v + "'";
filters. push(filter);
});
var col = gridView.columnByName("Year");
col.filters = filters;
gridView.setColumn(col);
}Filter list change and data row change events
function gridEvents(grid, provider) {
grid.onFilteringChanged = function (grid) {
var count = grid.getItemCount();
var jArr = [];
for (var i = 0; i < count; i++) {
var jObj = grid.getValues(i);
if (!jObj.Year) jObj.Year = null;
jArr.push(jObj);
}
if (!config) return;
$.each(config.series, function (index, series) {
var updateData = jArr.map(function (val) {
return [val.Year, val[series.name]];
});
rChart.getSeries(series.name).updateData(updateData);
});
};
}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);
}