Custom Sources

For loading data from any other source, DevExtreme provides the CustomStore component. It is a flexible instrument that allows you to implement all the necessary data access operations manually.

For the Chart widget, you need to implement the load operation only. It is a function that accepts a bag of loadOptions and passes them to the server. The server must process data according to the loadOptions and send processed data back. The members of the loadOptions depend on data processing operations (filtering, sorting, etc.) that you have enabled in the DataSource.

If certain operations are not supported by the server, you can perform them on the client, after data is retrieved.

The following code example shows how to implement the load operation. You can see that in this example, the CustomStore is not declared explicitly. Instead, CustomStore operations are implemented directly in the DataSource configuration object to shorten this example.

$(function() {
        dataSource: new{
            load: function(loadOptions) {
                // Passed if "filter" is set
                var filterOptions = loadOptions.filter ? JSON.stringify(loadOptions.filter) : "";
                // Passed if "sort" is set
                var sortOptions = loadOptions.sort ? JSON.stringify(loadOptions.sort) : "";

                var d = $.Deferred();
                $.getJSON("", {
                    filter: filterOptions,
                    sort: sortOptions
                }).done(function(result) {
                    // Here, you can perform operations unsupported by the server
                    // or any other operations on the retrieved data
                return d.promise();
        // ...

View Demo

For consuming data from ASP.NET and PHP servers, DevExtreme provides the following extensions that implement the CustomStore and server-side data processing for you.

See Also