jQuery 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
index.js
const 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>Vue
App.vue
<template>
<DxSankey
:data-source="sankeyData"
source-field="from"
target-field="to"
/>
</template>
<script>
import DxSankey from 'devextreme-vue/sankey';
export default {
components: {
DxSankey
},
data() {
return {
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 }
]
}
}
}
</script>React
App.js
import Sankey from 'devextreme-react/sankey';
const 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 }
];
export default function App() {
return (
<Sankey
dataSource={sankeyData}
sourceField="from"
targetField="to"
/>
);
}See Also
Feedback