Update Data

DevExtreme DataSource

This technique is universal for any data source as anything passed to the dataSource option of the Chart ends up wrapped in the DevExtreme DataSource. To get the DataSource instance, call the getDataSource method of the Chart.

jQuery
JavaScript
var ds = $("#chartContainer").dxChart("getDataSource");
AngularJS
JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function ($scope) {
        $scope.ds = {};
        $scope.chartOptions = {
            // ...
            onInitialized: function (e) {
                $scope.ds = e.component.getDataSource();  
            }
        };
    });
Knockout
JavaScript
var viewModel = {
    ds: {},
    chartOptions: {
        // ...
        onInitialized: function (e) {
            viewModel.ds = e.component.getDataSource();    
        }
    }
};

ko.applyBindings(viewModel);

After that, you need to access the underlying Store with the store() method, and call the insert(values), update(key, values) or remove(key) method of the Store to modify data. Note that in order to use the update(key, values) and remove(key) methods, you need to specify the key property for the Store. After all modifications are made, call the load method in the DataSource instance to make the Chart reflect the changes.

JavaScript
ds.store().update("Oranges", { count: 10 });
ds.store().remove("Apples");
ds.load();
NOTE
You can also apply data shaping options, such as filtering, sorting, etc., using the DataSource at runtime. In any case, call the load method afterwards to notify the Chart of the changes.
See Also

jQuery

NOTE
Use the technique described here only if your data source is a JavaScript array. Otherwise, update Chart data through the DataSource instance.

Make changes to the array using standard methods. Then, reassign the updated array to the Chart using the option(optionName, optionValue) method.

JavaScript
var fruits = [
    { fruit: 'Apples', count: 10 },
    { fruit: 'Oranges', count: 12 },
    { fruit: 'Lemons', count: 15 }
];

fruits.push({ fruit: 'Pineapples', count: 3 });
// Reassigns the "fruits" array to the "Chart" 
$("#chartContainer").dxChart("option", "dataSource", fruits);
See Also

AngularJS

NOTE
Use the technique described here only if your data source is a JavaScript array. Otherwise, update Chart data through the DataSource instance.

Declare two-way data binding between the dataSource option and the scope property that contains an array. For this, configure the bindingOptions object of the Chart as follows.

HTML
<div ng-controller="DemoController">
    <div dx-chart="{
        ...
        bindingOptions: {
            dataSource: 'fruits'
        }
    }"></div>
</div>
JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function ($scope) {
        $scope.fruits = [
            { fruit: 'Apples', count: 10 },
            { fruit: 'Oranges', count: 12 },
            { fruit: 'Lemons', count: 15 }
        ];
    });

Now, whenever an item is added or removed from the fruits array, the Chart will be updated accordingly. If you need to track changes in objects, configure the bindingOptions object as follows.

HTML
<div ng-controller="DemoController">
    <div dx-chart="{
        ...
        bindingOptions: {
            dataSource: {
                dataPath: 'fruits',
                deep: true
            }
        }
    }"></div>
</div>

In this case, the Chart will use the $watch listener instead of the default $watchCollection listener. Note that the use of the $watch listener may impact the Chart's peformance.

See Also

Knockout

NOTE
Use the technique described here only if your data source is a JavaScript array. Otherwise, update Chart data through the DataSource instance.

Declare the array observable and bind the dataSource option to it. Whenever an item is added or removed from this array, the Chart will be updated accordingly.

HTML
<div id="chartContainer" data-bind="dxChart: {
    dataSource: fruits,
    ...
}"></div>
JavaScript
var viewModel = {
    fruits: ko.observableArray([
        { fruit: 'Apples', count: 10 },
        { fruit: 'Oranges', count: 12 },
        { fruit: 'Lemons', count: 15 }
    ])
};

ko.applyBindings(viewModel);
See Also