DevExtreme React - 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:
- 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"
- });
- });
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:
- 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()
- });
- });
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.