Client-Side Data Processing
Documentation
The DevExtreme JavaScript UI components can get data from a remote storage and process it on the client. This demo shows the Chart component whose data source loads all data from a remote JSON file in one query. Afterwards, different filters are applied to this data depending on a value of the drop-down menu under the chart.
weatherbase.com
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
window.onload = function() {
var source = new DevExpress.data.DataSource({
load: function () {
var d = $.Deferred();
$('#chart').dxChart('instance').showLoadingIndicator();
var xhr = new XMLHttpRequest();
xhr.open("GET", "../../../../data/monthWeather.json", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.responseText) {
d.resolve(JSON.parse(xhr.responseText));
}
};
xhr.send();
return d.promise();
},
loadMode: 'raw',
filter: ['t', '>', '6'],
paginate: false
});
var palette = ["#c3a2cc", "#b7b5e0", "#e48cba"],
paletteIndex = 0;
var viewModel = {
chartOptions: {
dataSource: source,
title: 'Temperature in Barcelona: January 2012',
size: {
height: 420
},
series: {
argumentField: 'day',
valueField: 't',
type: 'bar'
},
customizePoint: function () {
var color = palette[paletteIndex];
paletteIndex = paletteIndex === 2 ? 0 : paletteIndex + 1;
return {
color: color
};
},
legend: {
visible: false
},
"export": {
enabled: true
},
valueAxis: {
label: {
customizeText: function () {
return this.valueText + '°C';
}
}
}
},
temperatureOptions: {
dataSource: [6, 7, 8, 9, 10, 11, 12],
width: 70,
value: 6,
onValueChanged: function (data) {
var t = data.value;
source.filter(['t', '>', t]);
source.load();
}
}
};
ko.applyBindings(viewModel, document.getElementById("chart-demo"));
};
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/21.1.4/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-demo">
<div id="chart" data-bind="dxChart: chartOptions"></div>
<div class="action">
<div id="choose-temperature" data-bind="dxSelectBox: temperatureOptions"></div>
<div class="label">Choose a temperature threshold, °C:
</div>
</div>
</div>
</div>
</body>
</html>
#choose-temperature {
float: right;
}
.action {
width: 320px;
margin-top: 20px;
}
.label {
padding-top: 9px;
}
[
{ "day": "1", "t": 13.1 },
{ "day": "2", "t": 13.2 },
{ "day": "3", "t": 10.5 },
{ "day": "4", "t": 10.6 },
{ "day": "5", "t": 11.9 },
{ "day": "6", "t": 14.3 },
{ "day": "7", "t": 9.6 },
{ "day": "8", "t": 9.5 },
{ "day": "9", "t": 9.4 },
{ "day": "10", "t": 8.8 },
{ "day": "11", "t": 8.7 },
{ "day": "12", "t": 8.8 },
{ "day": "13", "t": 7.5 },
{ "day": "14", "t": 6.4 },
{ "day": "15", "t": 8.8 },
{ "day": "16", "t": 9.6 },
{ "day": "17", "t": 11.6 },
{ "day": "18", "t": 8.9 },
{ "day": "19", "t": 8.8 },
{ "day": "20", "t": 10.8 },
{ "day": "21", "t": 11.4 },
{ "day": "22", "t": 11.6 },
{ "day": "23", "t": 11.4 },
{ "day": "24", "t": 10.6 },
{ "day": "25", "t": 9.6 },
{ "day": "26", "t": 9.6 },
{ "day": "27", "t": 10.9 },
{ "day": "28", "t": 9.8 },
{ "day": "29", "t": 7.2 },
{ "day": "30", "t": 7.2 },
{ "day": "31", "t": 7.6 }
]