JavaScript/jQuery Sankey - Web API Service
DevExtreme provides the DevExtreme.AspNet.Data extension to access an ASP.NET Web API service. This extension consists of two parts: the server-side part implements data processing on the server according to the DevExtreme UI components' protocol; the client-side part creates and configures a CustomStore to access the server from the client. The following code shows how to use the extension's client-side createStore method:
jQuery
index.js
$(function() {
const serviceUrl = "https://url/to/my/service";
$("#sankeyContainer").dxSankey({
dataSource: DevExpress.data.AspNet.createStore({
key: ['from', 'to'],
loadUrl: serviceUrl + "/GetAction"
}),
// ...
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-sankey [dataSource]="store">
<!-- ... -->
</dx-sankey>
import { Component } from '@angular/core';
import CustomStore from 'devextreme/data/custom_store';
import { createStore } from "devextreme-aspnet-data-nojquery";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
store: CustomStore;
constructor() {
const serviceUrl = "https://url/to/my/service";
this.store = createStore({
key: ['from', 'to'],
loadUrl: serviceUrl + "/GetAction"
});
}
}
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="store">
<!-- ... -->
</DxSankey>
</template>
<script>
import DxSankey from 'devextreme-vue/sankey';
import { createStore } from "devextreme-aspnet-data-nojquery";
const serviceUrl = "https://url/to/my/service";
const store = createStore({
key: ['from', 'to'],
loadUrl: serviceUrl + "/GetAction"
});
export default {
components: {
DxSankey
},
data() {
return {
store
}
}
}
</script>React
App.js
import Sankey from 'devextreme-react/sankey';
import { createStore } from "devextreme-aspnet-data-nojquery";
const serviceUrl = "https://url/to/my/service";
const store = createStore({
key: ['from', 'to'],
loadUrl: serviceUrl + "/GetAction"
});
export default function App() {
return (
<Sankey dataSource={store}>
{/* ... */}
</Sankey>
);
}
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.