DevExtreme DataSource
To get the DataSource instance, call the Sankey's getDataSource() method:
jQuery
var sankeyDataSource = $("#sankeyContainer").dxSankey("getDataSource");
AngularJS
angular.module("DemoApp", ["dx"]) .controller("DemoController", function($scope) { $scope.sankeyDataSource = {}; $scope.sankeyOptions = { // ... onInitialized: function(e) { $scope.sankeyDataSource = e.component.getDataSource(); } }; });
Knockout
var viewModel = { sankeyDataSource: {}, sankeyOptions: { // ... onInitialized: function(e) { viewModel.sankeyDataSource = e.component.getDataSource(); } } }; ko.applyBindings(viewModel);
Angular
import { ..., ViewChild } from "@angular/core"; import { DxSankeyModule, DxSankeyComponent } from "devextreme-angular"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { @ViewChild(DxSankeyComponent, { static: false }) sankey: DxSankeyComponent; // Prior to Angular 8 // @ViewChild(DxSankeyComponent) sankey: DxSankeyComponent; sankeyDataSource: DataSource; getDataSource() { this.sankeyDataSource = this.sankey.instance.getDataSource(); } } @NgModule({ imports: [ // ... DxSankeyModule ], // ... })
Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Sankey 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
- Data Layer - Overview
- Data Layer - DataSource Examples
jQuery
You can use the standard methods to make changes to the array. Then, use the option(optionName, optionValue) method to reassign the updated array to the Sankey.
var sankeyData = [ { source: "Brazil", target: "Spain", weight: 4 }, { source: "Brazil", target: "Portugal", weight: 5 }, { source: "Brazil", target: "England", weight: 2 }, { source: "Canada", target: "Portugal", weight: 2 }, { source: "Canada", target: "England", weight: 1 }, { source: "Mexico", target: "Portugal", weight: 9 }, { source: "Mexico", target: "Spain", weight: 5 } ]; sankeyData.push({ source: "Mexico", target: "Spain", weight: 2 }); // Reassigns the "sankeyData" array to the Sankey $("#sankeyContainer").dxSankey("option", "dataSource", sankeyData);
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 Sankey is updated accordingly.
<dx-sankey [dataSource]="sankeyData"> </dx-sankey>
import { DxSankeyModule } from "devextreme-angular"; // ... export class AppComponent { sankeyData: Array<{ source: string, target: string, weight: number }> = [ { source: "Brazil", target: "Spain", weight: 4 }, { source: "Brazil", target: "Portugal", weight: 5 }, { source: "Brazil", target: "England", weight: 2 }, { source: "Canada", target: "Portugal", weight: 2 }, { source: "Canada", target: "England", weight: 1 }, { source: "Mexico", target: "Portugal", weight: 9 }, { source: "Mexico", target: "Spain", weight: 5 } ]; } @NgModule({ imports: [ // ... DxSankeyModule ], // ... })
AngularJS
Declare two-way binding between the dataSource option and the scope property that contains an array. To do this, configure the bindingOptions object in the Sankey as follows:
<div ng-controller="DemoController"> <div dx-sankey="{ bindingOptions: { dataSource: 'sankeyData' } }"></div> </div>
angular.module("DemoApp", ["dx"]) .controller("DemoController", function($scope) { $scope.sankeyData = [ { source: "Brazil", target: "Spain", weight: 4 }, { source: "Brazil", target: "Portugal", weight: 5 }, { source: "Brazil", target: "England", weight: 2 }, { source: "Canada", target: "Portugal", weight: 2 }, { source: "Canada", target: "England", weight: 1 }, { source: "Mexico", target: "Portugal", weight: 9 }, { source: "Mexico", target: "Spain", weight: 5 } ]; });
Now, whenever an item is added or removed from the sankeyData
array, the Sankey is updated accordingly. If you need to track changes in objects, configure the bindingOptions object as follows:
<div ng-controller="DemoController"> <div dx-sankey="{ bindingOptions: { dataSource: { dataPath: 'sankeyData', deep: true } } }"></div> </div>
In this case, the Sankey uses the $watch listener instead of the default $watchCollection listener. Note that this can impact the Sankey'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 Sankey is updated accordingly.
<div id="sankeyContainer" data-bind="dxSankey: { dataSource: sankeyData }"></div>
var viewModel = { fruits: ko.observableArray([ { source: "Brazil", target: "Spain", weight: 4 }, { source: "Brazil", target: "Portugal", weight: 5 }, { source: "Brazil", target: "England", weight: 2 }, { source: "Canada", target: "Portugal", weight: 2 }, { source: "Canada", target: "England", weight: 1 }, { source: "Mexico", target: "Portugal", weight: 9 }, { source: "Mexico", target: "Spain", weight: 5 } ]) }; ko.applyBindings(viewModel);
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.