Your search did not match any results.
Charts

Load Data On Demand

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.

www.kaggle.com
Backend API
Copy to CodePen
Apply
Reset
$(() => { const HALFDAY = 43200000; let packetsLock = 0; $('#chart').dxChart({ dataSource: new DevExpress.data.DataSource({ store: [], sort: 'date', paginate: false, }), title: 'Temperature in Toronto (2017)', zoomAndPan: { argumentAxis: 'pan', }, scrollBar: { visible: true, }, argumentAxis: { argumentType: 'datetime', wholeRange: [new Date(2017, 0, 1), new Date(2017, 11, 31)], visualRange: { startValue: new Date(2017, 3, 1), length: { weeks: 2, }, }, visualRangeUpdateMode: 'keep', }, valueAxis: { name: 'temperature', allowDecimals: false, title: { text: 'Temperature, °C', font: { color: '#ff950c', }, }, label: { font: { color: '#ff950c', }, }, }, series: [{ color: '#ff950c', type: 'rangeArea', argumentField: 'date', rangeValue1Field: 'minTemp', rangeValue2Field: 'maxTemp', name: 'Temperature range', }], onOptionChanged(e) { if (e.fullName === 'argumentAxis.visualRange') { onVisualRangeChanged(e.value, e.component); } }, animation: { enabled: false, }, loadingIndicator: { backgroundColor: 'none', font: { size: 14, }, }, legend: { visible: false, }, }); function onVisualRangeChanged(visualRange, component) { const items = component.getDataSource().items(); if (!items.length || items[0].date - visualRange.startValue >= HALFDAY || visualRange.endValue - items[items.length - 1].date >= HALFDAY) { uploadDataByVisualRange(visualRange, component); } } function uploadDataByVisualRange(visualRange, component) { const dataSource = component.getDataSource(); const storage = dataSource.items(); const ajaxArgs = { startVisible: getDateString(visualRange.startValue), endVisible: getDateString(visualRange.endValue), startBound: getDateString(storage.length ? storage[0].date : null), endBound: getDateString(storage.length ? storage[storage.length - 1].date : null), }; if (ajaxArgs.startVisible !== ajaxArgs.startBound && ajaxArgs.endVisible !== ajaxArgs.endBound && !packetsLock) { packetsLock += 1; component.showLoadingIndicator(); getDataFrame(ajaxArgs) .then((dataFrame) => { packetsLock -= 1; const componentStorage = dataSource.store(); dataFrame.forEach((item) => { componentStorage.insert(item); }); dataSource.reload(); const range = component.getArgumentAxis().visualRange(); onVisualRangeChanged(range, component); }, () => { packetsLock -= 1; dataSource.reload(); }); } } function getDataFrame(args) { const deferred = $.Deferred(); $.ajax({ url: 'https://js.devexpress.com/Demos/WidgetsGallery/data/temperatureData', dataType: 'json', data: args, success(result) { deferred.resolve(result.map((i) => ({ date: new Date(i.Date), minTemp: i.MinTemp, maxTemp: i.MaxTemp, }))); }, error() { deferred.reject('Data Loading Error'); }, timeout: 2000, }); return deferred.promise(); } function getDateString(dateTime) { return dateTime ? dateTime.toLocaleDateString('en-US') : ''; } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/22.1.3/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="chart"></div> </div> </body> </html>
#chart { height: 440px; }