All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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