React PieChart - Custom Sources
Access to a custom data source is configured using the CustomStore component. DevExtreme provides ASP.NET and PHP extensions that help configure it and implement server-side data processing. You can also use the third-party extension for MongoDB.
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.
- 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 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
- });
- class App extends React.Component {
- render() {
- return (
- <PieChart ...
- dataSource={pieChartDataSource}>
- </PieChart>
- );
- }
- }
- export default App;
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:
Sorting settings: sort
Present if the DataSource's sort property is set.Filtering settings: filter
Present if the DataSource's filter property is set.Searching settings: searchExpr, searchOperation, and searchValue
Present if corresponding properties are set in the DataSource.
After receiving these settings, the server should apply them to data and send back an object with the following structure:
- {
- data: [ ... ] // result data objects
- }
This example shows how to make a query for data.
- 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
- });
- class App extends React.Component {
- render() {
- return (
- <PieChart ...
- dataSource={pieChartDataSource}>
- </PieChart>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.