Vue Common - 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.

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.

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.

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.

pieChart.option('dataSource', updatedDataSource);

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

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.

<div id="chartContainer" style="height:400px; width: 600px" data-bind="dxChart: {
    dataSource: observableChartDataSource
    ...
}"></div>

var myViewModel = {
    observableChartDataSource: ko.observableArray(data),
    //...
};
ko.applyBindings(myViewModel);

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.

<div ng-controller="myController">
    <div dx-chart="{
        ...
        bindingOptions: {
            dataSource: 'dataSource'
        }
    }"></div>
</div>

var myApp = angular.module('myApp', ['dx']);
myApp.controller('myController', function ($scope) {
    $scope.dataSource = dataArray;
});

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.

$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.

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

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

var store = dataSource.store();

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

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.

dataSource.load();

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