DevExtreme DataSource
This technique is universal for any data source as anything passed to the dataSource option of the PieChart ends up wrapped in the DevExtreme DataSource. To get the DataSource instance, call the getDataSource() method of the PieChart.
jQuery
var ds = $("#pieChartContainer").dxPieChart("getDataSource");
AngularJS
angular.module('DemoApp', ['dx']) .controller('DemoController', function ($scope) { $scope.ds = {}; $scope.pieChartOptions = { // ... onInitialized: function (e) { $scope.ds = e.component.getDataSource(); } }; });
Knockout
var viewModel = { ds: {}, pieChartOptions: { // ... onInitialized: function (e) { viewModel.ds = e.component.getDataSource(); } } }; ko.applyBindings(viewModel);
Angular
import { ..., ViewChild } from '@angular/core'; import { DxPieChartModule, DxPieChartComponent } from 'devextreme-angular'; // ... export class AppComponent { @ViewChild(DxPieChartComponent) pieChart: DxPieChartComponent; ds: any = {}; getDataSource() { this.ds = this.pieChart.instance.getDataSource(); } } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
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 of the DataSource instance to make the PieChart reflect the changes.
ds.store().update("Oranges", { count: 10 }); ds.store().remove("Apples"); ds.load();
See Also
- Call Methods: jQuery | Angular | AngularJS | Knockout | ASP.NET MVC
- Data Layer - Overview
- Data Layer - DataSource Examples
jQuery
Make changes to the array using standard methods. Then, reassign the updated array to the PieChart using the option(optionName, optionValue) method.
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 PieChart $("#pieChartContainer").dxPieChart("option", "dataSource", fruits);
See Also
Angular
Enclose the dataSource option in square brackets to bind it to an array using one-way binding. Now, whenever an item is added or removed from the array, the PieChart will be updated accordingly.
<dx-pie-chart [dataSource]="fruits"></dx-pie-chart>
import { DxPieChartModule } from 'devextreme-angular'; // ... export class AppComponent { fruits = [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 } ]; } @NgModule({ imports: [ // ... DxPieChartModule ], // ... })
See Also
AngularJS
Declare two-way binding between the dataSource option and the scope property that contains an array. For this, configure the bindingOptions object of the PieChart as follows.
<div ng-controller="DemoController"> <div dx-pie-chart="{ bindingOptions: { dataSource: 'fruits' } }"></div> </div>
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 PieChart will be updated accordingly. If you need to track changes in objects, configure the bindingOptions object as follows.
<div ng-controller="DemoController"> <div dx-pie-chart="{ bindingOptions: { dataSource: { dataPath: 'fruits', deep: true } } }"></div> </div>
In this case, the PieChart will use the $watch listener instead of the default $watchCollection listener. Note that the use of the $watch listener may impact the PieChart's peformance.
See Also
Knockout
Declare the array observable and bind the dataSource option to it. Whenever an item is added or removed from this array, the PieChart will be updated accordingly.
<div id="pieChartContainer" data-bind="dxPieChart: { dataSource: fruits }"></div>
var viewModel = { fruits: ko.observableArray([ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 } ]) }; ko.applyBindings(viewModel);
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.