JavaScript/jQuery Sankey - PHP Service
DevExtreme provides the DevExtreme-PHP-Data extension that implements data processing on a PHP server according to the DevExtreme UI components' protocol. To access the server from the client, configure the CustomStore as described in the Custom Sources article or use the createStore method. This method is a part of the DevExtreme.AspNet.Data extension. The following code shows how to use it:
jQuery
$(function() { const serviceUrl = "https://url/to/my/service.php"; $("#sankeyContainer").dxSankey({ dataSource: DevExpress.data.AspNet.createStore({ key: ['from', 'to'], loadUrl: serviceUrl }), // ... }); });
Angular
<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.php"; this.store = createStore({ key: ['from', 'to'], loadUrl: serviceUrl }); } }
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
<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.php"; const store = createStore({ key: ['from', 'to'], loadUrl: serviceUrl }); export default { components: { DxSankey }, data() { return { store } } } </script>
React
import Sankey from 'devextreme-react/sankey'; import { createStore } from "devextreme-aspnet-data-nojquery"; const serviceUrl = "https://url/to/my/service.php"; const store = createStore({ key: ['from', 'to'], loadUrl: serviceUrl }); export default function App() { return ( <Sankey dataSource={store}> {/* ... */} </Sankey> ); }
If you have technical questions, please create a support ticket in the DevExpress Support Center.