The page you are viewing does not exist in version 16.1. This link will take you to the Overview page.

15.2

The page you are viewing does not exist in version 15.2. This link will take you to the Overview page.

15.1

The page you are viewing does not exist in version 15.1. This link will take you to the Overview page.

14.2

The page you are viewing does not exist in version 14.2. This link will take you to the Overview page.

14.1

The page you are viewing does not exist in version 14.1. This link will take you to the Overview page.

13.2

The page you are viewing does not exist in version 13.2. This link will take you to the Overview page.

13.1

The page you are viewing does not exist in version 13.1. This link will take you to the Overview page.

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.

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.

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.

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.

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.

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.

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.