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.
jQuery
index.js
$(function() { $("#sankeyContainer").dxSankey({ dataSource: new DevExpress.data.DataSource({ store: { type: 'odata', url: 'https://www.example.com/dataservices/odata/targetData', key: ['from', 'to'] }, paginate: false }), // ... }); });
Angular
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 { }
Vue
App.vue
<template> <DxSankey :data-source="sankeyDataSource"> <!-- ... --> </DxSankey> </template> <script> import DxSankey from 'devextreme-vue/sankey'; import 'devextreme/data/odata/store'; import DataSource from 'devextreme/data/data_source'; const sankeyDataSource = new DataSource({ store: { type: 'odata', url: 'https://www.example.com/dataservices/odata/targetData', key: ['from', 'to'] }, paginate: false }); export default { components: { DxSankey }, data() { return { sankeyDataSource } } } </script>
React
App.js
import Sankey from 'devextreme-react/sankey'; import 'devextreme/data/odata/store'; import DataSource from 'devextreme/data/data_source'; const sankeyDataSource = new DataSource({ store: { type: 'odata', url: 'https://www.example.com/dataservices/odata/targetData', key: ['from', 'to'] }, paginate: false }); export default function App() { return ( <Sankey dataSource={sankeyDataSource}> {/* ... */} </Sankey> ); }
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.