Client-Side Data Processing
Documentation
The DevExtreme HTML5 Widgets can get data from a remote storage and process it on the client. This demo shows the Chart widget 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
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.1.0/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/18.2.7/css/dx.common.css" />
<link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/18.2.7/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/18.2.7/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;
}