React Sankey - Array Only
To bind the Sankey to an array, pass this array to the dataSource property. The array should contain objects with the source
, target
, and weight
fields (default names). You can use the sourceField, targetField, and weightField properties to specify other names:
jQuery
var sankeyData = [ { from: "Brazil", to: "Spain", weight: 4 }, { from: "Brazil", to: "Portugal", weight: 5 }, { from: "Brazil", to: "England", weight: 2 }, { from: "Canada", to: "Portugal", weight: 2 }, { from: "Canada", to: "England", weight: 1 }, { from: "Mexico", to: "Portugal", weight: 9 }, { from: "Mexico", to: "Spain", weight: 5 } ]; $(function() { $("#sankeyContainer").dxSankey({ dataSource: sankeyData, sourceField: "from", targetField: "to" }); });
Angular
import { DxSankeyModule } from "devextreme-angular"; // ... export class AppComponent { sankeyData: Array<{ from: string, to: string, weight: number }> = [ { from: "Brazil", to: "Spain", weight: 4 }, { from: "Brazil", to: "Portugal", weight: 5 }, { from: "Brazil", to: "England", weight: 2 }, { from: "Canada", to: "Portugal", weight: 2 }, { from: "Canada", to: "England", weight: 1 }, { from: "Mexico", to: "Portugal", weight: 9 }, { from: "Mexico", to: "Spain", weight: 5 } ]; } @NgModule({ imports: [ // ... DxSankeyModule ], // ... })
<dx-sankey [dataSource]="sankeyData" sourceField="from" targetField="to"> </dx-sankey>
You can create a Query if objects in the array should be processed (sorted, filtered, and so on). For example, in the following code, a Query filters the sankeyData
array to exclude objects whose weight
is less than 3:
jQuery
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 } ]; $(function() { $("#sankeyContainer").dxSankey({ dataSource: DevExpress.data.query(sankeyData).filter([ "weight", ">", 3 ]).toArray() }); });
Angular
import { DxSankeyModule } from "devextreme-angular"; import query from "devextreme/data/query"; // ... 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 } ]; getFilteredData() { return query(this.sankeyData).filter([ "weight", ">", 3 ]).toArray(); } } @NgModule({ imports: [ // ... DxSankeyModule ], // ... })
<dx-sankey [dataSource]="getFilteredData()"> </dx-sankey>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.