React 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