All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery PieChart - PHP Service

DevExtreme provides the DevExtreme-PHP-Data extension that implements data processing on a PHP server according to the protocol the PieChart uses. 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 this method.

jQuery
index.js
$(function() {
    const serviceUrl = "https://url/to/my/service.php";

    $("#pieChartContainer").dxPieChart({
        dataSource: DevExpress.data.AspNet.createStore({
            key: 'ID',
            loadUrl: serviceUrl
        }),
        // ...
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-pie-chart [dataSource]="store">
    <!-- ... -->
</dx-pie-chart>
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: 'ID',
            loadUrl: serviceUrl
        });
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxPieChartModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxPieChartModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxPieChart :data-source="store">
        <!-- ... -->
    </DxPieChart>
</template>

<script>
import DxPieChart from 'devextreme-vue/pie-chart';
import { createStore } from "devextreme-aspnet-data-nojquery";

const serviceUrl = "https://url/to/my/service.php";

const store = createStore({
    key: 'ID',
    loadUrl: serviceUrl
});

export default {
    components: {
        DxPieChart
    },
    data() {
        return {
            store
        }
    }
}
</script>
React
App.js
import PieChart from 'devextreme-react/pie-chart';
import { createStore } from "devextreme-aspnet-data-nojquery";

const serviceUrl = "https://url/to/my/service.php";

const store = createStore({
    key: 'ID',
    loadUrl: serviceUrl
});

export default function App() {
    return (
        <PieChart dataSource={store}>
            {/* ... */}
        </PieChart>
    );
}