DevExtreme React - 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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.