# Data Binding in FlexChart

Learn how to databind Wijmo's chart component in this documentation topic

## Content


The FlexChart allows you to visualize tabular data as business charts. It provides a variety of options about how to present and interact with the data, including selection, zooming, drill-down, formatting, etc.

To data bind FlexChart follow these steps:

1. Bind the chart by setting its __itemsSource__ property to an array containing regular JavaScript objects.
2. Set the __bindingX__ property to the field name from the source data to be plotted along the X axis.
3. Populate the chart's __series__ array with objects that define which data fields should be plotted on the Y axis for each series.

```Javascript
import * as wjChart from '@mescius/wijmo.chart';

var myChart = new wjChart.FlexChart('#myChart', {
    itemsSource: appData,
    bindingX: 'country',
    series: [
        { name: 'Sales', binding: 'sales' },
        { name: 'Expenses', binding: 'expenses' },
        { name: 'Downloads', binding: 'downloads' }
    ]
});
```
The FlexChart populates the series collections automatically based on the chart's __itemsSource__.

## Initializing the FlexChart
In the example above, the initialization was passed as a parameter to the FlexChart constructor. This initialization process can also be handled separately using the _initialize_ method as seen below.

```JavaScript
import * as wjChart from '@mescius/wijmo.chart';

 var myChart = new wjChart.FlexChart('#myChart');
 myChart.initialize({
     itemsSource: appData,
     bindingX: 'country',
     series: [
         { name: 'Sales', binding: 'sales' },
         { name: 'Expenses', binding: 'expenses' },
         { name: 'Downloads', binding: 'downloads' }],
 });
```

Alternatively, you can configure the FlexChart by directly accessing its properties. This should be done between calls to _beginUpdate_ and _endUpdate_ to suspend notifications in between.

```JavaScript
var myChart = new wjChart.FlexChart('#myChart');
myChart.beginUpdate();

myChart.bindingX = 'country';
myChart.itemsSource = getAppData();

// create data series
var series1 = new wjChart.Series();
series1.name = 'Sales';
series1.binding = 'sales';
myChart.series.push(series1);
myChart.endUpdate();
```


## Using the CollectionView

Like all Wijmo controls, the chart delegates all data-related tasks to the CollectionView class, so if you want to filter, sort, or group the data, you can do it using the CollectionView. It may be useful to think of the FlexChart as a special type of data grid, where columns are represented by series and rows are data points on the chart.

When you set the chart's __itemsSource__ property to an array, or __ObservableArray__, the chart automatically creates a CollectionView instance to wrap the original array. Since FlexChart uses the CollectionView class as its data source, any changes made to the data will be automatically reflected on the chart. This CollectionView is exposed by the __collectionView__ property in case you want to access it.

For example, you can sort the data by changing the __sortDescriptions__ property of the chart's __collectionView__.
```Javascript
import * as wijmo from '@mescius/wijmo';

var sd = myChart.collectionView.sortDescriptions;
sd.clear();
sd.push(new wijmo.SortDescription(prop, true))
```

## Binding to Multiple Data Sources
The FlexChart's __itemsSource__ and __bindingX__ properties apply to all series in the chart by default.

Specific series may override those properties and use different data sources and bindings. This allows you to use multiple data sources on the same chart, and reduces the need to pre-process data for charting.

```Javascript
import * as wjChart from '@mescius/wijmo.chart';

var myChart = new wjChart.FlexChart('#myChart', {
    series: [
    	{
      	name: 'Experiment 1', 
        itemsSource: getData(50, 0, 3),
        bindingX: 'x',
        binding: 'y' },
    	{
      	name: 'Experiment 2',
        itemsSource: getData(40, 100, 12),
        bindingX: 'x', 
        binding: 'y' },
    	{
      	name: 'Experiment 3',
        itemsSource: getData(30, -100, 24),
        bindingX: 'x', 
        binding: 'y' }
    ]
  });
```