DevExtreme DataSource
To get the DataSource instance, call the Chart's getDataSource() method:
jQuery
var ds = $("#chartContainer").dxChart("getDataSource");
AngularJS
angular.module('DemoApp', ['dx']) .controller('DemoController', function ($scope) { $scope.ds = {}; $scope.chartOptions = { // ... onInitialized: function (e) { $scope.ds = e.component.getDataSource(); } }; });
Knockout
var viewModel = { ds: {}, chartOptions: { // ... onInitialized: function (e) { viewModel.ds = e.component.getDataSource(); } } }; ko.applyBindings(viewModel);
Angular
import { ..., ViewChild } from "@angular/core"; import { DxChartModule, DxChartComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxChartComponent, { static: false }) chart: DxChartComponent; // Prior to Angular 8 // @ViewChild(DxChartComponent) chart: DxChartComponent; ds: any = {}; getDataSource() { this.ds = this.chart.instance.getDataSource(); } } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Chart will be updated automatically.
ds.store().push([ { type: "update", key: "Oranges", data: { count: 10 } }, { type: "remove", key: "Apples" } ]);
See Also
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- DevExtreme Data Layer - Overview
- DevExtreme Data Layer - DataSource Examples
jQuery
Make changes to the array using standard methods. Then, reassign the updated array to the Chart 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 "Chart" $("#chartContainer").dxChart("option", "dataSource", fruits);
See Also
Angular
Enclose the dataSource property 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 Chart will be updated accordingly.
<dx-chart [dataSource]="fruits"></dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { fruits = [ { fruit: 'Apples', count: 10 }, { fruit: 'Oranges', count: 12 }, { fruit: 'Lemons', count: 15 } ]; } @NgModule({ imports: [ // ... DxChartModule ], // ... })
AngularJS
Declare two-way data binding between the dataSource property and the scope property that contains an array. For this, configure the bindingOptions object of the Chart as follows.
<div ng-controller="DemoController"> <div dx-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 Chart will be updated accordingly. If you need to track changes in objects, configure the bindingOptions object as follows.
<div ng-controller="DemoController"> <div dx-chart="{ ... bindingOptions: { dataSource: { dataPath: 'fruits', deep: true } } }"></div> </div>
In this case, the Chart will use the $watch listener instead of the default $watchCollection listener. Note that the use of the $watch listener may impact the Chart's peformance.
See Also
Knockout
Declare the array observable and bind the dataSource property to it. Whenever an item is added or removed from this array, the Chart will be updated accordingly.
<div id="chartContainer" data-bind="dxChart: { 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.