Select real chart linked row

This is an example linking RealGrid and RealChart. When you select/deselect the checkbar for each row, only the selected row will be displayed on the line chart. Additionally, the focused row is displayed as a separate Pie Chart.

Linking RealGrid and RealChart

RealChart can be downloaded from https://service.realgrid.com/ (opens in a new tab).

Create pie type chart

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",
         },
         xAxis: {
             categories: categories,
             grid: false;
         },
         yAxis: [
             {
                 title: {
                     text: "Income ($)",
                 },
                 label: {
                     suffix: " $",
                     numberSymbols: "",
                 },
             },
         ],
         legend: {
             location: "right",
         },
         series: [
             {
                 type: "line",
                 lineType: "spline",
                 name: "GDP",
                 displayInLegend: false;
                 color: "#7cb5ec",
                 yAxis: 1;
             },
             {
                 type: "line",
                 lineType: "spline",
                 name: "GNI",
                 displayInLegend: false;
                 color: "#434348",
             },
             {
                 type: "line",
                 lineType: "spline",
                 name: "PGNI",
                 color: "#90ed7d",
                 displayInLegend: false;
             },
             {
                 type: "line",
                 lineType: "spline",
                 name: "DIncome",
                 color: "#f7a35c",
                 displayInLegend: false;
             },
             {
                 type: "pie",
                 centerX: "15%",
                 centerY: "35%",
                 displayInLegend: true;
                 radius: "15%",
                 pointLabel: {
                     visible: true;
                     position: "outside",
                     text: "${name}",
                 },
                 legendByPoint: true,
                 data: [
                     {
                         name: "GDP",
                         color: "#7cb5ec",
                         y: gridView.getValue(
                             gridView.getCurrent().itemIndex;
                             One
                         ),
                     },
                     {
                         name: "GNI",
                         color: "#434348",
                         y: gridView.getValue(
                             gridView.getCurrent().itemIndex;
                             2
                         ),
                     },
                     {
                         name: "PGNI",
                         color: "#90ed7d",
                         y: gridView.getValue(
                             gridView.getCurrent().itemIndex;
                             3
                         ),
                     },
                     {
                         name: "DIncome",
                         color: "#f7a35c",
                         y:
                             gridView.getValue(
                                 gridView.getCurrent().itemIndex;
                                 4
                             ) == undefined
                                 ? 0
                                 : gridView.getValue(
                                       gridView.getCurrent().itemIndex;
                                       4
                                   ),
                     },
                 ],
             },
         ],
     };
 
     rChart = RealChart.createChart(document, "realchart", config, true, () => {
         setPie();
     });
}

Event settings

function gridEvents(grid, provider) {
     grid.onCurrentChanged = function (grid, index) {
         setPie();
     };
 
     provider.onRowCountChanged = function () {
         setRealChart(dataProvider);
     };
 
     grid.onItemChecked = function (grid, itemIndex, checked) {
         var checkItems = grid.getCheckedItems();
         var values = [];
         $.each(checkItems, function () {
             values.push(grid.getValues(this));
         });
         setCheckValueToChart(values);
     };
 
     grid.onItemsChecked = function (grid, items, checked) {
         var checkItems = grid.getCheckedItems();
         var values = [];
         $.each(checkItems, function () {
             values.push(grid.getValues(this));
         });
         setCheckValueToChart(values);
     };
 
     grid.onItemAllChecked = function (grid, checked) {
         if (checked) {
             setCheckValueToChart(dataProvider.getJsonRows());
         } else {setCheckValueToChart([]);
         }
     };
}

setPie setting function

function setPie() {
     var index = gridView.getCurrent();
     var rowValue = dataProvider.getJsonRow(index.dataRow);
     var rcData = [];
     $.each(rowValue, function (k, v) {
         if (v == undefined) v = 0;
         if (k == "Year") return true;
         rcData.push(v);
     });
 
     var pieSeries = rChart.getSeries("pie").get("data");
 
     var updateData = pieSeries.map((e, i) => {
         return { name: e.name, color: e.color, y: rcData[i] };
     });
    
     rChart.getSeries("pie").updateData(updateData);
}

Line Chart setting function

function setCheckValueToChart(values) {
     var mapValues = (values, name) => {
         return values.map((e) => [e.Year, e[name]]);
     };
 
     if (!rChart) return;
     config.series.forEach((series) => {
         if (series.name !== "pie") {
             rChart.getSeries(series.name).updateData(mapValues(values, series.name));
         }
     });
}

Real chart linked column filtering Recommended settings