All docs
V19.1
20.2
20.1
19.2
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
17.1
The page you are viewing does not exist in version 17.1. This link will take you to the root page.
16.2
The page you are viewing does not exist in version 16.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Array Only

To bind the Sankey to an array, pass this array to the dataSource option. The array should contain objects with the source, target, and weight fields (default names). You can use the sourceField, targetField, and weightField options to specify other names:

jQuery
JavaScript
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
TypeScript
HTML
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
JavaScript
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
TypeScript
HTML
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>

View Demo

See Also