Angular Sankey - OData Service

To bind the Sankey to data from an OData service, use the ODataStore. You should declare it inside the DataSource configuration object because the Sankey UI component requires disabled pagination to prevent data from partitioning.

app.component.html
app.component.ts
app.module.ts
  • <dx-sankey [dataSource]="sankeyDataSource">
  • <!-- ... -->
  • </dx-sankey>
  • import { Component } from '@angular/core';
  • import 'devextreme/data/odata/store';
  • import DataSource from 'devextreme/data/data_source';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • sankeyDataSource = new DataSource({
  • store: {
  • type: 'odata',
  • url: 'https://www.example.com/dataservices/odata/targetData',
  • key: ['from', 'to']
  • },
  • paginate: false
  • });
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxSankeyModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxSankeyModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
See Also