Update Data

When a data source assigned to the Chart, PieChart or Sparkline widget is changed, the widget must be updated in order to reflect the current state of the data source. Subtopics in this section provide an overview of approaches you can use to support the dynamic widget update. Before you begin, please make sure that you know the basics of configuring a data visualization widget using jQuery, Knockout or AngularJS.

Using jQuery

When using jQuery, rebind the data source to your widget in order to update data in this widget. To do this, obtain its instance at first. The following code snippet demonstrates how this can be done for a pie chart.

JavaScript
var pieChart = $("#pieChartContainer").dxPieChart("instance");

After that, call the option() method of this instance. Pass an object with the specified dataSource field to this method.

JavaScript
pieChart.option({ dataSource: updatedDataSource });

Alternatively, you can call the option() method with two arguments: the name of the option that must be changed and a new value for this option.

JavaScript
pieChart.option('dataSource', updatedDataSource);

After the option is changed, your widget will be refreshed automatically.

Show Example:
jQuery

This example shows how data in the Chart and PieChart widget can be updated. Here, these widgets have the same data source. When you click one of the buttons located below the widgets, this data source is updated. To make the widgets reflect changes made in the data source, the data source must be rebound to the widgets. This is performed using the option() method of the widget instance.


                                    

                                    

Using Knockout

The dataSource option, like any other option from the first level of the widget's configuration object, can be declared as an observable variable. Any changes in the option value will be detected and the widget will be refreshed automatically.

HTML
<div id="chartContainer" style="height:400px; width: 600px" data-bind="dxChart: {
    dataSource: observableChartDataSource
    ...
}"></div>
JavaScript
var myViewModel = {
    observableChartDataSource: ko.observableArray(data),
    //...
};
ko.applyBindings(myViewModel);
Show Example:
jQuery

This example illustrates the capability of the Sparkline widget to refresh itself when its data source is updated. This data source is declared as an observable array. Each time a new entry is added to the data source using the addPoint function, the Sparkline widget is refreshed automatically.


                                    

                                    

Using AngularJS

In order to update data in your widget when using AngularJS, provide two-way binding between the dataSource option and the corresponding field of the $scope object. For this purpose, add the bindingOptions field to the widget configuration object. This field is assigned an object containing options that require two-way binding. In your case, the dataSource is such an option. In the following code snippet, the dataSource $scope field is used to provide data for Chart.

HTML
<div ng-controller="myController">
    <div dx-chart="{
        ...
        bindingOptions: {
            dataSource: 'dataSource'
        }
    }"></div>
</div>
JavaScript
var myApp = angular.module('myApp', ['dx']);
myApp.controller('myController', function ($scope) {
    $scope.dataSource = dataArray;
});

NOTE: When specifying options within the bindingOptions object, you must use the name of the corresponding $scope object field instead of the field itself.

In order to keep data in your widget up-to-date after the data source is changed, you need to wrap actions that modify the data source in the following construction.

JavaScript
$scope.$apply(function () {
    // perform actions on the data source here
});

Obviously, this code must be used inside the controller constructor. The resulting implementation of a dynamically updating data source for an abstract application is given below. With this code, your widget will be refreshed automatically after the data source is changed.

JavaScript
var myApp = angular.module('myApp', ['dx']);
myApp.controller('myController', function ($scope) {
    $scope.dataSource = dataArray;
    $scope.dataChangingFunction = function () {
        $scope.$apply(function () {
            // perform actions on the data source here
        });
    }
});
Show Example:
AngularJS
Knockout
jQuery

In this example, the Sparkline widget refreshes itself automatically when its data source is updated. The data source is declared as a variable of the scope and bound to the widget using the bindingOptions object.


                                    

                                    

To see this example, change the binding approach to AngularJS.


                                    

                                    

To see this example, change the binding approach to AngularJS.


                                    

                                    

Using the Data Library

For a read-write access to data, use a Store directly. To obtain a store instance from a DataSource, call its store() method.

JavaScript
var store = dataSource.store();

To update a data item specified by a key, use the update(key, values) method of a store instance.

JavaScript
store.update(1, { value: "new value" })
    .done(function(values) {
        // handle successful updating
    })
    .fail(function(error) {
        // handle an error
    });

Note that the second argument of the update(key, values) method contains only the options whose values should be changed in the data item, but not the entire item, because it will be merged with the original item object. Before updating, you may need to obtain the required item using the byKey(key) method of a store instance.

After a store has been updated, call the load() method of the DataSource object to update data in your widget as well.

JavaScript
dataSource.load();

For details on data modification in the Data Library, refer to the Data Modification topic.

Show Example:
AngularJS
Knockout
jQuery

This example shows how data in the Chart and PieChart widgets can be updated using the Data Library. Here, these widgets are bound to a DataSource object. When you click one of the buttons located below the widgets, an ArrayStore that lies under the DataSource object is updated. The load() method of the DataSource object must be called in order for widgets reflect changes made in the ArrayStore.


                                    

                                    

This example shows how data in the Chart and PieChart widgets can be updated using the Data Library. Here, these widgets are bound to a DataSource object. When you click one of the buttons located below the widgets, an ArrayStore that lies under the DataSource object is updated. The load() method of the DataSource object must be called in order for widgets reflect changes made in the ArrayStore.


                                    

                                    

This example shows how data in the Chart and PieChart widgets can be updated using the Data Library. Here, these widgets are bound to a DataSource object. When you click one of the buttons located below the widgets, an ArrayStore that lies under the DataSource object is updated. The load() method of the DataSource object must be called in order for widgets reflect changes made in the ArrayStore.