React PieChart - Custom Sources

To bind DevExtreme PieChart to a custom data source, implement a CustomStore. You can use the following extensions to configure CustomStore and implement server-side data processing to bind DevExtreme components to Web API and MongoDB services:

You need to configure the CustomStore in detail for accessing a server built on another technology. Data in this situation can be processed on the client or server. In the former case, switch the CustomStore to the raw mode and load all data from the server in the load function as shown in the next example.

jQuery
index.js
$("#pieChartContainer").dxPieChart({
    dataSource: new DevExpress.data.DataSource({
        store: new DevExpress.data.CustomStore({
            loadMode: "raw",
            load: function () {
                return $.getJSON('https://mydomain.com/MyDataService');
            }
        }),
        paginate: false,
    })
});
Angular
app.component.ts
app.component.html
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { DataSource, CustomStore } from "devextreme-angular/common/data";
import { lastValueFrom } from "rxjs";
import { DxPieChartComponent } from "devextreme-angular/ui/pie-chart";

@Component({
    imports: [DxPieChartComponent],
    // ...
})
export class AppComponent {
    pieChartDataSource: DataSource;
    constructor(httpClient: HttpClient) {
        this.pieChartDataSource = new DataSource({
            store: new CustomStore({
                loadMode: "raw",
                load: () => {
                    return lastValueFrom(httpClient.get('https://mydomain.com/MyDataService'));
                }
            }),
            paginate: false,
        });
    }
}
<dx-pie-chart
    [dataSource]="pieChartDataSource"
></dx-pie-chart>
Vue
App.vue
<template>
    <DxPieChart :data-source="pieChartDataSource" />
</template>

<script setup lang="ts">
import { DxPieChart } from "devextreme-vue/pie-chart";
import { DataSource, CustomStore } from "devextreme-vue/common/data";
import "whatwg-fetch";

function handleErrors(response) {
    if (!response.ok)
        throw Error(response.statusText);
    return response;
}

const pieChartDataSource = new DataSource({
    store: new CustomStore({
        loadMode: "raw",
        load: () => {
            return fetch("https://mydomain.com/MyDataService")
                .then(handleErrors);
        }
    }),
    paginate: false,
});
</script>
React
App.tsx
import React from "react";
import { PieChart } from "devextreme-react/pie-chart";
import { DataSource, CustomStore } from "devextreme-react/common/data";
import "whatwg-fetch";

function handleErrors(response) {
    if (!response.ok)
        throw Error(response.statusText);
    return response;
}

const pieChartDataSource = new DataSource({
    store: new CustomStore({
        loadMode: "raw",
        load: () => {
            return fetch("https://mydomain.com/MyDataService")
                .then(handleErrors);
        }
    }),
    paginate: false,
});

function App() {
    return (
        <PieChart dataSource={pieChartDataSource} />
    );
}

In the latter case, use the CustomStore's load function to send data processing settings to the server. These settings are passed as a parameter to the load function and depend on the operations (filtering, sorting, etc.) that you have enabled in the DataSource. The following settings are relevant for the PieChart:

After receiving these settings, the server should apply them to data and send back an object with the following structure:

Code
{
    data: [ ... ] // result data objects
}

This example shows how to make a query for data.

jQuery
index.js
$(function() {
    $("#pieChartContainer").dxPieChart({
        dataSource: new DevExpress.data.DataSource({
            store: new DevExpress.data.CustomStore({
                load: function(loadOptions) {
                    const d = $.Deferred(),
                        params = {};
                    [
                        "sort",
                        "filter",
                        "searchExpr",
                        "searchOperation",
                        "searchValue"
                    ].forEach(function(i) {
                        if(i in loadOptions && isNotEmpty(loadOptions[i]))
                            params[i] = JSON.stringify(loadOptions[i]);
                    });
                    $.getJSON("https://mydomain.com/MyDataService", params)
                        .done(function(result) {
                            // Here, you can perform operations unsupported by the server
                            // or any other operations on the retrieved data
                            d.resolve(result.data);
                        });
                    return d.promise();
                }
            }),
            paginate: false
        })
    });
});
function isNotEmpty(value) {
    return value !== undefined && value !== null && value !== "";
}
Angular
app.component.ts
app.component.html
app.module.ts
import { Component, Inject } from "@angular/core";
import { HttpClient, HttpParams } from "@angular/common/http";
import DataSource from "devextreme/data/data_source";
import CustomStore from "devextreme/data/custom_store";
import { lastValueFrom } from "rxjs";
// ...
export class AppComponent {
    pieChartDataSource: any = {};
    constructor(@Inject(HttpClient) httpClient: HttpClient) {
        function isNotEmpty(value: any): boolean {
            return value !== undefined && value !== null && value !== "";
        }
        this.pieChartDataSource = new DataSource({
            store: new CustomStore({
                load: (loadOptions) => {
                    let params: HttpParams = new HttpParams();
                    [
                        "sort",
                        "filter",
                        "searchExpr",
                        "searchOperation",
                        "searchValue"
                    ].forEach(function(i) {
                        if(i in loadOptions && isNotEmpty(loadOptions[i]))
                            params = params.set(i, JSON.stringify(loadOptions[i]));
                    });
                    return lastValueFrom(httpClient.get("https://mydomain.com/MyDataService", { params: params }))
                        .then(result => {
                            // Here, you can perform operations unsupported by the server
                            // or any other operations on the retrieved data
                            return result.data;
                        });
                }
            }),
            paginate: false
        });
    }
}
<dx-pie-chart ...
    [dataSource]="pieChartDataSource">
</dx-pie-chart>
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { DxPieChartModule } from "devextreme-angular";

@NgModule({
    imports: [
        // ...
        DxPieChartModule,
        HttpClientModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxPieChart ...
        :data-source="pieChartDataSource" />
</template>

<script setup lang="ts">
import DxPieChart from "devextreme-vue/pie-chart";
import CustomStore from "devextreme/data/custom_store";
import DataSource from "devextreme/data/data_source";
import 'whatwg-fetch';

function isNotEmpty(value) {
    return value !== undefined && value !== null && value !== "";
}
function handleErrors(response) {
    if (!response.ok)
        throw Error(response.statusText);
    return response;
}
const pieChartDataSource = new DataSource({
    store: new CustomStore({
        load: (loadOptions) => {
            let params = "?";
            [
                "sort",
                "filter",
                "searchExpr",
                "searchOperation",
                "searchValue"
            ].forEach(function(i) {
                if(i in loadOptions && isNotEmpty(loadOptions[i]))
                    params += `${i}=${JSON.stringify(loadOptions[i])}&`;
            });
            params = params.slice(0, -1);
            return fetch(`https://mydomain.com/MyDataService${params}`)
                .then(handleErrors)
                .then(response => response.json())
                .then((result) => {
                    // Here, you can perform operations unsupported by the server
                    // or any other operations on the retrieved data
                    return result.data;
                });
        }
    }),
    paginate: false
});
</script>
React
App.tsx
import React from "react";
import { PieChart } from "devextreme-react/pie-chart";
import CustomStore from "devextreme/data/custom_store";
import DataSource from "devextreme/data/data_source";
import 'whatwg-fetch';

function isNotEmpty(value) {
    return value !== undefined && value !== null && value !== "";
}
function handleErrors(response) {
    if (!response.ok)
        throw Error(response.statusText);
    return response;
}
const pieChartDataSource = new DataSource({
    store: new CustomStore({
        load: (loadOptions) => {
            let params = "?";
            [
                "sort",
                "filter",
                "searchExpr",
                "searchOperation",
                "searchValue"
            ].forEach(function(i) {
                if(i in loadOptions && isNotEmpty(loadOptions[i]))
                    params += `${i}=${JSON.stringify(loadOptions[i])}&`;
            });
            params = params.slice(0, -1);
            return fetch(`https://mydomain.com/MyDataService${params}`)
                .then(handleErrors)
                .then(response => response.json())
                .then((result) => {
                    // Here, you can perform operations unsupported by the server
                    // or any other operations on the retrieved data
                    return result.data;
                });
        }
    }),
    paginate: false
});

function App() {
    return (
        <PieChart ...
            dataSource={pieChartDataSource}>
        </PieChart>
    );
}

export default App;
See Also