DevExtreme Angular - JSON Data

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

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.

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