From dc709f801336557a739be69d156de76020739dda Mon Sep 17 00:00:00 2001 From: Vlada Skorohodova <94827090+vladaskorohodova@users.noreply.github.com> Date: Mon, 13 Jun 2022 11:54:54 +0300 Subject: [PATCH] Charts: update the 'Load Data On Demand' demo description (#1896) --- .../Charts/LoadDataOnDemand/description.md | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/JSDemos/Demos/Charts/LoadDataOnDemand/description.md b/JSDemos/Demos/Charts/LoadDataOnDemand/description.md index b7edc766a95..49ad7cd6bab 100644 --- a/JSDemos/Demos/Charts/LoadDataOnDemand/description.md +++ b/JSDemos/Demos/Charts/LoadDataOnDemand/description.md @@ -1 +1,27 @@ -In this demo, the chart loads data as you pan it. Once a data block is loaded, it stays in memory to reduce requests to the server. \ No newline at end of file +In this demo, the [range area](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/RangeArea/) Chart loads data as you pan it. Once the component loads a data block, this data stays in memory to reduce requests to the server. To implement this functionality, do the following: + +1. Configure a data source. + + - Assign a [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) with an empty [store](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/store/) to the Chart [dataSource](/Documentation/ApiReference/UI_Components/dxChart/Configuration/#dataSource) property. + + - Set the [sort](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#sort) property to `date`. + + - Disable the [paginate](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/#paginate) property to prevent data from partitioning. + +2. Configure the Chart to support on-demand data loading. + + - Set the [visualRangeUpdateMode](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/#visualRangeUpdateMode) property to `keep`. + + - Specify a [loadingIndicator](/Documentation/ApiReference/UI_Components/dxChart/Configuration/loadingIndicator/). + + - Specify the initial [visualRange](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/visualRange/). + + - Implement a function that respond to user pan operations and tracks [visualRange](/Documentation/ApiReference/UI_Components/dxChart/Configuration/argumentAxis/visualRange/) changes. If a user changed the visual range, initiate a request for additional data. + +3. Implement functions that load the data. + + - In this demo, Chart displays daily information. If a user pan the Chart left or right more than half a day, additional data starts to load. The `onVisualRangeChanged` initiates this procedure. + + - The `uploadDataByVisualRange` function analyzes the starting and ending points of the visual range and the bounds of already loaded data. If necessary, it calls the `getDataFrame` function to obtain new data points. Finally, it reloads the [DataSource](/Documentation/ApiReference/Data_Layer/DataSource/) and saves the current visual range. + + - The `getDataFrame` Ajax request gets the new data frame from the server.