JavaScript/jQuery Sankey - JSON Data
To bind the Sankey to data in a JSON format, assign the data's URL to the dataSource property.
jQuery
index.js
$(function() { $("#sankeyContainer").dxSankey({ dataSource: "http://www.example.com/dataservices/data.json", // ... }); });
Angular
app.component.html
app.module.ts
<dx-sankey dataSource="http://www.example.com/dataservices/data.json"> <!-- ... --> </dx-sankey>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxSankeyModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxSankeyModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue
<template> <DxSankey data-source="http://www.example.com/dataservices/data.json"> <!-- ... --> </DxSankey> </template> <script> import DxSankey from 'devextreme-vue/sankey'; export default { components: { DxSankey }, data() { return { // ... } } } </script>
React
App.js
import Sankey from 'devextreme-react/sankey'; export default function App() { return ( <Sankey dataSource="http://www.example.com/dataservices/data.json"> {/* ... */} </Sankey> ); }
Note that you can also use a JSONP callback parameter.
jQuery
index.js
$(function() { $("#sankeyContainer").dxSankey({ dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?", // ... }); });
Angular
app.component.html
app.module.ts
<dx-sankey dataSource="http://www.example.com/dataservices/jsonpdata?callback=?"> <!-- ... --> </dx-sankey>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxSankeyModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxSankeyModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue
<template> <DxSankey data-source="http://www.example.com/dataservices/jsonpdata?callback=?"> <!-- ... --> </DxSankey> </template> <script> import DxSankey from 'devextreme-vue/sankey'; export default { components: { DxSankey }, data() { return { // ... } } } </script>
React
App.js
import Sankey from 'devextreme-react/sankey'; export default function App() { return ( <Sankey dataSource="http://www.example.com/dataservices/jsonpdata?callback=?"> {/* ... */} </Sankey> ); }
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.