Remote Data Binding in React Chart

Remote data binding connects UI components directly to server-side data sources, allowing applications to fetch, display, and manipulate data stored on remote servers.

Remote data binding using useEffect and Fetch API

The Chart component supports remote data binding using React’s useEffect and the native Fetch API. It allows seamless integration with external data services like OData by directly assigning fetched data to the chart. This approach ensures a lightweight and flexible way to populate the chart with dynamic, server-side data.

Remote data binding using Syncfusion DataManager

Remote data binding connects UI components to external sources like APIs for efficient handling of large datasets. The @syncfusion/react-data package provides built-in adaptors, which are responsible for managing communication between the UI and the service. Configure DataManager with a url for the endpoint and an adaptor to handle data requests and responses.

Key features of Remote data binding

• Adaptors for different backends: DataManager provides built-in adaptors for OData, REST, WebAPI, and custom services, each designed to meet specific server protocol requirements.

Overview of DataManager Adaptors

URL Adaptor

The UrlAdaptor is the foundation for connecting UI controls to custom APIs or remote services via URLs. It is ideal for scenarios requiring tailored logic for data handling and CRUD operations. The adaptor returns data in a result and count format, optimized for display in the chart.

Example: Custom API services with unique data processing needs.

ODataV4 Adaptor

The ODataV4Adaptor is designed for OData v4 services, offering robust support for data fetching and CRUD operations in the chart. It ensures compatibility with the advanced features of OData v4.

Web API Adaptor

The WebApiAdaptor, an extension of ODataAdaptor, is tailored for Web APIs with OData endpoints. It ensures efficient communication between the Syncfusion Chart component and OData-based APIs, provided the endpoint supports OData-formatted queries.