
# series column

A series column is a column that displays the values of one or more data fields simultaneously.

## Series column settings

The type of the column is specified as "series", and the column to be displayed is specified with the fieldNames attribute.
In fieldNames, specify a list of fields separated by commas. When specifying fields in the order of columns added to the data provider, you can use field1..fieldn.

```js
const fields = [
  {
    fieldName: "continent",
    dataType: "text"
  },
  {
    fieldName: "country",
    dataType: "text"
  },
  {
    fieldName: "2000",
    dataType: "number"
  },
  {
    fieldName: "2001",
    dataType: "number"
  },
  {
    fieldName: "2002",
    dataType: "number"
  },
  {
    fieldName: "2003",
    dataType: "number"
  },
  {
    fieldName: "2004",
    dataType: "number"
  },
  {
    fieldName: "2005",
    dataType: "number"
  },
  {
    fieldName: "2006",
    dataType: "number"
  },
  {
    fieldName: "2007",
    dataType: "number"
  },
  {
    fieldName: "2008",
    dataType: "number"
  },
  {
    fieldName: "2009",
    dataType: "number"
  },
  {
    fieldName: "2010",
    dataType: "number"
  }
];

const columns = [
  {
    name: "continent",
    fieldName: "continent",
    width: 80,
    header: {
      text: "Continent"
    }
  },
  {
    name: "country",
    fieldName: "country",
    width: 80,
    header: {
      text: "Country"
    }
  },
  {
    name: "colSeries",
    type: "series",
    fieldNames: "2000,2001,2002,2003,2004",
    width: 170,
    header: {
      text: "Series(2000~2004)",
      styleName: "orange-column"
    }
  },
  {
    name: "colSeries1",
    type: "series",
    fieldNames: "2005..2010",
    renderer: {
      valueSeparator: " | "
    },
    width: 170,
    header: {
      text: "Series(2005~2010)",
      styleName: "orange-column"
    }
  },
  {
    fieldName: "2000",
    width: 50,
    header: {
      text: "2000"
    }
  },
  {
    fieldName: "2001",
    width: 50,
    header: {
      text: "2001"
    }
  },
  {
    fieldName: "2002",
    width: 50,
    header: {
      text: "2002"
    }
  },
  {
    fieldName: "2003",
    width: 50,
    header: {
      text: "2003"
    }
  },
  {
    fieldName: "2004",
    width: 50,
    header: {
      text: "2004"
    }
  },
  {
    fieldName: "2005",
    width: 50,
    header: {
      text: "2005"
    }
  },
  {
    fieldName: "2006",
    width: 50,
    header: {
      text: "2006"
    }
  },
  {
    fieldName: "2007",
    width: 50,
    header: {
      text: "2007"
    }
  },
  {
    fieldName: "2008",
    width: 50,
    header: {
      text: "2008"
    }
  },
  {
    fieldName: "2009",
    width: 50,
    header: {
      text: "2009"
    }
  },
  {
    fieldName: "2010",
    width: 50,
    header: {
      text: "2010"
    }
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 50,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/series_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

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

```js
//js
var columns = [
   ... skip ...
   {
     "name": "colSeries",
     "type": "series",
     "fieldNames": "2000,2001,2002,2003,2004",
     "width": 170,
     "header": {
         "text": "Series(2000~2004)",
         "styleName": "orange-column"
     },
   },
   {
     "name": "colSeries1",
     "type": "series",
     "fieldNames": "2005..2010",
     "renderer": {
         "valueSeparator": " | "
     },
     "width": 170,
     "header": {
         "text": "Series(2005~2010)",
         "styleName": "orange-column"
     },
   },
   ... skip ...
];

gridView.setColumns(columns);
```