
This example integrates RealGrid2 with the pie series from [RealMap](https://www.realmap.co.kr/).

You can draw various series charts, such as pie charts, over regions.

```js
const config = {
  title: false,
  map: [{ url: '/data/en/maps/kr-sido-low.geo.json', padding: '0.1 0' }],
  body: { projection: 'mercator' },
  annotations: [
    {
      front: true,
      type: 'shape',
      shape: 'rectangle',
      offsetX: 20,
      offsetY: 20,
      width: 10,
      height: 28,
      style: { fill: '#FFD5A3' },
    },
    {
      front: true,
      type: 'text',
      text: 'Province Gender Population Structure',
      offsetX: 40,
      offsetY: 20,
      height: 28,
      style: { fontSize: '15pt', fontWeight: 700 },
    },
  ],
  legend: { location: 'bottom' },
  series: [
    {
      name: 'Administrative Boundary (Province)',
      dataUrl: '/data/en/kr-gender-ratio.json',
      mapKeys: ['b-code', 'code'],
      hoverColor: '#DBD4CE',
      tooltipText: false,
      style: { stroke: '#fff', strokeWidth: 0.7 },
      pointColors: (args) => {
        const ratio = args.source.genderRatio;
        if (ratio < 1) return '#FFD5A3';
        return '#FCE7C8';
      },
      visibleInLegend: false,
    },
    {
      type: 'pie',
      name: 'Province Gender Population Ratio (M/F)',
      minSize: 0.5,
      legendByCategory: true,
      idField: 'code',
      categories: [
        { name: 'Male', color: '#65AAEB' },
        { name: 'Female', color: '#FD787F' },
      ],
      pointLabel: {
        visible: true,
        textCallback: (args) => {
          const { name, total, malePopulation, femalePopulation } = args.source;
          return '${name}<br />' + (malePopulation / total * 100).toFixed(1) + '/' + (femalePopulation / total * 100).toFixed(1);
        },
      },
      tooltipText: false,
      dataUrl: '/data/en/kr-gender-ratio.json',
    },
  ],
};

const fields = [
  { fieldName: 'sido', dataType: 'text' },
  { fieldName: 'code', dataType: 'text' },
  { fieldName: 'total', dataType: 'number' },
  { fieldName: 'houseHold', dataType: 'number' },
  { fieldName: 'houseHoldSize', dataType: 'number' },
  { fieldName: 'malePopulation', dataType: 'number' },
  { fieldName: 'femalePopulation', dataType: 'number' },
];

const columns = [
  { name: 'sido', fieldName: 'sido', header: { text: 'Province' }, width: 70 },
  { name: 'code', fieldName: 'code', header: { text: 'Region Code' }, width: 110 },
  { name: 'houseHold', fieldName: 'houseHold', header: { text: 'Number of Households' }, width: 70 },
  { name: 'malePopulation', fieldName: 'malePopulation', header: { text: 'Male Population' }, width: 70 },
  { name: 'femalePopulation', fieldName: 'femalePopulation', header: { text: 'Female Population' }, width: 70 },
  { name: 'houseHoldSize', fieldName: 'houseHoldSize', header: { text: 'Average per Household' }, width: 70 },
  { name: 'total', fieldName: 'total', header: { text: 'Total Population' }, width: 110 },
];

var dataProvider, gridView, chart;

async function createGrid(container) {
  chart = await RealMap.createChartAsync(document, 'realmap', config, true);

  dataProvider = new RealGrid.LocalDataProvider();
  gridView = new RealGrid.GridView(container);
  gridView.setDataSource(dataProvider);
  dataProvider.setFields(fields);
  gridView.setColumns(columns);

  gridView.displayOptions.emptyMessage = 'No data to display.';
  gridView.header.height = 40;
  gridView.displayOptions.rowHeight = 36;
  gridView.footer.height = 40;
  gridView.stateBar.width = 16;
  gridView.editOptions.insertable = true;
  gridView.editOptions.appendable = true;
  gridView.displayOptions.fitStyle = 'fill';
  gridView.displayOptions.selectionStyle = 'singleRow';

  fetch('/data/en/kr-gender-ratio.json')
    .then(response => response.json())
    .then(data => {
      dataProvider.setRows(data);
      gridView.refresh();
    });

  gridView.setEditOptions({ commitByCell: true });

  dataProvider.onRowUpdated = (provider, row) => {
    const code = provider.getValue(row, 'code');
    const malePopulation = provider.getValue(row, 'malePopulation');
    const femalePopulation = provider.getValue(row, 'femalePopulation');
    const total = provider.getValue(row, 'total');
    const pieSeries = chart.seriesByType('pie');
    const point = pieSeries.pointById(code);
    point.updateValues(pieSeries, {
      malePopulation: malePopulation,
      femalePopulation: femalePopulation,
      total: total,
      value: [malePopulation, femalePopulation],
    });
    chart.render();
  };
}

createGrid('realgrid');
```

When modifying grid data, you can update pie chart data using the pie series update function.
For each series, you must retrieve series information and update point properties.


```js
const config = {
    title: false,
    map: [{
        url: 'maps/kr-sido-low.geo.json',
        padding: '0.1 0'
    }],
    body: {
        projection: 'mercator'
    },
    annotations: [{
            front: true,
            type: 'shape',
            shape: 'rectangle',
            offsetX: 20,
            offsetY: 20,
            width: 10,
            height: 28,
            style: {
                fill: '#FFD5A3'
            }
        },
        {
            front: true,
            type: 'text',
            text: '시도별 남녀 인구 구조',
            offsetX: 40,
            offsetY: 20,
            height: 28,
            style: {
                fontSize: '15pt',
                fontWeight: 700
            }
        }
    ],
    legend: {
        location: 'bottom'
    },
    series: [{
            name: '행정구역경계(시도)',
            dataUrl: '/data/kr-gender-ratio.json',
            mapKeys: ['b-code', 'code'],
            hoverColor: '#DBD4CE',
            tooltipText: false,
            style: {
                stroke: '#fff',
                strokeWidth: 0.7
            },
            pointColors: (args) => {
                const ratio = args.source.genderRatio;
                if (ratio < 1) return '#FFD5A3';
                return '#FCE7C8';
            },
            visibleInLegend: false
        },
        {
            type: 'pie',
            name: '시도별 남녀 인구 비율(남/녀)',
            minSize: 0.5,
            legendByCategory: true,
            categories: [{
                    name: '남자',
                    color: '#65AAEB'
                },
                {
                    name: '여자',
                    color: '#FD787F'
                }
            ],
            pointLabel: {
                visible:true,
                textCallback: (args) => {
                    const {
                        name,
                        total,
                        sido,
                        malePopulation,
                        femalePopulation
                    } = args.source;
                    return '${name}<br />' +(malePopulation/total*100).toFixed(1)+ "/" + (femalePopulation/total*100).toFixed(1);
                }
            },
            tooltipText: false,
            mapKeys: ['b-code', 'code'],
            dataUrl: '/data/kr-gender-ratio.json'
        }
    ]
}

//그리드 값 변경에 따른 파이 차트 업데이트
dataProvider.onRowUpdated = (provider, row) => {
    const code = provider.getValue(row, 'code');
    const malePopulation = provider.getValue(row, 'malePopulation');
    const femalePopulation = provider.getValue(row, 'femalePopulation');

    const pieSeries = chart.seriesByType('pie');
    const point = pieSeries.pointById(code);

    point.updateValues(pieSeries, { malePopulation: malePopulation, femalePopulation: femalePopulation, value:[malePopulation, femalePopulation] });

    chart.render();
};
```