Vue Common - Update Data

When a data source assigned to the Chart, PieChart or Sparkline UI component is changed, the UI component 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 UI component update. Before you begin, please make sure that you know the basics of configuring a data visualization UI component using jQuery, Knockout or AngularJS.

When using jQuery, rebind the data source to your UI component in order to update data in this UI component. 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 property that must be changed and a new value for this property.

pieChart.option('dataSource', updatedDataSource);

After the property is changed, your UI component will be refreshed automatically.

The dataSource property, like any other property from the first level of the UI component's configuration object, can be declared as an observable variable. Any changes in the property value will be detected and the UI component 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 UI component when using AngularJS, provide two-way binding between the dataSource property and the corresponding field of the $scope object. For this purpose, add the bindingOptions field to the UI component configuration object. This field is assigned an object containing properties that require two-way binding. In your case, the dataSource is such an property. 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 UI component 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 UI component 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 properties 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 reload() method of the DataSource object to update data in your UI component as well.

dataSource.reload();

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