Provide Data

You can use one of the two approaches to provide data for Chart, PieChart or Sparkline. The first is declaring an array of plain objects and using it as a data source. For more information on this approach, see the Using an Array of Objects topic. The second is implementing a data source using the data library. With its new level of sophistication, this approach brings you the privileges and flexibility not before seen in primitive arrays. This approach is discussed in greater detail in the Using the Data Library topic.

View Demo

Using an Array of Objects

The simplest way of providing data is using an array of plain objects. Each object in this array specifies series values for a particular argument. PieChart and Sparkline can contain only one series. Therefore, providing data for these widgets requires only one series value to be specified for each argument. The following code snippet shows how to declare an array to be used as a data source for PieChart and Sparkline.

JavaScript
var commonDataSource = [
    { year: 2005, value: 2450 },
    { year: 2006, value: 2156 },
    // ...
    { year: 2014, value: 3650 }
];

This array can be used as a data source in Chart as well, but in this case, Chart will display only one series. If you wish to display multiple series in Chart, specify several values for one argument. For example, the array in the following code snippet provides data for three series named 'aluminum', 'nickel' and 'copper'.

JavaScript
var chartDataSource = [
    { year: 2005, aluminum: 2450, nickel: 1800, copper: 2230 },
    { year: 2006, aluminum: 2156, nickel: 2105, copper: 1990 },
    // ...
    { year: 2014, aluminum: 3650, nickel: 3254, copper: 4052 }
];

In Chart, the majority of series types requires one value for one argument to define one series point. Data sources for such series are represented above. However, there are series types that require two or more values for one argument to define one point. For example, range series need two values, while financial series series need four values for one argument. The code snippet below shows how to implement a data source for two series of the range bar type.

JavaScript
var rangeDataSource = [
    { year: 2005, aluminumMin: 2450, aluminumMax: 2750, copperMin: 2230, copperMax: 2600 },
    { year: 2006, aluminumMin: 2156, aluminumMax: 2300, copperMin: 1990, copperMax: 2120 },
    // ...
    { year: 2014, aluminumMin: 3650, aluminumMax: 3850, copperMin: 3500, copperMax: 4300 }
];

After you have implemented a data source, bind it to your widget. To learn how to do this, refer to the Bind Data topic.

Using the Data Library

DevExtreme integrates a data library, which allows you to read and write data. A comprehensive overview of data library features is provided in the Data Layer topic. This data library is comprised of a DataSource and a Store.

A DataSource is a stateful object that keeps sorting, grouping, filtering and data transformation options, and applies them each time data is loaded. It also provides events intended to handle data and state changes. More information on the DataSource object can be found in the Reference section.

A Store is a universal data access interface that is comprised of a number of methods for reading and editing data. You can find a listing of these methods in the What Are Stores topic. There are four types of stores.

  • ArrayStore - provides access to an in-memory array
  • LocalStore - provides access to the HTML5 web storage
  • ODataStore - provides access to a remote OData service
  • CustomStore - allows you to implement your own data access logic

Chart, PieChart and Sparkline accept a DataSource instance that must have its store field specified. You must assign an object configuring the required store to this field. This rule, however, can be ignored if you use a CustomStore. In this case, specify all store settings directly in the instance object, omitting the use of the store field.

In the following subtopics, you will learn how to configure stores of different types.

Using an ArrayStore

This type of store is great when you need a simple data source with the data lifetime equaling the lifetime of your application. An ArrayStore is created from an array of plain objects. Your widget creates it automatically when such an array is specified for it (see Using an Array of Objects). However, you may need to create an ArrayStore explicitly if you need to handle the events of data loading, updating, etc., in a special way on the store level. The code snippet below illustrates the creating of a DataSource on the base of an ArrayStore. This DataSource can be used to provide data for the Chart, PieChart or Sparkline widget.

JavaScript
var dataSource = new DevExpress.data.DataSource({
    store: {
        type: 'array',
        data: [
            { year: 2005, value: 2450 },
            { year: 2006, value: 2156 },
            // ...
            { year: 2014, value: 3650 }
        ]
    },
    paginate: false
});
NOTE
We recommend turning pagination off when using a DataSource. This action will prevent your data from partitioning.

In addition, you can specify the store's key option to get a read-write access to data. An ArrayStore has many more options available for configuring. For the full list of them, refer to the ArrayStore reference section.

After you have created a DataSource, you need to bind it to your chart. Refer to the Bind Data section to learn how to do this.

Using a LocalStore

This type of store is helpful when you use an HTML5 Web Storage (also known as window.localStorage) for storing your data. To create a DataSource on the base of a LocalStore, specify the type and name options of the store object as demonstrated below.

JavaScript
var dataSource = new DevExpress.data.DataSource({
    store: {
        type: 'local',
        name: 'MyLocalStore'
    },
    paginate: false
});
NOTE
We recommend turning pagination off when using a DataSource. This action will prevent your data from partitioning.

In addition, you can specify the store's key option to have a read-write access to data.

After that, populate the store (which lays under the DataSource) with data using its insert(values) method.

dataSource.store().insert({ year: 2005, value: 2450 });

A LocalStore has many more options available for configuring. For a full list, refer to the LocalStore reference section.

After you have created a DataSource, you need to bind it to your widget. Refer to the Bind Data section to learn how to do this.

Using an ODataStore

OData is a universal open protocol for consuming data APIs. The DevExtreme data library provides a special type of store to access OData web services, called ODataStore. The following code is sufficient for providing data for a widget using an ODataStore.

JavaScript
var dataSource = new DevExpress.data.DataSource({
    store: {
        type: 'odata',
        url: 'http://url/to/the/source'
    },
    paginate: false
});
NOTE
We recommend turning pagination off when using a DataSource. This action will prevent your data from partitioning.

In some cases, this configuration is not enough for a ODataStore to support proper operation. This may occur due to the same-origin policy restrictions. For more information, read the Note on Same-Origin Policy topic.

In addition, you can specify the store's key option to get a read-write access to data. An ODataStore has many more options available for configuring. For a complete list, refer to the ODataStore reference section.

After you have created a DataSource, you need to bind it to your chart. Refer to the Bind Data section to learn how to do this.

Using a CustomStore

When you have a custom web service with its own data accessing logic, use a CustomStore to operate that data. This type of store requires the implementation of a function for each data access operation. To provide data for Chart, PieChart or Sparkline, implement the load function at least. As an example of such an implementation, consider the following code snippet.

JavaScript
var dataSource = new DevExpress.data.DataSource({
    load: function (loadOptions) {
        var d = new $.Deferred();
        $.getJSON('http://mydomain.com/MyDataService')
            .done(function (data) {
                // ...
                // process data here
                // ...
                d.resolve(data); 
        });
        return d.promise();
    }
});

To see more examples of CustomStore implementation, refer to the Custom Sources topic. In addition, you can review the full list of CustomStore options in the CustomStore reference section.

After you have created a DataSource, you need to bind it to your chart. Refer to the Bind Data section to learn how to do this.

You can see an example of a chart using a Custom Store in the Use Remote Data for a Chart tutorial.

View Demo