$(() => {
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.2.6/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/22.2.6/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;
}
