
# 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.

```js
const fields = [
  {
    fieldName: 'Year',
    dataType: 'text',
  },
  {
    fieldName: 'GDP',
    dataType: 'number',
  },
  {
    fieldName: 'GNI',
    dataType: 'number',
  },
  {
    fieldName: 'PGNI',
    dataType: 'number',
  },
  {
    fieldName: 'DIncome',
    dataType: 'number',
  },
];

const columns = [
  {
    name: 'Year',
    fieldName: 'Year',
    width: '80',
    header: {
      text: 'Year',
    },
  },
  {
    name: 'GDP',
    fieldName: 'GDP',
    width: '160',
    header: {
      text: 'GDP ($100 milion)',
      checkLocation: 'left',
      checked: true,
    },
    checked: true,
    styleName: 'column-background1',
  },
  {
    name: 'GNI',
    fieldName: 'GNI',
    width: '160',
    header: {
      text: 'GNI ($100 milion)',
      checkLocation: 'left',
      checked: true,
    },
    checked: true,
    styleName: 'column-background2',
  },
  {
    name: 'PGNI',
    fieldName: 'PGNI',
    width: '160',
    header: {
      text: 'PGNI ($)',
      checkLocation: 'left',
      checked: true,
    },
    checked: true,
    styleName: 'column-background3',
  },
  {
    name: 'DIncome',
    fieldName: 'DIncome',
    width: '160',
    header: {
      text: 'DIncome ($)',
      checkLocation: 'left',
      checked: true,
    },
    checked: true,
    styleName: 'column-background4',
  },
];

let rChart;
let config;

function setRealChart(provider) {
  const categories = provider.getFieldValues('year');
  const diVal = provider.getFieldValues('DIncome').map(v => v === undefined ? null : v);

  config = {
    title: {
      text: 'Statistics Korea GNI',
    },
    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);
}

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/총생산소득.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  },
  onColumnCheckedChanged: (grid, column, checked) => {
    const colName = column.name;
    if (config && config.series) {
      config.series.forEach((series) => {
        if (series.name === colName) {
          rChart.getSeries(series.name).toggleOption('visible');
        }
      });
    }
  }
}, {
  fields
});

dataProvider.onRowCountChanged = function () {
  setRealChart(dataProvider);
};

gridView.onCurrentRowChanged = function (grid, oldRow, newRow) {
  if (newRow > -1 && oldRow !== -1) {
    const idx = gridView.getItemIndex(newRow);
    gridView.checkItem(idx, true, true);
  }
};

window.gridView = gridView;
window.dataProvider = dataProvider;
```

#### Linking RealGrid and RealChart

RealChart can be downloaded from [https://service.realgrid.com/](https://service.realgrid.com/).

#### Chart creation function

```js
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

```js
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);
     };
}

```