DevExtreme Vue - JSON Data

To bind the Sankey to data in a JSON format, assign the data's URL to the dataSource option.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        dataSource: "http://www.example.com/dataservices/data.json",
        sourceField: "from",
        targetField: "to",
        weightField: "amount"
    });
});
Angular
HTML
TypeScript
<dx-sankey
    dataSource="http://www.example.com/dataservices/data.json"
    sourceField="from"
    targetField="to"
    weightField="amount">
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})

Note that you can also use a jQuery.ajax()-supported JSONP callback parameter.

jQuery
JavaScript
$(function() {
    $("#sankeyContainer").dxSankey({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
        sourceField: "from",
        targetField: "to",
        weightField: "amount"
    });
});
Angular
HTML
TypeScript
<dx-sankey
    dataSource="http://www.example.com/dataservices/jsonpdata?callback=?"
    sourceField="from"
    targetField="to"
    weightField="amount">
</dx-sankey>
import { DxSankeyModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSankeyModule
    ],
    // ...
})

You should implement the CustomStore if you need to process data after obtaining it. Refer to the Custom Sources topic for more information.

See Also