Data Binding in FlexChart

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.

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.

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.

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.

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.

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' }
    ]
  });